एज-टू-एज डिज़ाइन

ऐप्लिकेशन को किनारे से किनारे तक दिखाने के लिए, यूज़र इंटरफ़ेस (यूआई) को सिस्टम बार के नीचे दिखाया जाता है. इससे पूरी स्क्रीन का इस्तेमाल किया जा सकता है.

पहली इमेज. डिवाइस को बाईं तरफ़ ले जाएं. ऐसा ऐप्लिकेशन जो पूरे डिवाइस के स्क्रीन साइज़ के हिसाब से नहीं है. सही है। एज-टू-एज डिसप्ले वाला ऐप्लिकेशन.

सीखने वाली अहम बातें

  • स्क्रीन के किनारों तक बेहतर अनुभव देने के लिए, सिस्टम बार के नीचे बैकग्राउंड और स्क्रोल किया जा सकने वाला कॉन्टेंट बनाएं.
  • सिस्टम इनसेट में टैप जेस्चर या खींचें और छोड़ें टारगेट जोड़ने से बचें. ये एज-टू-एज और जेस्चर नेविगेशन के साथ काम नहीं करते.
दूसरी इमेज. हरे रंग से हाइलाइट किए गए जेस्चर इनसेट वाला ऐप्लिकेशन.

सिस्टम बार के पीछे अपना कॉन्टेंट बनाना

एज-टू-एज सुविधा की मदद से, बेहतर अनुभव के लिए सिस्टम बार के नीचे यूज़र इंटरफ़ेस (यूआई) बनाया जा सकता है.

इनसेट पर प्रतिक्रिया देकर, ऐप्लिकेशन कॉन्टेंट के ओवरलैप की समस्या को हल कर सकता है. इनसेट से पता चलता है कि आपके ऐप्लिकेशन के कॉन्टेंट को कितना पैड किया जाना चाहिए, ताकि वह सिस्टम बार या डिवाइस की डिसप्ले कट्स जैसी सुविधाओं के साथ ओवरलैप न हो. Compose और व्यू में, स्क्रीन के किनारों तक दिखने की सुविधा इस्तेमाल करने और इनसेट को मैनेज करने के तरीके के बारे में पढ़ें.

किनारे से किनारे तक इस्तेमाल के उदाहरण डिज़ाइन करते समय, इनसेट के इन टाइप के बारे में जान लें:

  • सिस्टम बार इनसेट, ऐसे यूज़र इंटरफ़ेस (यूआई) पर लागू होते हैं जिस पर टैप किया जा सकता है और जिसे सिस्टम बार से विज़ुअल तौर पर छिपाया नहीं जाना चाहिए.
  • सिस्टम जेस्चर इनसेट, जेस्चर नेविगेशन वाले उन एरिया पर लागू होते हैं जिनका इस्तेमाल ओएस करता है और जो आपके ऐप्लिकेशन से ज़्यादा प्राथमिकता पाते हैं.
  • डिसप्ले में काट-छांट वाले इनसेट, डिवाइस के उन हिस्सों पर लागू होते हैं जो डिसप्ले के प्लैटफ़ॉर्म से बाहर निकलते हैं. जैसे, कैमरे के लिए काट-छांट वाला हिस्सा.

स्टेटस बार से जुड़ी बातें

सिस्टम बार के डिज़ाइन से जुड़े बुनियादी दिशा-निर्देश पाने के लिए, Android सिस्टम बार देखें. अगले सेक्शन में, स्थिति बार के बारे में कुछ और बातें बताई गई हैं.

स्क्रोल किया जा सकने वाला कॉन्टेंट

स्क्रीन पर स्क्रोल करने पर, सबसे ऊपर मौजूद ऐप्लिकेशन बार छोटा हो जाना चाहिए. Material 3 TopAppBar को छोटा करने का तरीका जानें.

अगर ऐप्लिकेशन बार स्‍टिकी है, तो सबसे ऊपर मौजूद ऐप्लिकेशन बार को स्टेटस बार की ऊंचाई तक छोटा करें.
अगर ऐप्लिकेशन का सबसे ऊपर मौजूद बार स्टिक नहीं है, तो उससे मैच होने वाला बैकग्राउंड कलर ग्रेडिएंट जोड़ें.

जब यूज़र इंटरफ़ेस (यूआई) नीचे की ओर स्क्रोल करता है, तो स्टेटस बार पारदर्शी होने चाहिए, ताकि स्टेटस बार के आइकॉन काफ़ी साफ़ दिखें. ऐसा करने के लिए, सबसे पहले LazyColumn या RecyclerView दस्तावेज़ में दिया गया तरीका अपनाकर, स्क्रोल किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) को किनारे से किनारे तक बनाएं. इसके बाद, इनमें से कोई एक तरीका अपनाकर पक्का करें कि सिस्टम बार पारदर्शी हो:

  • अगर लागू हो, तो स्क्रोल करते समय, Material 3 TopAppBar की अपने-आप सुरक्षा करने की सुविधा का इस्तेमाल करें.
  • 60% अल्फा वाले कस्टम कॉम्पोज़ेबल बनाएं या व्यू के लिए GradientProtection का इस्तेमाल करें.
