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

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

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

टॉप ऐप्लिकेशन बार और बॉटम ऐप्लिकेशन बार लागू करने के लिए, TopAppBar और BottomAppBar कॉम्पोनेंट का इस्तेमाल करें. इनकी मदद से, एक जैसे इंटरफ़ेस बनाए जा सकते हैं. इनमें नेविगेशन और ऐक्शन कंट्रोल शामिल होते हैं. साथ ही, ये इंटरफ़ेस मटीरियल डिज़ाइन के सिद्धांतों के मुताबिक होते हैं.

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

यहां दी गई टेबल में, सबसे ऊपर मौजूद ऐप्लिकेशन बार के चार टाइप के बारे में बताया गया है:

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

एपीआई का प्लैटफ़ॉर्म

सबसे ऊपर मौजूद चार अलग-अलग ऐप्लिकेशन बार लागू करने की सुविधा देने वाले अलग-अलग कॉम्पोज़ेबल काफ़ी मिलते-जुलते हैं. ये कई मुख्य पैरामीटर शेयर करते हैं:

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

स्क्रोल करने का तरीका

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

TopAppBarScrollBehavior तीन तरह के होते हैं. ये इस तरह के हैं:

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

नीचे दिए गए उदाहरणों में इनमें से कई विकल्पों को लागू किया गया है.

उदाहरण

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

छोटा

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

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

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

लागू होने पर यह ऐसा दिखता है:

मध्‍य संरेखित

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

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

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

लागू होने पर यह ऐसा दिखता है:

सामान्य जगह पर

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

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

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

इसे लागू करने का तरीका यहां बताया गया है. साथ ही, enterAlwaysScrollBehavior() के स्क्रोल व्यवहार के दिखने का तरीका भी बताया गया है:

बड़ा

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

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

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

लागू होने पर यह ऐसा दिखता है:

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

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

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

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

लागू होने पर यह ऐसा दिखता है:

अन्य संसाधन

• Material3 docs - ऐप्लिकेशन का टॉप बार
• Material3 के हिसाब से डिज़ाइन किए गए दस्तावेज़ - बॉटम ऐप्लिकेशन बार
• स्कैफ़ोल्ड