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