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