स्टेटस बार और नेविगेशन बार को एक साथ सिस्टम बार कहा जाता है. वे बैटरी लेवल, समय, और सूचना अलर्ट और कहीं से भी सीधे डिवाइस इंटरैक्शन की सुविधा दें.
सिस्टम बार की प्रॉमिनेंस को ध्यान में रखना ज़रूरी है, भले ही आप Android OS, इनपुट के तरीकों वगैरह के साथ इंटरैक्शन के लिए यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करना डिवाइस की क्षमताएं. यह पक्का करने के लिए कि सिस्टम बार को ज़्यादातर लेयर के सबसे ऊपर रखें उनकी ज़िम्मेदारी मानी जाती है.
सीखने वाली अहम बातें
यूज़र इंटरफ़ेस (यूआई) के सेफ़ ज़ोन, सिस्टम के हिसाब से, अपने डिज़ाइन में सिस्टम बार शामिल करें इंटरैक्शन, इनपुट के तरीके, डिसप्ले कटआउट, और डिवाइस की अन्य सुविधाएं. सिस्टम बार को सबसे ऊपर की लेयर पर रखें, ताकि यह पक्का किया जा सके कि उनका हिसाब ध्यान में रखा गया है.
सिस्टम बार को पारदर्शी बनाएं और अपने ऐप्लिकेशन को फ़ुल स्क्रीन में दिखाएं, उपयोगकर्ता को एक से दूसरे किनारे तक ले जाने का अनुभव देने के लिए, लगातार यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करना होगा.
टैप करने के लिए इस्तेमाल होने वाले जेस्चर जोड़ने या जेस्चर इनसेट के नीचे खींचें और छोड़ें; यह किनारे से किनारे तक और जेस्चर वाले नेविगेशन के साथ टकराव होता है.
इमेज 2: सिस्टम जेस्चर इनसेट. टैप करने से बचें टारगेट के लिए,
अपने कॉन्टेंट को सिस्टम बार के पीछे खींचें
एज-टू-एज सुविधा की मदद से, Android और शानदार अनुभव मिलेगा. हम एज-टू-एज का इस्तेमाल करने की सलाह देते हैं, क्योंकि आम तौर पर, नेविगेशन बार के लिए 'पारदर्शिता' सुविधा का इस्तेमाल किया जाता है. ( सहायता लेज-टू-एज के हिसाब से होनी चाहिए).
कोई ऐप्लिकेशन इनसेट के हिसाब से, कॉन्टेंट के ओवरलैप होने की समस्या को हल कर सकता है. इनसेट की मदद से, आपके ऐप्लिकेशन के कॉन्टेंट को कितने हिस्सों में जोड़ना होगा, ताकि वे Android OS यूज़र इंटरफ़ेस (यूआई) के कुछ हिस्से, जैसे कि नेविगेशन बार या स्टेटस बार या फ़िज़िकल डिवाइस से जुड़ी सुविधाएं, जैसे कि डिसप्ले कटआउट.
किनारे-किनारे इस्तेमाल करने के लिए डिज़ाइन करते समय, नीचे दिए गए इनसेट के बारे में ध्यान रखें मामले:
- सिस्टम बार इनसेट ऐसे यूज़र इंटरफ़ेस (यूआई) पर लागू होता है जिस पर टैप किया जा सकता है और जिसे नहीं जो सिस्टम बार से विज़ुअल तौर पर छिपाए जाते हैं.
- सिस्टम जेस्चर इनसेट, जेस्चर से नेविगेशन वाली उन जगहों पर लागू होता है जिन्हें सिस्टम इस्तेमाल करता है जिन्हें आपके ऐप्लिकेशन पर प्राथमिकता मिलती है.
स्टेटस बार
Android पर, स्टेटस बार में सूचना आइकॉन और सिस्टम आइकॉन होते हैं. कॉन्टेंट बनाने जब कोई व्यक्ति सूचना को ऐक्सेस करने के लिए, स्टेटस बार को नीचे की ओर खींचकर, उससे इंटरैक्ट करता है शेड.
स्टेटस बार, कॉन्टेक्स्ट, दिन के समय, और स्थिति के आधार पर अलग-अलग तरह से दिख सकता है उपयोगकर्ता की सेट की गई प्राथमिकताओं या थीम, और अन्य पैरामीटर के लिए किया जा सकता है. आप यह भी सेट कर सकते हैं: स्टेटस बार की स्टाइल को चुनें.
पक्का करें कि आपके ऐप्लिकेशन का कॉन्टेंट अब पूरी स्क्रीन पर दिखे, ताकि एक से दूसरे किनारे तक पहुंच सके आवश्यक. एज-टू-एज कॉन्टेंट वाले पारदर्शी सिस्टम बार का इस्तेमाल करें, जैसा कि नीचे दिया गया उदाहरण देखें.
जब कोई सूचना आती है, तो आम तौर पर स्टेटस बार में एक आइकॉन दिखता है. यह उपयोगकर्ता को यह संकेत देता है कि नोटिफ़िकेशन ड्रॉर में देखने के लिए कुछ है. चैनल को दिखाने के लिए, यह आपके ऐप्लिकेशन का आइकॉन या सिंबल हो सकता है. यहां जाएं: सूचनाओं के लिए डिज़ाइन.
स्टेटस बार की स्टाइल सेट करना
अपने ऐप्लिकेशन की थीम के हिस्से के तौर पर, स्टेटस बार के बैकग्राउंड को अपनी पसंद के मुताबिक रंग दें और अपारदर्शिता (पारदर्शिता) और अपारदर्शिता सेट कर सकते हैं.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
अगर मैन्युअल रूप से बैकग्राउंड का रंग सेट किया जा रहा है, तो स्टेटस का रंग बदला जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है सही कंट्रास्ट के लिए, बार कॉन्टेंट को हल्के या गहरे रंग के करें.
कटआउट और स्टेटस बार दिखाएं
डिसप्ले कटआउट, कुछ डिवाइसों का वह हिस्सा होता है जो डिसप्ले तक फैला होता है जगह है, ताकि सामने वाले सेंसर के लिए जगह मिल सके. यह प्रॉडक्ट के दिखने के तरीके पर असर डाल सकता है स्टेटस बार में नहीं दिखेगा. डिसप्ले कटआउट, मैन्युफ़ैक्चरर के हिसाब से अलग-अलग हो सकते हैं.
डिसप्ले कटआउट को दिखाने का तरीका जानें.
नेविगेशन बार
Android की मदद से उपयोगकर्ता, वापस जाने का विकल्प, होम पेज, और खास जानकारी देने वाले कंट्रोल का इस्तेमाल करके, नेविगेशन को कंट्रोल कर सकते हैं:
- वापस जाने पर पिछले व्यू पर वापस लौटा जा सकता है.
- होम, ऐप्लिकेशन से बाहर और डिवाइस की होम स्क्रीन पर ट्रांसफ़र हो जाता है.
- खास जानकारी से पता चलता है कि ऐप्लिकेशन खुले हैं और उन्हें हाल ही में खोला गया है.
उपयोगकर्ता, नेविगेशन बार के अलग-अलग कॉन्फ़िगरेशन में से अपनी पसंद का विकल्प चुन सकते हैं. इसमें जेस्चर भी शामिल है (सुझाया गया) और तीन बटन वाला नेविगेशन भी इस्तेमाल किया जा सकता है.
हाथ के जेस्चर (स्पर्श) वाला नेविगेशन
यह सुविधा Android 10 (एपीआई लेवल 29) में पेश की गई है. इसलिए, जेस्चर वाले नेविगेशन का सुझाव दिया जाता है का इस्तेमाल किया जा सकता है. हालांकि, उपयोगकर्ता की पसंद को नहीं बदला जा सकता. हाथ के जेस्चर नेविगेशन में वापस जाएं, होम पेज पर जाएं, और खास जानकारी वाले बटन का इस्तेमाल न करें. इसके बजाय, यह किफ़ायती दर पर हाथ के जेस्चर का एक हैंडल. उपयोगकर्ता बाईं ओर से स्वाइप करके इंटरैक्ट करते हैं या पीछे और आगे जाने और नीचे से ऊपर की ओर जाने के लिए, स्क्रीन के दाएं किनारे पर होम. ऊपर की ओर स्वाइप करके रखने से खास जानकारी खुलती है.
जेस्चर वाला नेविगेशन, नेविगेशन बार में डिज़ाइन करने के लिए ज़्यादा बेहतर नेविगेशन पैटर्न है मोबाइल और बड़ी स्क्रीन पर. सबसे अच्छा उपयोगकर्ता अनुभव देने के लिए, इन बातों पर ध्यान दें इसके अनुसार जेस्चर नेविगेशन:
- एक से दूसरे किनारे तक ले जाने वाले कॉन्टेंट के साथ काम करना.
- जेस्चर वाले नेविगेशन इनसेट में, इंटरैक्शन या टच टारगेट जोड़ने से बचें.
जेस्चर वाला नेविगेशन लागू करने के बारे में पढ़ें.
तीन बटन वाला नेविगेशन
तीन बटन वाले नेविगेशन में पीछे, होम, और खास जानकारी के लिए तीन बटन होते हैं.
नेविगेशन बार के अन्य वैरिएशन
Android वर्शन और डिवाइस के हिसाब से, नेविगेशन बार के अन्य कॉन्फ़िगरेशन हो सकते हैं उपयोगकर्ताओं के लिए उपलब्ध होना चाहिए. उदाहरण के लिए, दो बटन वाला नेविगेशन, होम और वापस जाने के लिए बटन.
नेविगेशन की स्टाइल सेट करें
नीचे दिए गए उदाहरण में, नेविगेशन स्टाइल को लागू करने का तरीका बताया गया है.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android, यूज़र इंटरफ़ेस की सभी विज़ुअल सुरक्षा को जेस्चर की मदद से मैनेज करता है या बटन मोड में.
जेस्चर वाला नेविगेशन मोड: सिस्टम, डाइनैमिक कलर एडॉप्शन को लागू करता है इसमें सिस्टम बार के कॉन्टेंट का रंग, कॉन्टेंट के हिसाब से बदल जाता है ट्रैक करें. यहां दिए गए उदाहरण में, नेविगेशन बार में मौजूद हैंडल को गहरे रंग वाली सामग्री को हल्के रंग वाली सामग्री के ऊपर रखने पर गहरे रंग का रंग गहरा हो जाएगा.
इमेज 12: डाइनैमिक कलर एडॉप्शन बटन मोड: इस मोड में, सिस्टम के पीछे पारदर्शी स्क्रिम लागू होता है बार (एपीआई लेवल 29 या उसके बाद के लिए) या एक पारदर्शी सिस्टम बार (एपीआई लेवल के लिए) 28 या उससे कम).
इमेज 13: डाइनैमिक कलर एडॉप्शन, जिसमें सिस्टम बार उसके कॉन्टेंट के हिसाब से रंग में बदलाव करना
कीबोर्ड और नेविगेशन
हर तरह का नेविगेशन, ऑन-स्क्रीन कीबोर्ड पर बेहतर तरीके से काम करता है
उपयोगकर्ता को खारिज करने या बदलाव करने जैसी कार्रवाइयां करने की अनुमति देती है
कीबोर्ड प्रकार. कीबोर्ड पर स्मूद ट्रांज़िशन पाने के लिए,
ऐसा ट्रांज़िशन जो कीबोर्ड के स्लाइड होने के साथ ऐप्लिकेशन के ट्रांज़िशन को सिंक करता है
नीचे से ऊपर और नीचे की ओर ले जाने के लिए,
WindowInsetsAnimationCompat.
इमर्सिव मोड
अगर आपको फ़ुल-स्क्रीन पर कॉन्टेंट देखने की ज़रूरत हो, तो सिस्टम बार को छिपाया जा सकता है, उदाहरण के लिए जब उपयोगकर्ता कोई फ़िल्म देख रहा हो. उपयोगकर्ता अब भी इन विकल्पों पर टैप करके सिस्टम बार और यूज़र इंटरफ़ेस (यूआई) दिखा सकता है, ताकि सिस्टम कंट्रोल पर नेविगेट किया जा सके या उनसे इंटरैक्ट किया जा सके. फ़ुल स्क्रीन मोड डिज़ाइन करने के बारे में ज़्यादा जानें. इसके अलावा, इमर्सिव मोड के लिए सिस्टम बार छिपाएं.