एज-टू-एज ऐप्लिकेशन, सिस्टम बार के नीचे यूज़र इंटरफ़ेस (यूआई) बनाकर पूरी स्क्रीन का फ़ायदा उठाता है.
Android की सुविधाएं
GitHub पर देखेंएज-टू-एज की सुविधा जोड़ना
android skills add --skill edge-to-edgeसीखने वाली अहम बातें
- एज-टू-एज अनुभव के लिए, सिस्टम बार के नीचे बैकग्राउंड और स्क्रोल किया जा सकने वाला कॉन्टेंट बनाएं.
- सिस्टम इनसेट के नीचे, टैप जेस्चर या ड्रैग टारगेट न जोड़ें. ऐसा करने से, एज-टू-एज और जेस्चर नेविगेशन में समस्याएं आ सकती हैं.
सिस्टम बार के पीछे अपना कॉन्टेंट बनाना
एज-टू-एज की सुविधा की मदद से, शानदार अनुभव के लिए सिस्टम बार के नीचे यूज़र इंटरफ़ेस (यूआई) बनाया जा सकता है.
इनसेट पर प्रतिक्रिया देकर, कोई ऐप्लिकेशन कॉन्टेंट के ओवरलैप होने की समस्या को हल कर सकता है. इनसेट से पता चलता है कि सिस्टम बार या फ़िज़िकल डिवाइस की सुविधाओं के साथ ओवरलैप होने से बचने के लिए, आपके ऐप्लिकेशन के कॉन्टेंट में कितनी पैडिंग जोड़नी होगी, जैसे डिसप्ले कटआउट. Compose और Views में, एज-टू-एज की सुविधा को चालू करने और इनसेट को मैनेज करने के तरीके के बारे में पढ़ें.
एज-टू-एज इस्तेमाल करने के उदाहरण डिज़ाइन करते समय, इनसेट के इन टाइप के बारे में जानें:
- सिस्टम बार इनसेट , यूज़र इंटरफ़ेस (यूआई) पर लागू होते हैं. इस यूज़र इंटरफ़ेस (यूआई) पर टैप किया जा सकता है और यह सिस्टम बार की वजह से, दिखने में धुंधला नहीं होना चाहिए.
- सिस्टम जेस्चर इनसेट , ओएस के इस्तेमाल किए जाने वाले जेस्चर-नेविगेशनल एरिया पर लागू होते हैं. इन्हें आपके ऐप्लिकेशन से ज़्यादा प्राथमिकता मिलती है.
- डिसप्ले कटआउट इनसेट , डिवाइस के उन एरिया पर लागू होते हैं जो डिसप्ले की सतह तक फैले होते हैं. जैसे, कैमरा कटआउट.
स्टेटस बार से जुड़ी ज़रूरी बातें
सिस्टम बार के डिज़ाइन से जुड़े बुनियादी दिशा-निर्देशों के लिए, Android के सिस्टम बार देखें. इस सेक्शन में, स्टेटस बार से जुड़ी अन्य ज़रूरी बातों के बारे में बताया गया है.
स्क्रोल किया जा सकने वाला कॉन्टेंट
स्क्रोल करते समय, सबसे ऊपर मौजूद ऐप्लिकेशन बार छोटा हो जाना चाहिए. Material 3 के TopAppBar को छोटा करने का तरीका जानें. Material 3 में, सबसे ऊपर मौजूद छोटे ऐप्लिकेशन बार, स्टेटस बार की ऊंचाई तक छोटे हो सकते हैं या स्क्रीन से बाहर स्क्रोल किए जा सकते हैं. सबसे ऊपर मौजूद मीडियम और बड़े ऐप्लिकेशन बार, छोटे ऐप्लिकेशन बार में बदल सकते हैं. Material guidance देखें.
यह करें
यह करें
जब यूज़र इंटरफ़ेस (यूआई) नीचे की ओर स्क्रोल होता है, तो स्टेटस बार पारदर्शी होना चाहिए, ताकि स्टेटस बार के आइकॉन धुंधले न दिखें. ऐसा करने के लिए, सबसे पहले स्क्रोल किया जा सकने वाले यूज़र इंटरफ़ेस (यूआई) को एज-टू-एज बनाएं. इसके लिए, LazyColumn या RecyclerView के दस्तावेज़ में दिए गए चरणों को लागू करें. इसके बाद, यह पक्का करें कि सिस्टम बार पारदर्शी हो. इसके लिए, इनमें से कोई एक काम करें:
- अगर लागू हो, तो स्क्रोल करते समय, Material 3 के TopAppBar की सुरक्षा की सुविधा का इस्तेमाल करें. यह सुविधा अपने-आप काम करती है.
- पसंद के मुताबिक ग्रेडिएंट कंपोज़ेबल बनाएं या GradientProtection का इस्तेमाल करें Views के लिए. Compose में ऐसा करने के बारे में ज़्यादा जानने के लिए, सिस्टम बार की सुरक्षा देखें.
अडैप्टिव लेआउट के लिए, पक्का करें कि अलग-अलग बैकग्राउंड कलर वाले पैन के लिए, अलग-अलग सुरक्षा की सुविधाएं हों.
यह न करें
यह करें
इसी तरह, नेविगेशन पैनल के लिए भी, ऐप्लिकेशन के बाकी हिस्सों से अलग सुरक्षा की सुविधा होनी चाहिए.
स्टेटस बार की सुरक्षा की सुविधाओं को एक साथ इस्तेमाल न करें. उदाहरण के लिए, Material 3 के TopAppBar में मौजूद सुरक्षा की सुविधा और पसंद के मुताबिक सुरक्षा की सुविधा, दोनों का इस्तेमाल न करें.
नेविगेशन बार से जुड़ी ज़रूरी बातें
नेविगेशन बार के डिज़ाइन से जुड़े बुनियादी दिशा-निर्देशों के लिए, Android के सिस्टम बार देखें. इस सेक्शन में, नेविगेशन बार से जुड़ी अन्य ज़रूरी बातों के बारे में बताया गया है.
स्क्रोल किया जा सकने वाला कॉन्टेंट
स्क्रोल करते समय, सबसे नीचे मौजूद ऐप्लिकेशन बार छोटा हो जाना चाहिए.
यह करें
यह करें
डिसप्ले कटआउट
डिसप्ले कटआउट से, आपके यूज़र इंटरफ़ेस (यूआई) के दिखने के तरीके पर असर पड़ सकता है. ऐप्लिकेशन में, डिसप्ले कटआउट इनसेट को मैनेज करने की सुविधा होनी चाहिए, ताकि यूज़र इंटरफ़ेस (यूआई) के ज़रूरी हिस्से, डिसप्ले कटआउट के नीचे न दिखें.
यह करें
यह न करें
हालांकि, ऐप्लिकेशन बार के सॉलिड बैकग्राउंड, डिसप्ले कटआउट में दिखने चाहिए. जैसा कि यहां दी गई इमेज में दिखाया गया है.
पक्का करें कि हॉरिज़ॉन्टल कैरसेल, डिसप्ले कटआउट में दिखें.
Compose और Views में, डिसप्ले कटआउट की सुविधा को चालू करने के तरीके के बारे में पढ़ें.
अन्य दिशा-निर्देश
आम तौर पर, बैकग्राउंड और डिवाइडर लाइन भी एज-टू-एज दिखनी चाहिए. वहीं, टेक्स्ट और बटन जैसे कॉन्टेंट को इनसेट किया जाना चाहिए, ताकि वे सिस्टम यूज़र इंटरफ़ेस (यूआई) और हार्डवेयर एलिमेंट के साथ ओवरलैप न हों.