Android सिस्टम बार

स्टेटस बार और नेविगेशन बार को एक साथ सिस्टम बार कहा जाता है. वे बैटरी लेवल, समय, और सूचना अलर्ट और कहीं से भी सीधे डिवाइस इंटरैक्शन की सुविधा दें.

सिस्टम बार की प्रॉमिनेंस को ध्यान में रखना ज़रूरी है, भले ही आप Android OS, इनपुट के तरीकों वगैरह के साथ इंटरैक्शन के लिए यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करना डिवाइस की क्षमताएं. यह पक्का करने के लिए कि सिस्टम बार को ज़्यादातर लेयर के सबसे ऊपर रखें उनकी ज़िम्मेदारी मानी जाती है.

पहली इमेज: सिस्टम बार के पीछे की इमेज

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

  • यूज़र इंटरफ़ेस (यूआई) के सेफ़ ज़ोन, सिस्टम के हिसाब से, अपने डिज़ाइन में सिस्टम बार शामिल करें इंटरैक्शन, इनपुट के तरीके, डिसप्ले कटआउट, और डिवाइस की अन्य सुविधाएं. सिस्टम बार को सबसे ऊपर की लेयर पर रखें, ताकि यह पक्का किया जा सके कि उनका हिसाब ध्यान में रखा गया है.

  • ऐसा करें: सिस्टम बार को पारदर्शी बनाएं और अपने ऐप्लिकेशन को फ़ुल स्क्रीन में दिखाएं, उपयोगकर्ता को एक से दूसरे किनारे तक ले जाने का अनुभव देने के लिए, लगातार यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करना होगा.

  • अगर दोनों बार को पारदर्शी सेट नहीं किया जा सकता, तो पक्का करें कि बार के रंग सही हों आपके ऐप्लिकेशन के मुख्य भाग के रंग से मेल खाना चाहिए. उदाहरण के लिए, नेविगेशन बार का रंग, जिसमें जेस्चर बार और सबसे ऊपर मौजूद स्टेटस बार है शरीर के रंग के साथ.

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

    तीसरी इमेज: सिस्टम जेस्चर इनसेट. टैप करने से बचें टारगेट के लिए,

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

एज-टू-एज सुविधा की मदद से, Android और शानदार अनुभव मिलेगा. हम एज-टू-एज का इस्तेमाल करने की सलाह देते हैं, क्योंकि आम तौर पर, नेविगेशन बार के लिए 'पारदर्शिता' सुविधा का इस्तेमाल किया जाता है. ( एज-टू-एज के साथ काम करता है).

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

किनारे-किनारे इस्तेमाल करने के लिए डिज़ाइन करते समय, नीचे दिए गए इनसेट के बारे में ध्यान रखें मामले:

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

स्टेटस बार

Android पर, स्टेटस बार में सूचना आइकॉन और सिस्टम आइकॉन होते हैं. कॉन्टेंट बनाने जब कोई व्यक्ति सूचना को ऐक्सेस करने के लिए, स्टेटस बार को नीचे की ओर खींचकर, उससे इंटरैक्ट करता है शेड.

चौथी इमेज: ऐप्लिकेशन बार के सबसे ऊपर, स्टेटस बार वाले क्षेत्र को हाइलाइट किया जाता है

स्टेटस बार, कॉन्टेक्स्ट, दिन के समय, और स्थिति के आधार पर अलग-अलग तरह से दिख सकता है उपयोगकर्ता की सेट की गई प्राथमिकताओं या थीम, और अन्य पैरामीटर के लिए किया जा सकता है. आप यह भी सेट कर सकते हैं: स्टेटस बार की स्टाइल को चुनें.

पांचवीं इमेज: हल्के और गहरे रंग वाली थीम में स्टेटस बार.

पक्का करें कि आपके ऐप्लिकेशन का कॉन्टेंट अब पूरी स्क्रीन पर दिखे, ताकि एक से दूसरे किनारे तक पहुंच सके आवश्यक. एज-टू-एज कॉन्टेंट वाले पारदर्शी सिस्टम बार का इस्तेमाल करें, जैसा कि नीचे दिया गया उदाहरण देखें.

छठी इमेज: पारदर्शी बार, एज-टू-एज सुविधा, आपके कॉन्टेंट को शानदार बनाने के लिए बिलकुल सही है का सबसे ज़्यादा इस्तेमाल किया जाता है.


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

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

आठवीं इमेज: स्टेटस बार में सूचना का आइकॉन

स्टेटस बार की स्टाइल सेट करना

अपने ऐप्लिकेशन की थीम के हिस्से के तौर पर, स्टेटस बार के बैकग्राउंड को अपनी पसंद के मुताबिक रंग दें और अपारदर्शिता (पारदर्शिता) और अपारदर्शिता सेट कर सकते हैं.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

अगर मैन्युअल रूप से बैकग्राउंड का रंग सेट किया जा रहा है, तो स्टेटस का रंग बदला जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है सही कंट्रास्ट के लिए, बार कॉन्टेंट को हल्के या गहरे रंग के करें.

