ऐप्लिकेशन बार दिखाना

ऐप्लिकेशन बार, स्क्रीन पर सबसे ऊपर या सबसे नीचे मौजूद कंटेनर होते हैं. इनसे आपके उपयोगकर्ताओं को मुख्य सुविधाओं और नेविगेशन आइटम का ऐक्सेस मिलता है:

टाइप

थीम

मकसद

ऐप्लिकेशन का टॉप बार

स्क्रीन पर सबसे ऊपर.

इससे मुख्य टास्क और जानकारी को ऐक्सेस किया जा सकता है. आम तौर पर, इसमें टाइटल, मुख्य ऐक्शन आइटम, और कुछ नेविगेशन आइटम होते हैं.

बॉटम ऐप्लिकेशन बार

स्क्रीन पर सबसे नीचे.

आम तौर पर, इसमें मुख्य नेविगेशन आइटम शामिल होते हैं. अन्य कार्रवाइयों का ऐक्सेस दे सकता है. उदाहरण के लिए, फ़्लोटिंग ऐक्शन बटन का इस्तेमाल करके.

वर्शन के साथ काम करना

इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.

डिपेंडेंसी

टॉप ऐप्लिकेशन बार लागू करना

नीचे दिए गए कोड में, सबसे ऊपर मौजूद ऐप्लिकेशन बार के चार टाइप को लागू करने का तरीका बताया गया है. इसमें स्क्रोल करने के तरीके को कंट्रोल करने के अलग-अलग उदाहरण भी शामिल हैं.

टॉप पर मौजूद छोटा ऐप्लिकेशन बार

सबसे ऊपर छोटा ऐप्लिकेशन बार बनाने के लिए, TopAppBar कॉम्पोज़ेबल का इस्तेमाल करें. यह सबसे आसान टॉप ऐप्लिकेशन बार है. इस उदाहरण में सिर्फ़ एक टाइटल है.

इस उदाहरण में, TopAppBar को scrollBehavior के लिए कोई वैल्यू नहीं दी गई है. इसलिए, सबसे ऊपर मौजूद ऐप्लिकेशन बार, अंदर मौजूद कॉन्टेंट को स्क्रोल करने पर कोई प्रतिक्रिया नहीं देता.

नतीजा

सबसे ऊपर मौजूद छोटे ऐप्लिकेशन बार का उदाहरण.
पहली इमेज. सबसे ऊपर एक छोटा ऐप्लिकेशन बार.

बीच में अलाइन किया गया सबसे ऊपर मौजूद ऐप्लिकेशन बार

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

इस उदाहरण में, enterAlwaysScrollBehavior() का इस्तेमाल करके वह वैल्यू हासिल की जाती है जो scrollBehavior के लिए पास की जाती है. जब उपयोगकर्ता स्काफ़़ल के अंदर मौजूद कॉन्टेंट को स्क्रोल करता है, तब बार छोटा हो जाता है.

नतीजा

यहां अपना वैकल्पिक लेख लिखें
दूसरी इमेज. सबसे ऊपर मौजूद, बीच में अलाइन किया गया ऐप्लिकेशन बार.

मीडियम साइज़ का टॉप ऐप्लिकेशन बार

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

पिछले कोड की तरह ही, यह उदाहरण enterAlwaysScrollBehavior() का इस्तेमाल करके, scrollBehavior के लिए पास की गई वैल्यू पाता है.

नतीजा

तीसरी इमेज. enterAlwaysScrollBehavior में स्क्रोल करने के तरीके को दिखाने वाला, ऊपर मौजूद मीडियम ऐप्लिकेशन बार.

सबसे ऊपर मौजूद बड़ा ऐप्लिकेशन बार

सबसे ऊपर मौजूद ऐप्लिकेशन बार का बड़ा साइज़, मीडियम साइज़ से मिलता-जुलता है. हालांकि, टाइटल और आइकॉन के बीच का पैडिंग ज़्यादा होता है और यह स्क्रीन पर ज़्यादा जगह लेता है. इसे बनाने के लिए, LargeTopAppBar ) कॉम्पोनेंट का इस्तेमाल करें.

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

नतीजा

