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