कटआउट और स्टेटस बार दिखाएं

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

डिसप्ले कटआउट को दिखाने का तरीका जानें.

नौवीं इमेज: डिसप्ले कटआउट के उदाहरण

Android की मदद से उपयोगकर्ता, वापस जाने का विकल्प, होम पेज, और खास जानकारी देने वाले कंट्रोल का इस्तेमाल करके, नेविगेशन को कंट्रोल कर सकते हैं:

  • वापस जाने पर पिछले व्यू पर वापस लौटा जा सकता है.
  • होम, ऐप्लिकेशन से बाहर और डिवाइस की होम स्क्रीन पर ट्रांसफ़र हो जाता है.
  • खास जानकारी से पता चलता है कि ऐप्लिकेशन चालू हैं और हाल ही में खोले गए हैं.

उपयोगकर्ता, नेविगेशन बार के अलग-अलग कॉन्फ़िगरेशन में से अपनी पसंद का विकल्प चुन सकते हैं. इसमें जेस्चर भी शामिल है (सुझाया गया) और तीन बटन वाला नेविगेशन भी इस्तेमाल किया जा सकता है.

हाथ के जेस्चर (स्पर्श) वाला नेविगेशन

यह सुविधा Android 10 (एपीआई लेवल 29) में पेश की गई है. इसलिए, जेस्चर वाले नेविगेशन का सुझाव दिया जाता है का इस्तेमाल किया जा सकता है. हालांकि, उपयोगकर्ता की पसंद को नहीं बदला जा सकता. हाथ के जेस्चर नेविगेशन में वापस जाएं, होम पेज पर जाएं, और खास जानकारी वाले बटन का इस्तेमाल न करें. इसके बजाय, यह किफ़ायती दर पर हाथ के जेस्चर का एक हैंडल. उपयोगकर्ता बाईं ओर से स्वाइप करके इंटरैक्ट करते हैं या पीछे और आगे जाने और नीचे से ऊपर की ओर जाने के लिए, स्क्रीन के दाएं किनारे पर होम. ऊपर की ओर स्वाइप करके रखने से खास जानकारी खुलती है.

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

  • एक से दूसरे किनारे तक ले जाने वाले कॉन्टेंट के साथ काम करना.
  • जेस्चर वाले नेविगेशन इनसेट में, इंटरैक्शन या टच टारगेट जोड़ने से बचें.

जेस्चर वाला नेविगेशन लागू करने के बारे में पढ़ें.

10वीं इमेज: जेस्चर हैंडल वाला नेविगेशन बार

तीन बटन वाला नेविगेशन

तीन बटन वाले नेविगेशन में पीछे, होम, और खास जानकारी के लिए तीन बटन होते हैं.

111 इमेज: तीन बटन वाला नेविगेशन बार

नेविगेशन बार के अन्य वैरिएशन

Android वर्शन और डिवाइस के हिसाब से, नेविगेशन बार के अन्य कॉन्फ़िगरेशन हो सकते हैं उपयोगकर्ताओं के लिए उपलब्ध होना चाहिए. उदाहरण के लिए, दो बटन वाला नेविगेशन, होम और वापस जाने के लिए बटन.

12 इमेज: दो बटन वाला नेविगेशन बार

नेविगेशन की स्टाइल सेट करें

नीचे दिए गए उदाहरण में, नेविगेशन स्टाइल को लागू करने का तरीका बताया गया है.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

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

  • जेस्चर वाला नेविगेशन मोड: सिस्टम, डाइनैमिक कलर एडॉप्शन को लागू करता है जिसमें सिस्टम बार के कॉन्टेंट का रंग, कॉन्टेंट के हिसाब से बदल जाता है ट्रैक करें. यहां दिए गए उदाहरण में, नेविगेशन बार में मौजूद हैंडल को गहरे रंग वाली सामग्री को हल्के रंग वाली सामग्री के ऊपर रखने पर गहरे रंग का रंग गहरा हो जाएगा.

    इमेज 13: डाइनैमिक कलर एडॉप्शन
  • बटन मोड: इस मोड में, सिस्टम के पीछे पारदर्शी स्क्रिम लागू होता है बार (एपीआई लेवल 29 या उसके बाद के लिए) या एक पारदर्शी सिस्टम बार (एपीआई लेवल के लिए) 28 या उससे कम).

    इमेज 14: डाइनैमिक कलर एडॉप्शन, जिसमें सिस्टम बार उसके कॉन्टेंट के हिसाब से रंग बदलना

कीबोर्ड और नेविगेशन

इमेज 15: नेविगेशन बार के साथ ऑन-स्क्रीन कीबोर्ड

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

इमर्सिव मोड

इमेज 16: इमर्सिव मोड, जिसमें फ़ुल-स्क्रीन पर दिखने का अनुभव दिखाया गया है इस्तेमाल करते हैं.

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