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