किसी ऐप्लिकेशन की स्क्रीन, जिसमें सबसे नीचे ऐप्लिकेशन बार है. इस बार में बाईं ओर ऐक्शन आइकॉन और दाईं ओर फ़्लोटिंग ऐक्शन बटन है.
चौथी इमेज. सबसे ऊपर मौजूद बड़े ऐप्लिकेशन बार को लागू करने का उदाहरण.

बॉटम ऐप्लिकेशन बार लागू करना

सबसे नीचे मौजूद ऐप्लिकेशन बार बनाने के लिए, BottomAppBar कॉम्पोज़ेबल का इस्तेमाल करें. यह सबसे ऊपर मौजूद ऐप्लिकेशन बार कॉम्पोज़ेबल से मिलता-जुलता है.

इन मुख्य पैरामीटर के लिए, कॉम्पोज़ेबल पास किए जाते हैं:

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

नतीजा

किसी ऐप्लिकेशन की स्क्रीन, जिसमें सबसे नीचे ऐप्लिकेशन बार है. इस बार में बाईं ओर ऐक्शन आइकॉन और दाईं ओर फ़्लोटिंग ऐक्शन बटन है.
पांचवीं इमेज. सबसे नीचे मौजूद ऐप्लिकेशन बार को लागू करने का उदाहरण.

प्रमुख बिंदु

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

    • title: ऐप्लिकेशन बार में दिखने वाला टेक्स्ट.
    • navigationIcon: नेविगेशन के लिए मुख्य आइकॉन, जो ऐप्लिकेशन बार के बाईं ओर दिखता है.
    • actions: ये ऐसे आइकॉन होते हैं जिनसे उपयोगकर्ता को मुख्य कार्रवाइयों का ऐक्सेस मिलता है. ये आइकॉन, ऐप्लिकेशन बार की दाईं ओर दिखते हैं.
    • scrollBehavior: इससे यह तय होता है कि स्कैफ़ोल्ड के अंदर मौजूद कॉन्टेंट को स्क्रोल करने पर, सबसे ऊपर मौजूद ऐप्लिकेशन बार कैसे काम करता है.
    • colors: इससे यह तय होता है कि ऐप्लिकेशन बार कैसा दिखेगा.
  • आपके पास यह कंट्रोल करने का विकल्प होता है कि जब उपयोगकर्ता स्काफ़़ल के अंदर मौजूद कॉन्टेंट को स्क्रोल करे, तो ऐप्लिकेशन बार कैसा दिखे. ऐसा करने के लिए, TopAppBarScrollBehavior का एक इंस्टेंस बनाएं और इसे scrollBehavior पैरामीटर के लिए, अपने सबसे ऊपर मौजूद ऐप्लिकेशन बार में पास करें. TopAppBarScrollBehavior तीन तरह के होते हैं:

    • enterAlwaysScrollBehavior: जब उपयोगकर्ता स्कैफ़ोल्ड के अंदरूनी कॉन्टेंट को ऊपर खींचता है, तो सबसे ऊपर मौजूद ऐप्लिकेशन बार छोटा हो जाता है. जब उपयोगकर्ता अंदर मौजूद कॉन्टेंट को नीचे की ओर खींचता है, तो ऐप्लिकेशन बार बड़ा हो जाता है.
    • exitUntilCollapsedScrollBehavior: यह enterAlwaysScrollBehavior जैसा ही है. हालांकि, जब उपयोगकर्ता स्काफ़़ल के अंदरूनी कॉन्टेंट के आखिर तक पहुंचता है, तब ऐप्लिकेशन बार भी बड़ा हो जाता है.
    • pinnedScrollBehavior: ऐप्लिकेशन बार अपनी जगह पर बना रहता है और स्क्रीन पर स्क्रोल करने पर भी नहीं हिलता.

ऐसे संग्रह जिनमें यह गाइड शामिल है

यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

जानें कि कॉम्पोज़ेबल फ़ंक्शन की मदद से, Material Design डिज़ाइन सिस्टम के आधार पर, आसानी से खूबसूरत यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कैसे बनाए जा सकते हैं.

क्या आपका कोई सवाल है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवालों के पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करके अपने सुझाव/राय दें.