डेंसिटी-इंडिपेंडेंट पिक्सल (dp) और स्केलेबल पिक्सल (sp), लेआउट बनाने और ऐसे फ़ॉन्ट दिखाने के लिए ज़रूरी हैं जो Android डिवाइसों की अलग-अलग स्क्रीन डेंसिटी, साइज़ क्लास, फ़ॉर्म फ़ैक्टर, और आसपेक्ट रेशियो के हिसाब से एक जैसा दिखें.
सीखने वाली अहम बातें
- बेसलाइन ग्रिड का इस्तेमाल करते समय, 4 और 8 की मेज़रमेंट का इस्तेमाल करें.
- स्पेसिफ़िकेशन को पिक्सल के बजाय dp और sp में लिखें.
- सभी बकेट के लिए बिटमैप/रेस्टर ग्राफ़िक एक्सपोर्ट करें.
- अलग-अलग साइज़ क्लास, रिज़ॉल्यूशन, और आसपेक्ट रेशियो को ध्यान में रखकर, रिस्पॉन्सिव डिज़ाइन बनाएं.
- डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी): डेंसिटी-इंडिपेंडेंट पिक्सल, ऐसी यूनिट हैं जिनका साइज़ किसी भी स्क्रीन पर एक जैसा दिखता है. ये स्क्रीन की फ़िज़िकल डेंसिटी पर आधारित होते हैं. ये यूनिट, 160 डीपीआई (डॉट प्रति इंच) वाली स्क्रीन के हिसाब से होती हैं. इस स्क्रीन पर, 1 डीपी करीब-करीब 1 पिक्सल के बराबर होता है.
- स्केलेबल पिक्सल (एसपी): स्केलेबल पिक्सल, डीपी की तरह ही काम करते हैं. हालांकि, ये फ़ॉन्ट के लिए होते हैं. किसी sp की डिफ़ॉल्ट वैल्यू, dp की डिफ़ॉल्ट वैल्यू के बराबर होती है. Android सिस्टम, डिवाइस और उपयोगकर्ता की प्राथमिकता के आधार पर, इस्तेमाल किए जाने वाले फ़ॉन्ट साइज़ का हिसाब लगाता है. उपयोगकर्ता की प्राथमिकता, Android डिवाइस के Settings ऐप्लिकेशन में सेट की जाती है.
मेज़रमेंट की इन इकाइयों के बीच मुख्य अंतर यह है कि स्केलेबल पिक्सल, उपयोगकर्ता की फ़ॉन्ट सेटिंग को सुरक्षित रखते हैं. जिन उपयोगकर्ताओं ने सुलभता के लिए टेक्स्ट की सेटिंग को बड़ा किया है उन्हें फ़ॉन्ट साइज़, टेक्स्ट के साइज़ की उनकी प्राथमिकताओं के हिसाब से दिखते हैं. 'लिखें' टैब में, फ़ॉन्ट का साइज़ बदलने का तरीका जानें.
Android इन इकाइयों का इस्तेमाल, डिवाइसों और रिज़ॉल्यूशन की रेंज में स्केल करने और अनुवाद करने में करता है.
डेंसिटी बकेट
कम डेंसिटी वाली स्क्रीन की तुलना में, ज़्यादा डेंसिटी वाली स्क्रीन में प्रति इंच ज़्यादा पिक्सल होते हैं. इस वजह से, एक ही पिक्सल डाइमेंशन वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट, कम डेंसिटी वाली स्क्रीन पर बड़े और ज़्यादा डेंसिटी वाली स्क्रीन पर छोटे दिखते हैं. इसलिए, आपको पिक्सल में मेज़रमेंट नहीं बताने चाहिए.
Android, स्क्रीन डेंसिटी की रेंज को "बकेट" में बांटता है. साथ ही, इनका इस्तेमाल करके आपके डिवाइस पर एसेट का सबसे सही सेट डिलीवर करता है. आम तौर पर, mdpi, hdpi, xhdpi, xxhdpi, और xxxhdpi डेंसिटी बकेट का इस्तेमाल किया जाता है. nodpi और anydpi, ऐसी बकेट के बारे में बताते हैं जो हर डिवाइस के रिज़ॉल्यूशन के हिसाब से स्केल नहीं होती. आम तौर पर, इसका इस्तेमाल वेक्टर ड्रॉबल के लिए किया जाता है. हर बकेट, आपके ऐप्लिकेशन की किसी संसाधन फ़ाइल से जुड़ी होती है.
डीपी का हिसाब लगाने के लिए:
डीपी = (पिक्सल में चौड़ाई * 160) / स्क्रीन की डेंसिटी
ग्रिड
बेसलाइन ग्रिड
ग्रिड का इस्तेमाल करके बनाने से, यूज़र इंटरफ़ेस (यूआई) में एक जैसी स्पेसिंग और अलाइनमेंट बनाने में मदद मिलती है. Android यूज़र इंटरफ़ेस (यूआई), लेआउट, कॉम्पोनेंट, और स्पेसिंग के लिए 8 डीपी ग्रिड का इस्तेमाल करता है.
कॉम्पोनेंट में मौजूद आइकॉन, टाइप, और कुछ एलिमेंट जैसे छोटे एलिमेंट को 4 डीपी ग्रिड के साथ अलाइन करना सबसे अच्छा होता है.
कॉलम ग्रिड
कॉलम, बॉडी एरिया में कॉन्टेंट को बांटकर, लेआउट को वर्टिकल डिफ़िनिशन देने के लिए ग्रिड स्ट्रक्चर बनाते हैं. कॉन्टेंट को स्क्रीन के उन हिस्सों में रखा जाता है जिनमें कॉलम होते हैं. कॉन्टेंट को अलाइन करने के लिए, किसी ग्रिड के साथ अलाइन करें. हालांकि, साइज़ में बदलाव करने की सुविधा उपलब्ध होनी चाहिए. लेआउट की बुनियादी बातें में, कॉलम ग्रिड सेट अप करने और कॉन्टेंट लागू करने का तरीका जानें.
अलग-अलग फ़ॉर्म फ़ैक्टर के लिए, फ़्लेक्सिबल लेआउट बनाने के बारे में जानने के लिए, Material 3 के कैननिकल लेआउट पेज पर जाएं.
साइज़ क्लास
विंडो साइज़ क्लास, व्यूपोर्ट ब्रेकपॉइंट का एक सेट होता है. इससे आपको रिस्पॉन्सिव और अडैप्टिव ऐप्लिकेशन लेआउट को डिज़ाइन, डेवलप, और टेस्ट करने में मदद मिलती है. Android, विंडो के साइज़ की क्लास को तीन कैटगरी में बांटता है: कॉम्पैक्ट, मीडियम, और बड़ा किया गया. विंडो साइज़ की क्लास के बारे में ज़्यादा पढ़ें.
आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात)
आसपेक्ट रेशियो, किसी एलिमेंट की चौड़ाई और ऊंचाई का अनुपात होता है. आसपेक्ट रेशियो को चौड़ाई:ऊंचाई के तौर पर लिखा जाता है.
अपने लेआउट में एक जैसा आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखने के लिए, इमेज, प्लैटफ़ॉर्म, और स्क्रीन साइज़ जैसे एलिमेंट पर एक जैसा आसपेक्ट रेशियो इस्तेमाल करें.
हमारा सुझाव है कि आप अपने यूज़र इंटरफ़ेस (यूआई) में इन आसपेक्ट रेशियो का इस्तेमाल करें:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3