TopAppBar: यह क्या है, सेटअप और Jetpack Compose में उपयोग

Jetpack Compose में TopAppBar क्या है?

TopAppBar Jetpack Compose के लिए Material Design लाइब्रेरी का एक composable फ़ंक्शन है जो शीर्ष ऐप बार को लागू करता है। कंपोनेंट वर्तमान स्क्रीन का शीर्षक, बाईं ओर नेविगेशन बटन और दाईं ओर अतिरिक्त कार्रवाइयाँ प्रदर्शित करता है।

क्लासिक View सिस्टम के विपरीत, TopAppBar का Compose संस्करण पूरी तरह से घोषणात्मक है: findViewById के माध्यम से प्रबंधित होने के बजाय, स्थिति बदलने पर बार फिर से खींचा जाता है। TopAppBar slot API अवधारणा का उपयोग करता है, जहाँ title, navigationIcon और actions को composable लैम्ब्डा के रूप में पास किया जाता है। यह बिना इनहेरिटेंस के बार के किसी भी तत्व को अनुकूलित करने की अनुमति देता है।

Google Material Design (2025) के अनुसार, Compose में TopAppBar तीन प्रकारों में आता है: CenterAlignedTopAppBar (केंद्रित शीर्षक), SmallTopAppBar (मानक), और MediumTopAppBar (विस्तारित)। प्रत्येक प्रकार बार की ऊँचाई, शीर्षक फ़ॉन्ट आकार और स्क्रॉल व्यवहार को परिभाषित करता है। केंद्रित संस्करण का उपयोग अक्सर मुख्य स्क्रीन पर किया जाता है, जबकि MediumTopAppBar का उपयोग उन पृष्ठों के लिए किया जाता है जहाँ स्क्रॉल करने पर शीर्षक आसानी से छोटा हो जाता है।

TopAppBar के सही संचालन के लिए सिस्टम मार्जिन को ध्यान में रखना आवश्यक है: WindowInsetsCompat से Insets। Android Developers (2025) की सिफारिश के अनुसार, Modifier.statusBarsPadding() या windowInsetsPadding(WindowInsets.systemBars) को कॉल करने से बार को स्टेटस बार पर ओवरलैप होने से रोका जा सकता है।

TopAppBar पैरामीटर: शीर्षक और मॉडिफ़ायर कॉन्फ़िगर करना

TopAppBar कंपोनेंट कई आवश्यक और वैकल्पिक पैरामीटर स्वीकार करता है। मुख्य है title, जहाँ शीर्षक टेक्स्ट के साथ एक composable ब्लॉक पास किया जाता है। चूँकि title एक @Composable लैम्ब्डा है, आप न केवल टेक्स्ट बल्कि टेक्स्ट के साथ एक आइकन, एक खोज फ़ील्ड बना सकते हैं, या प्रगति प्रदर्शित कर सकते हैं।

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar() {
    TopAppBar(
        title = { Text("Main") },
        navigationIcon = {
            IconButton(onClick = { /* open drawer */ }) {
                Icon(
                    Icons.Filled.Menu,
                    contentDescription = "Menu"
                )
            }
        },
        actions = {
            IconButton(onClick = { /* search */ }) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
        }
    )
}

Modifier पैरामीटर पूरे बार के लिए पैडिंग, आकार और संरेखण सेट करने की अनुमति देता है। Modifier.heightIn के माध्यम से न्यूनतम और अधिकतम ऊँचाई को सीमित किया जा सकता है। colors पैरामीटर पृष्ठभूमि, शीर्षक और आइकन रंगों को ओवरराइड करने के लिए TopAppBarColors ऑब्जेक्ट स्वीकार करता है।

डिफ़ॉल्ट रूप से, TopAppBar वर्तमान MaterialTheme से रंग योजना का उपयोग करता है। यदि कस्टम पैलेट की आवश्यकता है, तो TopAppBarDefaults.smallTopAppBarColors() का उपयोग करें। Material3 में, पृष्ठभूमि का रंग हल्के और गहरे थीम में स्वचालित रूप से surfaceColor के अनुकूल हो जाता है, जिससे मैन्युअल कॉन्फ़िगरेशन की आवश्यकता समाप्त हो जाती है।

TopAppBar में नेविगेशन बटन

