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