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