स्टेटस बार, कैप्शन बार, और नेविगेशन बार, सिस्टम बार होते हैं. इनसे बैटरी लेवल, समय, और सूचनाओं से जुड़ी चेतावनियों जैसी अहम जानकारी मिलती है. साथ ही, इनसे किसी भी जगह से डिवाइस के साथ सीधे तौर पर इंटरैक्ट किया जा सकता है.
लेआउट, इनपुट के तरीके या डिवाइस की अन्य सुविधाओं को डिज़ाइन करते समय, सिस्टम बार की मौजूदगी और अहमियत को हमेशा ध्यान में रखें.
Android से जुड़ी स्किल
GitHub पर देखेंEdge-to-Edge डिसप्ले की सुविधा जोड़ना
android skills add edge-to-edge
सीखने वाली अहम बातें
अलग-अलग स्क्रीन साइज़ और फ़ॉर्म फ़ैक्टर के लिए, अपने लेआउट में सिस्टम बार शामिल करें. यूज़र इंटरफ़ेस (यूआई) के सेफ़ ज़ोन, सिस्टम इंटरैक्शन, इनपुट के तरीके, डिसप्ले कटआउट, स्टेटस बार, कैप्शन बार, नेविगेशन बार, और डिवाइस की अन्य सुविधाओं को ध्यान में रखें.
सिस्टम स्टेटस और नेविगेशन बार को पारदर्शी या हल्का पारदर्शी रखें. साथ ही, किनारे से किनारे तक कॉन्टेंट दिखाने के लिए, इन बार के पीछे कॉन्टेंट ड्रॉ करें.
सिस्टम बार के दखल को सही तरीके से मैनेज करने के लिए,
WindowInsetsका इस्तेमाल करें. साथ ही, यह पक्का करें कि अडैप्टिव लेआउट में आपका कॉन्टेंट न दिखे.कैननिकल लेआउट का इस्तेमाल करें. ये लेआउट, स्क्रीन स्पेस का सही तरीके से इस्तेमाल करते हैं.
स्टेटस बार
स्टेटस बार में सूचनाओं के आइकॉन और सिस्टम आइकॉन होते हैं. उपयोगकर्ता, स्टेटस बार के साथ इंटरैक्ट करता है. इसके लिए, वह स्टेटस बार को नीचे की ओर खींचकर नोटिफ़िकेशन शेड को ऐक्सेस करता है. स्टेटस बार के स्टाइल, पारदर्शी या हल्के रंग के हो सकते हैं.
स्टेटस बार के आइकॉन
स्टेटस बार के आइकॉन, कॉन्टेक्स्ट, दिन के समय, उपयोगकर्ता की सेट की गई प्राथमिकताओं या थीम, और अन्य पैरामीटर के आधार पर अलग-अलग दिख सकते हैं. ज़्यादा जानकारी के लिए, सिस्टम बार के आइकॉन देखें.
जब कोई सूचना मिलती है, तो आम तौर पर स्टेटस बार में एक आइकॉन दिखता है. इससे उपयोगकर्ता को पता चलता है कि सूचना पैनल में कुछ नया है. यह आपके ऐप्लिकेशन का आइकॉन या चैनल की पहचान के लिए इस्तेमाल होने वाला कोई सिंबल हो सकता है. सूचनाओं का डिज़ाइन देखें.
स्टेटस बार का स्टाइल सेट करना
स्टेटस बार को पारदर्शी या हल्का पारदर्शी बनाएं, ताकि आपके ऐप्लिकेशन का कॉन्टेंट पूरी स्क्रीन पर दिखे. इसके बाद, सिस्टम बार के आइकॉन की स्टाइल सेट करें, ताकि आइकॉन का कंट्रास्ट सही हो.
Android 15 पर, एज-टू-एज डिसप्ले की सुविधा लागू की गई है. इससे स्टेटस बार डिफ़ॉल्ट रूप से पारदर्शी हो जाता है. पुराने सिस्टम के साथ काम करने की सुविधा के लिए, enableEdgeToEdge() को कॉल करें.
बाईं ओर दी गई इमेज में, स्टेटस बार ट्रांसपैरंट है और TopAppBar का हरा बैकग्राउंड, स्टेटस बार के पीछे दिख रहा है.
पारदर्शी स्टेटस बार तब सबसे सही होते हैं, जब यूज़र इंटरफ़ेस (यूआई) स्टेटस बार के नीचे न दिखता हो या कोई इमेज स्टेटस बार के नीचे दिखती हो. जब यूज़र इंटरफ़ेस (यूआई) स्टेटस बार के नीचे स्क्रोल करता है, तब पारदर्शी स्टेटस बार सबसे सही होते हैं. ग्रेडिएंट प्रोटेक्शन के बारे में ज़्यादा जानने के लिए, एज-टू-एज डिज़ाइन देखें.
नेविगेशन
Android में, उपयोगकर्ताओं को 'वापस जाएं', 'होम', और 'खास जानकारी' कंट्रोल का इस्तेमाल करके नेविगेशन को कंट्रोल करने की सुविधा मिलती है:
- 'वापस जाएं' पर क्लिक करने से, पिछली स्क्रीन पर वापस जाया जा सकता है.
- Home ऐप्लिकेशन बंद हो जाता है और डिवाइस की होम स्क्रीन खुल जाती है.
- खास जानकारी में, चालू ऐप्लिकेशन और हाल ही में बंद किए गए ऐप्लिकेशन दिखते हैं.
उपयोगकर्ता, नेविगेशन के अलग-अलग कॉन्फ़िगरेशन में से कोई एक चुन सकते हैं. इनमें जेस्चर नेविगेशन और अडैप्टिव नेविगेशन शामिल हैं. उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, कई तरह के नेविगेशन का इस्तेमाल करें.
जेस्चर वाला नेविगेशन
जेस्चर वाले नेविगेशन में, वापस जाने, होम स्क्रीन पर जाने, और खास जानकारी देखने के लिए बटन नहीं होते. इसके बजाय, इसमें एक ही जेस्चर हैंडल दिखता है. उपयोगकर्ता, स्क्रीन के बाएं या दाएं किनारे से स्वाइप करके वापस जाते हैं. साथ ही, होम स्क्रीन पर जाने के लिए, स्क्रीन के सबसे निचले हिस्से से ऊपर की ओर स्वाइप करते हैं. ऊपर की ओर स्वाइप करके कुछ समय के लिए होल्ड करने पर, खास जानकारी वाला मेन्यू खुलता है.
जेस्चर नेविगेशन, मोबाइल और बड़ी स्क्रीन, दोनों के लिए नेविगेशन का बेहतर पैटर्न है. उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, जेस्चर नेविगेशन को ध्यान में रखें. इसके लिए, यह तरीका अपनाएं:
- इसमें किनारे से किनारे तक कॉन्टेंट दिखाया जा सकता है.
- जेस्चर वाले नेविगेशन के लिए उपलब्ध इनसेट में इंटरैक्शन या टच टारगेट जोड़ने से बचें.
ज़्यादा जानकारी के लिए, जेस्चर वाला नेविगेशन जोड़ने की सुविधा लेख पढ़ें.
अडैप्टिव नेविगेशन
Android पर नेविगेशन का एक और सामान्य पैटर्न यह है कि डिसप्ले की विंडो साइज़ क्लास के हिसाब से, नेविगेशन रेल और नेविगेशन बार के बीच स्विच किया जाए. Jetpack Compose में मौजूद अडैप्टिव नेविगेशन कॉम्पोनेंट, अलग-अलग साइज़, डाइमेंशन या कॉन्फ़िगरेशन वाले डिवाइसों के हिसाब से काम करते हैं. साथ ही, ये सिस्टम बार को नेविगेशन कॉम्पोनेंट के लेआउट में दखल देने से भी रोकते हैं.
अडैप्टिव लेआउट में, यह ध्यान रखें कि सिस्टम बार अलग-अलग कॉन्टेक्स्ट में कैसे काम करते हैं या उन्हें अलग-अलग स्टाइल में कैसे दिखाया जाता है. जैसे, छोटी या बड़ी विंडो के साइज़ या फ़ोल्ड किए जा सकने वाले डिवाइसों के अलग-अलग पोस्चर.
ज़्यादा जानकारी के लिए, अनुकूली नेविगेशन बनाना लेख पढ़ें.
नेविगेशन आइकॉन
नेविगेशन आइकॉन, उपयोगकर्ता की सेट की गई प्राथमिकताओं या थीम के हिसाब से अलग-अलग दिख सकते हैं. ज़्यादा जानकारी के लिए, सिस्टम बार के आइकॉन देखें.
नेविगेशन की स्टाइल सेट करना
Android, जेस्चर वाले नेविगेशन मोड और बटन मोड में, यूज़र इंटरफ़ेस की विज़ुअल सुरक्षा को मैनेज करता है. सिस्टम, डाइनैमिक कलर अडैप्टेशन की सुविधा लागू करता है. इसमें सिस्टम बार का कॉन्टेंट, उनके पीछे मौजूद कॉन्टेंट के हिसाब से रंग बदलता है.
जेस्चर वाला नेविगेशन मोड
Android 15 को टारगेट करने या Activity पर enableEdgeToEdge को कॉल करने के बाद, सिस्टम पारदर्शी जेस्चर वाला नेविगेशन बार बनाता है और डाइनैमिक कलर अडैप्टेशन लागू करता है. यहां दिए गए उदाहरण में, नेविगेशन बार में मौजूद हैंडल का रंग बदलता है. अगर इसे हल्के रंग के कॉन्टेंट के ऊपर रखा जाता है, तो इसका रंग गहरा हो जाता है. इसके उलट, अगर इसे गहरे रंग के कॉन्टेंट के ऊपर रखा जाता है, तो इसका रंग हल्का हो जाता है.
पारदर्शी जेस्चर वाला नेविगेशन बार का इस्तेमाल करने का सुझाव हमेशा दिया जाता है.
यह करें
क्या न करें
बटन के मोड
Android 15 को टारगेट करने या Activity पर enableEdgeToEdge को कॉल करने के बाद, सिस्टम बटन नेविगेशन बार के पीछे हल्का पारदर्शी स्क्रिम लागू करता है. इसे हटाने के लिए, Window.setNavigationBarContrastEnforced() को 'गलत है' पर सेट करें.
पारदर्शी तीन बटन वाले नेविगेशन बार का इस्तेमाल तब करें, जब बॉटम ऐप्लिकेशन बार या बॉटम ऐप्लिकेशन नेविगेशन बार मौजूद हो. इसके अलावा, इसका इस्तेमाल तब भी किया जा सकता है, जब यूज़र इंटरफ़ेस (यूआई), तीन बटन वाले नेविगेशन बार के नीचे स्क्रोल न हो रहा हो. पारदर्शी नेविगेशन बार पाने के लिए, Window.setNavigationBarContrastEnforced() को false पर सेट करें. साथ ही, सिस्टम नेविगेशन बार के नीचे बॉटम ऐप्लिकेशन बार को पैड करें. ऐसा फ़िगर 7, 8, और 9 में दिखाया गया है. ज़्यादा जानकारी के लिए, सिस्टम बार की सुरक्षा देखें.
कॉन्टेंट को स्क्रोल करने के लिए, तीन बटन वाले पारदर्शी नेविगेशन बार का इस्तेमाल करें. पारदर्शी नेविगेशन बार के बारे में ज़्यादा जानने के लिए, एंड-टू-एंड डिज़ाइन देखें.
कीबोर्ड और नेविगेशन
हर तरह का नेविगेशन, ऑन-स्क्रीन कीबोर्ड के हिसाब से काम करता है, ताकि उपयोगकर्ता कीबोर्ड को बंद करने या उसका टाइप बदलने जैसी कार्रवाइयां कर सके. WindowInsetsAnimationCompat का इस्तेमाल करें, ताकि ऐप्लिकेशन के ट्रांज़िशन को स्क्रीन के सबसे नीचे से ऊपर और नीचे की ओर स्लाइड होने वाले कीबोर्ड के साथ सिंक किया जा सके. इससे ट्रांज़िशन आसानी से हो पाएगा.
लेआउट
अडैप्टिव लेआउट, डिसप्ले के लिए उपलब्ध जगह को ऑप्टिमाइज़ करते हैं. ये ऐप्लिकेशन यूज़र इंटरफ़ेस (यूआई) को व्यवस्थित करते हैं. इसके लिए, ये कॉन्टेंट को सेकंडरी या टर्शरी पैन में ले जाते हैं.
अडैप्टिव लेआउट डिज़ाइन करते समय, यह ध्यान रखें कि सिस्टम बार आपके कॉन्टेंट के साथ कैसे इंटरैक्ट करते हैं. WindowInsets का इस्तेमाल करके पक्का करें कि आपका यूज़र इंटरफ़ेस (यूआई), बड़ी स्क्रीन, फ़ोल्ड किए जा सकने वाले डिवाइसों, और मल्टी-विंडो और डेस्कटॉप विंडोविंग मोड में ऐप्लिकेशन विंडो जैसे डिसप्ले पर सिस्टम बार से न ढका हो.
जब आपका ऐप्लिकेशन पूरी स्क्रीन पर दिखता है, तो पुष्टि करें कि कॉन्टेंट और कंट्रोल, सिस्टम यूज़र इंटरफ़ेस (यूआई) से न ढके हों. उदाहरण के लिए, अगर नेविगेशन बार किसी बटन को कवर करता है, तो हो सकता है कि उपयोगकर्ता उस बटन पर क्लिक न कर पाए.
ज़्यादा जानकारी के लिए, कैननिकल लेआउट देखें.
डिसप्ले कटआउट
डिसप्ले कटआउट, कुछ डिवाइसों पर डिसप्ले का वह हिस्सा होता है जो डिसप्ले की सतह में फैला होता है. इससे सामने की ओर लगे सेंसर के लिए जगह मिलती है. डिस्प्ले कटआउट, मैन्युफ़ैक्चरर के हिसाब से अलग-अलग हो सकते हैं. ध्यान रखें कि डिसप्ले कटआउट, कॉन्टेंट, स्क्रीन की दिशा, और एज-टू-एज डिसप्ले के साथ कैसे इंटरैक्ट करेंगे.
इमर्सिव मोड
फ़ुल-स्क्रीन मोड का इस्तेमाल करते समय, सिस्टम बार छिपाए जा सकते हैं. उदाहरण के लिए, जब उपयोगकर्ता कोई फ़िल्म देख रहा हो. उपयोगकर्ता के पास अब भी सिस्टम बार को दिखाने के लिए टैप करने का विकल्प होना चाहिए. साथ ही, उसे सिस्टम कंट्रोल के साथ नेविगेट करने या इंटरैक्ट करने का विकल्प भी मिलना चाहिए. ज़्यादा जानकारी के लिए, इमर्सिव कॉन्टेंट और इमर्सिव मोड के लिए सिस्टम बार छिपाना देखें.