तीसरी इमेज. हरे रंग से हाइलाइट किए गए जेस्चर इनसेट वाला ऐप्लिकेशन.

अडैप्टिव लेआउट के लिए, पक्का करें कि अलग-अलग बैकग्राउंड रंगों वाले पैनल के लिए अलग-अलग सुरक्षाएं हों.

ग्रेडिएंट सुरक्षा, जो हर पैनल के बैकग्राउंड से मेल नहीं खाती
ग्रेडिएंट की सुरक्षा, जो हर पैनल के बैकग्राउंड से मेल खाती हो.

इसी तरह, नेविगेशन ड्रॉअर को भी बाकी ऐप्लिकेशन से अलग सुरक्षा मिलनी चाहिए.

चौथी इमेज. नेविगेशन पैनल के लिए पारदर्शी स्टेटस बार. इस इमेज में, नेविगेशन ड्रॉअर के लिए स्टेटस बार की सुरक्षा दिखाई गई है, लेकिन ऐप्लिकेशन के लिए नहीं.

स्टेटस बार की सुरक्षा से जुड़ी सुविधाओं को एक साथ इस्तेमाल न करें. उदाहरण के लिए, Material 3 के TopAppBar में पहले से मौजूद सुरक्षा और कस्टम सुरक्षा, दोनों का इस्तेमाल न करें.

नेविगेशन बार के डिज़ाइन से जुड़े बुनियादी दिशा-निर्देश पाने के लिए, Android सिस्टम बार देखें. इस सेक्शन में, नेविगेशन बार से जुड़ी अन्य बातों के बारे में बताया गया है.

स्क्रोल किया जा सकने वाला कॉन्टेंट

स्क्रोल करते समय, सबसे नीचे मौजूद ऐप्लिकेशन बार छोटे होने चाहिए.

जब स्क्रीन के सबसे नीचे मौजूद ऐप्लिकेशन बार ऐनिमेशन के साथ हट जाता है, तो तीन बटन वाले नेविगेशन के लिए सिस्टम बार स्क्रीम जोड़ें.
जेस्चर नेविगेशन को पारदर्शी रखें और कोई अतिरिक्त स्क्रीम न जोड़ें.

डिसप्ले कटआउट

डिसप्ले में काट-छांट करने से, आपके यूज़र इंटरफ़ेस (यूआई) के दिखने के तरीके पर असर पड़ सकता है. ऐप्लिकेशन को डिसप्ले के कटआउट इनसेट को मैनेज करना होगा, ताकि यूज़र इंटरफ़ेस (यूआई) के अहम हिस्से, डिसप्ले के कटआउट के नीचे न दिखें.

डिसप्ले कटआउट इनसेट का इस्तेमाल करके, ज़रूरी यूज़र इंटरफ़ेस (यूआई) इनसेट करें.
ज़रूरी यूज़र इंटरफ़ेस (यूआई) को स्क्रीन के सबसे किनारे पर रखें.

हालांकि, ऐप्लिकेशन बार के सॉलिड बैकग्राउंड को डिसप्ले के कटी हुई जगह में दिखाया जाना चाहिए, जैसा कि यहां दी गई इमेज में दिखाया गया है.

पांचवीं इमेज. ऐप्लिकेशन बार के सॉलिड बैकग्राउंड, डिसप्ले के कटी हुई जगह में दिखते हैं. वहीं, ज़रूरी यूज़र इंटरफ़ेस (यूआई) इनसेट में दिखता है.

पक्का करें कि हॉरिज़ॉन्टल कैरसेल, डिसप्ले के कटआउट में दिखें.

छठी इमेज. किनारे से किनारे तक का हॉरिज़ॉन्टल डिसप्ले, जहां कैरसेल, डिसप्ले के कटआउट से स्क्रोल करता है.

कॉम्पोज़ और व्यू में डिसप्ले कटआउट की सुविधा इस्तेमाल करने के तरीके के बारे में पढ़ें.

अन्य दिशा-निर्देश

आम तौर पर, बैकग्राउंड और डिवाइडर लाइन भी किनारे से किनारे तक होनी चाहिए. साथ ही, टेक्स्ट और बटन जैसे कॉन्टेंट को इनसेट किया जाना चाहिए, ताकि सिस्टम यूज़र इंटरफ़ेस (यूआई) और हार्डवेयर एलिमेंट से बचा जा सके.