ग्रिड और यूनिट

डेंसिटी इंडिपेंडेंट पिक्सल (डीपी) और स्केलेबल पिक्सल (एसपी), लेआउट बनाने और ऐसे फ़ॉन्ट दिखाने के लिए ज़रूरी हैं जो Android डिवाइसों की अलग-अलग स्क्रीन डेंसिटी, साइज़ क्लास, फ़ॉर्म फ़ैक्टर, और आसपेक्ट रेशियो के हिसाब से एक जैसे दिखें.

सीखने वाली अहम बातें

• अगर बेसलाइन ग्रिड का इस्तेमाल किया जा रहा है, तो 4 और 8 के मेज़रमेंट का इस्तेमाल करें.
• पिक्सल के बजाय, dp और sp में स्पेसिफ़िकेशन लिखें.
• सभी बकेट के लिए बिटमैप/रास्टर ग्राफ़िक्स एक्सपोर्ट करें.
• अलग-अलग साइज़ क्लास, रिज़ॉल्यूशन, और आसपेक्ट रेशियो को ध्यान में रखते हुए, रिस्पॉन्सिव डिज़ाइन बनाएं.
• डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी): डेंसिटी-इंडिपेंडेंट पिक्सल, फ़्लेक्सिबल यूनिट होते हैं. ये किसी भी स्क्रीन पर एक जैसे डाइमेंशन के लिए स्केल करते हैं. ये स्क्रीन की फ़िज़िकल डेंसिटी पर आधारित होते हैं. ये यूनिट, 160 डीपीआई (डॉट पर इंच) वाली स्क्रीन के हिसाब से तय की जाती हैं. इस स्क्रीन पर 1 डीपी, करीब 1 पिक्सल के बराबर होता है.
• स्केलेबल पिक्सल (sp): स्केलेबल पिक्सल, dp की तरह ही काम करते हैं. हालांकि, इनका इस्तेमाल फ़ॉन्ट के लिए किया जाता है. sp की डिफ़ॉल्ट वैल्यू, dp की डिफ़ॉल्ट वैल्यू के बराबर होती है. Android सिस्टम, डिवाइस और उपयोगकर्ता की प्राथमिकताओं के आधार पर, इस्तेमाल किए जाने वाले फ़ॉन्ट के साइज़ का हिसाब लगाता है. ये प्राथमिकताएं, उपयोगकर्ता ने अपने Android डिवाइस के Settings ऐप्लिकेशन में सेट की होती हैं.

इन मेज़रमेंट यूनिट के बीच मुख्य अंतर यह है कि स्केलेबल पिक्सल, उपयोगकर्ता की फ़ॉन्ट सेटिंग को बनाए रखते हैं. सुलभता के लिए, टेक्स्ट का साइज़ बड़ा करने की सेटिंग का इस्तेमाल करने वाले लोगों को, फ़ॉन्ट का साइज़ उनकी पसंद के हिसाब से दिखता है. Compose में फ़ॉन्ट का साइज़ बदलने का तरीका जानें.

Android इन इकाइयों का इस्तेमाल, अलग-अलग डिवाइसों और रिज़ॉल्यूशन के हिसाब से इमेज को स्केल करने और उनका अनुवाद करने के लिए करता है.

डेंसिटी बकेट

ज़्यादा डेंसिटी वाली स्क्रीन में, कम डेंसिटी वाली स्क्रीन की तुलना में ज़्यादा पिक्सल प्रति इंच होते हैं. इस वजह से, एक ही पिक्सल डाइमेंशन वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट, कम डेंसिटी वाली स्क्रीन पर बड़े और ज़्यादा डेंसिटी वाली स्क्रीन पर छोटे दिखते हैं. इसलिए, आपको पिक्सल में मेज़रमेंट की जानकारी नहीं देनी चाहिए.