NavigationIcon TopAppBar के बाएँ भाग में एक composable ब्लॉक है जिसके माध्यम से नेविगेशन लागू किया जाता है। सामान्य परिदृश्य: Drawer खोलना (मेनू आइकन), पिछली स्क्रीन पर लौटना (ArrowBack आइकन), या वर्तमान स्क्रीन को बंद करना (Close आइकन)।

आइकन का चुनाव नेविगेशन स्टैक में स्क्रीन की स्थिति पर निर्भर करता है। यदि स्क्रीन रूट है, तो Drawer खोलने के लिए मेनू आइकन प्रदर्शित होता है। यदि स्क्रीन नेस्टेड है, तो वापस जाने के लिए ArrowBack आइकन प्रदर्शित होता है। Compose में, यह तर्क NavController के माध्यम से लागू किया जाता है: वर्तमान बैक स्टैक एंट्री निर्धारित करता है कि कौन सा आइकन दिखाना है।

Material Design (2025) की सिफारिशों के अनुसार, नेविगेशन क्षेत्र की चौड़ाई 48 dp है — स्पर्श इंटरैक्शन के लिए मानक लक्ष्य। आइकन दृश्य प्रतिक्रिया (ripple) के साथ क्लिक करने योग्य होना चाहिए। Compose में, यह नेविगेशन शुरू करने वाले onClick कॉलबैक के साथ IconButton में लपेटकर सुनिश्चित किया जाता है।

Scaffold का उपयोग करते समय, नेविगेशन बटन DrawerState को डुप्लिकेट कर सकता है, जो सीधे TopAppBar के बजाय Scaffold को पास किया जाता है। इस मामले में, navigationIcon rememberDrawerState के माध्यम से Drawer स्थिति को संदर्भित करता है।

एक्शन और ड्रॉपडाउन मेनू जोड़ना

TopAppBar में actions पैरामीटर RowScope संदर्भ के साथ एक composable ब्लॉक स्वीकार करता है, जो शीर्षक के दाईं ओर कई आइकन या बटन रखने की अनुमति देता है। प्रत्येक एक्शन एक क्लिक करने योग्य आइकनोग्राफ़िक तत्व होना चाहिए: खोज, सूचनाएँ, सेटिंग्स, पसंदीदा।