Android, स्क्रीन डेंसिटी की रेंज को "बकेट" में ग्रुप करता है. इनका इस्तेमाल, आपके डिवाइस पर ऐसेट का सबसे सही सेट डिलीवर करने के लिए किया जाता है. सबसे ज़्यादा इस्तेमाल किए जाने वाले डेंसिटी बकेट mdpi, hdpi, xhdpi, xxhdpi, और xxxhdpi हैं. nodpi और anydpi ऐसे बकेट को कहते हैं जो डिवाइस के रिज़ॉल्यूशन के हिसाब से स्केल नहीं होते. इनका इस्तेमाल आम तौर पर वेक्टर ड्रॉएबल के लिए किया जाता है. ये सभी बकेट, आपके ऐप्लिकेशन की किसी संसाधन फ़ाइल से जुड़े होते हैं.

dp का हिसाब लगाने के लिए:

डीपी = (पिक्सल में चौड़ाई * 160) / स्क्रीन की डेंसिटी

ग्रिड

बेसलाइन ग्रिड

अंडरलाइंग ग्रिड का इस्तेमाल करने से, आपके यूज़र इंटरफ़ेस (यूआई) में एक जैसी स्पेसिंग और अलाइनमेंट बनाने में मदद मिलती है. Android यूज़र इंटरफ़ेस (यूआई), लेआउट, कॉम्पोनेंट, और स्पेसिंग के लिए 8 dp ग्रिड का इस्तेमाल करता है.

आइकॉन, टाइप, और कॉम्पोनेंट में मौजूद कुछ एलिमेंट जैसे छोटे एलिमेंट को 4 डीपी ग्रिड के साथ सबसे अच्छी तरह से अलाइन किया जाता है.

कॉलम ग्रिड

कॉलम, ग्रिड स्ट्रक्चर बनाते हैं. इससे लेआउट को वर्टिकल तौर पर तय किया जाता है. इसके लिए, बॉडी एरिया में मौजूद कॉन्टेंट को बांटा जाता है. कॉन्टेंट को स्क्रीन के उन हिस्सों में रखा जाता है जिनमें कॉलम होते हैं. कॉन्टेंट को अलाइन करने के लिए, इसे नीचे मौजूद ग्रिड के साथ अलाइन करें. हालांकि, इसका साइज़ बदला जा सकता है. कॉलम ग्रिड सेट अप करने और लेआउट की बुनियादी बातों में कॉन्टेंट लागू करने के बारे में बुनियादी जानकारी पाएं.

अलग-अलग डिवाइसों के हिसाब से फ़्लेक्सिबल लेआउट बनाने के बारे में जानने के लिए, Material 3 के कैननिकल लेआउट पेज पर जाएं.

साइज़ क्लास

विंडो साइज़ क्लास, व्यूपोर्ट के ब्रेकपॉइंट का एक सेट है. इनकी मदद से, रिस्पॉन्सिव और अडैप्टिव ऐप्लिकेशन लेआउट को डिज़ाइन, डेवलप, और टेस्ट किया जा सकता है. Android, विंडो के साइज़ क्लास को तीन हिस्सों में बांटता है: छोटा, मीडियम, और बड़ा. विंडो के साइज़ क्लास के बारे में ज़्यादा जानें.

आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात)

आस्पेक्ट रेशियो, किसी एलिमेंट की चौड़ाई और लंबाई का अनुपात होता है. आस्पेक्ट रेशियो को चौड़ाई:ऊंचाई के तौर पर लिखा जाता है.

अपने लेआउट में एक जैसा आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) इस्तेमाल करें. जैसे, इमेज, सर्फ़ेस, और स्क्रीन का साइज़. इससे लेआउट में एकरूपता बनी रहती है.

हमारा सुझाव है कि आप अपने यूज़र इंटरफ़ेस (यूआई) में, चौड़ाई-ऊंचाई के इन अनुपातों का इस्तेमाल करें:

• 16:9
• 3:2
• 4:3
• 1:1
• 3:4
• 2:3