अतिरिक्त एक्शन के लिए DropdownMenu के माध्यम से एक ड्रॉपडाउन मेनू का उपयोग किया जाता है। यदि एक्शन की संख्या तीन से अधिक है, तो अतिरिक्त एक्शन MoreVert आइकन के साथ OverflowMenu में रखे जाते हैं। क्लिक करने पर, छिपे हुए एक्शन की एक सूची खुलती है। DropdownMenu आइकन के सापेक्ष स्वचालित रूप से स्थित होता है।

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profile") },
        actions = {
            IconButton(onClick = { /* share */ }) {
                Icon(Icons.Filled.Share, contentDescription = "Share")
            }
            Box {
                IconButton(onClick = { menuExpanded = true }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "More")
                }
                DropdownMenu(
                    expanded = menuExpanded,
                    onDismissRequest = { menuExpanded = false }
                ) {
                    DropdownMenuItem(text = { Text("Settings") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("About") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

प्रत्येक आइकन के लिए contentDescription सेट करना महत्वपूर्ण है — यह एक्सेसिबिलिटी आवश्यकता है। विवरण के बिना, TalkBack बटन की घोषणा नहीं करेगा। केवल सजावटी तत्वों के लिए contentDescription = null का उपयोग करें।

Material3 में TopAppBar: डायनामिक कलर और अनुकूलन

Material3 (M3) Material Design का वर्तमान संस्करण है, जिसे Google नए प्रोजेक्ट्स के लिए अनुशंसित करता है। M3 में TopAppBar TopAppBar, CenterAlignedTopAppBar और MediumTopAppBar के माध्यम से लागू किया गया है। Material2 से मुख्य अंतर डायनामिक कलर, अनुकूली ऊँचाई और स्क्रॉल व्यवहार के लिए अंतर्निहित समर्थन है।

डायनामिक कलर डिवाइस वॉलपेपर (Android 12+) के आधार पर बार के रंगों को स्वचालित रूप से चुनता है। M3 में TopAppBar पृष्ठभूमि के लिए surfaceColor और शीर्षक के लिए primary का उपयोग करता है। यदि डायनामिक कलर उपलब्ध नहीं है, तो MaterialTheme से एक फॉलबैक पैलेट लागू किया जाता है। Google Material Design (2025) के अनुसार, 63% Android 12+ उपयोगकर्ता ऐप्स में डायनामिक कलर का उपयोग करते हैं।

MediumTopAppBar एक बड़े शीर्षक (32 sp) के साथ एक विस्तारित संस्करण है, जो स्क्रॉल करने पर आसानी से 20 sp तक छोटा हो जाता है, SmallTopAppBar में बदल जाता है। यह प्रभाव TopAppBarDefaults.mediumTopAppBarColors() और scrollBehavior पैरामीटर के माध्यम से कार्यान्वित किया जाता है। संक्रमण एनिमेशन TopAppBarState के माध्यम से नियंत्रित किया जाता है, जो शीर्षक के संकुचन को ट्रैक करता है।

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MediumTopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = { Text("Library") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(contentPadding = padding) { /* content */ }
    }
}

Material3 TopAppBar के लिए, आपको @OptIn(ExperimentalMaterial3Api::class) का उपयोग करना होगा — एनोटेशन इंगित करता है कि API भविष्य के संस्करणों में बदल सकता है। 2025 तक, M3 में TopAppBar प्रयोगात्मक बना हुआ है, लेकिन Google उचित परीक्षण के साथ प्रोडक्शन के लिए इसकी अनुशंसा करता है।

ScrollBehavior: स्क्रॉल करते समय बार छिपाना

ScrollBehavior एक तंत्र है जो सामग्री को लंबवत स्क्रॉल करने के दौरान TopAppBar की दृश्यता को नियंत्रित करता है। Jetpack Compose में, scrollBehavior स्थान खाली करने के लिए बार को छिपाने या संक्षिप्त करने की अनुमति देता है, जो विशेष रूप से बड़ी सामग्री सूचियों वाली स्क्रीन पर उपयोगी है।

Material3 तीन रणनीतियाँ प्रदान करता है: enterAlways (ऊपर स्क्रॉल करने पर बार दिखाई देता है और नीचे स्क्रॉल करने पर छिप जाता है), exitUntilCollapsed (शीर्षक पूरी तरह से संकुचित होने के बाद ही बार छिपता है), और TopAppBarScrollBehavior इंटरफ़ेस को लागू करके कस्टम। पहला विकल्प सामग्री फ़ीड के लिए उपयुक्त है, दूसरा MediumTopAppBar वाली स्क्रीन के लिए।

ScrollBehavior को rememberLazyListState() के माध्यम से LazyColumn या LazyRow के साथ समन्वय की आवश्यकता होती है। स्क्रॉल स्थिति scrollBehavior पैरामीटर के माध्यम से TopAppBar को पास की जाती है। कंपोनेंट स्वचालित रूप से स्क्रॉल ईवेंट की सदस्यता लेता है और बार की दृश्यता को एनिमेट करता है। Android Developers (2025) के अनुसार, enterAlwaysScrollBehavior सबसे लोकप्रिय रणनीति है, जिसका उपयोग स्क्रॉल करने योग्य TopAppBar वाले 75% ऐप्स में किया जाता है।

कस्टम ScrollBehavior कॉन्फ़िगर करना

कस्टम व्यवहार बनाने के लिए, TopAppBarScrollBehavior का विस्तार करें और onScroll और onDrag विधियों को ओवरराइड करें। कस्टम व्यवहार तब उपयोगी होता है जब मानक परिदृश्य डिज़ाइन आवश्यकताओं को कवर नहीं करते — उदाहरण के लिए, बार को केवल एक निश्चित स्क्रॉल सीमा से अधिक होने पर ही छिपना चाहिए।

डिफ़ॉल्ट रूप से, scrollBehavior सामग्री में पैडिंग नहीं जोड़ता — paddingTop को Scaffold में contentPadding के माध्यम से या LazyColumn में Modifier.padding के माध्यम से मैन्युअल रूप से सेट किया जाना चाहिए। MediumTopAppBar में, मार्जिन स्वचालित रूप से TopAppBarState.collapsedFraction के माध्यम से गणना की जाती है।

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    topBar = {
        MediumTopAppBar(
            title = { Text("Content") },
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    LazyColumn(contentPadding = padding) { /* items */ }
}

ScrollBehavior केवल Material3 में उपलब्ध है। Material2 TopAppBar में स्क्रॉल करने पर छिपाने का अंतर्निहित समर्थन नहीं है — समान व्यवहार के लिए NestedScrollConnection के माध्यम से मैन्युअल कार्यान्वयन की आवश्यकता है।