संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
TopAppBar कॉम्पोज़ेबल का इस्तेमाल करके, टॉप ऐप्लिकेशन बार बनाएं. इससे उपयोगकर्ताओं को आपके ऐप्लिकेशन में नेविगेट करने और फ़ंक्शन ऐक्सेस करने में मदद मिलेगी.
वर्शन के साथ काम करना
इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.
डिपेंडेंसी
टॉप ऐप्लिकेशन बार के लिए कॉम्पोज़ेबल बनाना
MediumTopAppBar कॉम्पोज़ेबल का इस्तेमाल करके, सबसे ऊपर मौजूद ऐप्लिकेशन बार बनाएं. यह बार, जब उपयोगकर्ता कॉन्टेंट एरिया में नीचे की ओर स्क्रोल करता है, तो छोटा हो जाता है. साथ ही, जब उपयोगकर्ता कॉन्टेंट में सबसे ऊपर की ओर स्क्रोल करता है, तो बड़ा हो जाता है:
सबसे ऊपर मौजूद एक बार, जिसमें एक कार्रवाई तय की गई है.
कार्रवाई करने के लिए, onClick lambda के साथ IconButton कार्रवाई.
Icon वाला IconButton, जिसमें आइकॉन इमेज और कॉन्टेंट के बारे में जानकारी देने वाला टेक्स्ट है.
स्कैफ़ोल्ड के अंदर मौजूद कॉन्टेंट के लिए स्क्रोल करने का तरीका,
enterAlwaysScrollBehavior() के तौर पर तय किया गया है. जब उपयोगकर्ता अंदर मौजूद कॉन्टेंट को ऊपर की ओर खींचता है, तो ऐप्लिकेशन बार छोटा हो जाता है. वहीं, जब उपयोगकर्ता अंदर मौजूद कॉन्टेंट को नीचे की ओर खींचता है, तो ऐप्लिकेशन बार बड़ा हो जाता है.
टाइटल वाले MediumTopBar के अलावा, इनका भी इस्तेमाल किया जा सकता है:
TopAppBar: उन स्क्रीन के लिए इस्तेमाल करें जिनमें ज़्यादा नेविगेशन या कार्रवाइयों की ज़रूरत नहीं होती.
CenterAlignedTopAppBar: उन स्क्रीन के लिए इस्तेमाल करें जिनमें एक मुख्य कार्रवाई होती है.टाइटल, कॉम्पोनेंट के बीच में होता है.
MediumTopAppBar: इसका इस्तेमाल उन स्क्रीन के लिए करें जिन पर ज़्यादा नेविगेशन और कार्रवाइयों की ज़रूरत होती है.
LargeTopAppBar: इस विकल्प का इस्तेमाल उन स्क्रीन के लिए करें जिनमें बहुत ज़्यादा नेविगेशन और कार्रवाइयों की ज़रूरत होती है. इसमें MediumTopAppBar से ज़्यादा पैडिंग का इस्तेमाल किया जाता है. साथ ही, टाइटल को अन्य आइकॉन के नीचे रखा जाता है.
नतीजे
पहली इमेज. मीडियम साइज़ का टॉप ऐप्लिकेशन बार.
ऐसे संग्रह जिनमें यह गाइड शामिल है
यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:
होम स्क्रीन का स्कैफ़ोल्ड बनाना
जटिल यूज़र इंटरफ़ेस बनाने के लिए, स्टैंडर्ड प्लैटफ़ॉर्म का इस्तेमाल करने का तरीका जानें. स्कैफ़ोल्ड, यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों को एक साथ रखता है. इससे ऐप्लिकेशन को एक जैसा लुक और फ़ील मिलता है.
जानें कि कॉम्पोज़ेबल फ़ंक्शन की मदद से, Material Design डिज़ाइन सिस्टम के आधार पर, आसानी से खूबसूरत यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कैसे बनाए जा सकते हैं.
इस पेज पर मौजूद कॉन्टेंट और कोड सैंपल कॉन्टेंट के लाइसेंस में बताए गए लाइसेंस के हिसाब से हैं. Java और OpenJDK, Oracle और/या इससे जुड़ी हुई कंपनियों के ट्रेडमार्क या रजिस्टर किए हुए ट्रेडमार्क हैं.
आखिरी बार 2025-02-06 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-02-06 (UTC) को अपडेट किया गया."],[],[],null,["# Display a top app bar\n\n\u003cbr /\u003e\n\nCreate a top app bar to help users navigate and access functions in your app,\nusing the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a composable for top app bar\n-----------------------------------\n\nCreate a top app bar using the [`MediumTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#MediumTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable that collapses\nwhen the user scrolls down the content area, and expands when the user scrolls\nback to the top of the content:\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun MediumTopAppBarExample() {\n val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())\n\n Scaffold(\n modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),\n topBar = {\n MediumTopAppBar(\n colors = TopAppBarDefaults.topAppBarColors(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n titleContentColor = MaterialTheme.colorScheme.primary,\n ),\n title = {\n Text(\n \"Medium Top App Bar\",\n maxLines = 1,\n overflow = TextOverflow.Ellipsis\n )\n },\n navigationIcon = {\n IconButton(onClick = { /* do something */ }) {\n Icon(\n imageVector = Icons.AutoMirrored.Filled.ArrowBack,\n contentDescription = \"Localized description\"\n )\n }\n },\n actions = {\n IconButton(onClick = { /* do something */ }) {\n Icon(\n imageVector = Icons.Filled.Menu,\n contentDescription = \"Localized description\"\n )\n }\n },\n scrollBehavior = scrollBehavior\n )\n },\n ) { innerPadding -\u003e\n ScrollContent(innerPadding)\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt#L260-L301\n \n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- An outer [`Scaffold`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) with a `TopBar` set.\n- A title consisting of a single `Text` element.\n- A top bar with a single action defined.\n- An [`IconButton`](/reference/kotlin/androidx/compose/material/package-summary#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)) action with an `onClick` lambda to perform the action.\n- An `IconButton` containing an [`Icon`](/reference/kotlin/androidx/compose/material3/package-summary#Icon(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)) that has an icon image and a content description text.\n- The scroll behavior for the Scaffold's inner content is defined as `enterAlwaysScrollBehavior()`. This collapses the app bar when the user pulls up the inner content, and expands the app bar when the user pulls down the inner content.\n- In addition to `MediumTopBar`, which contains the title, you can also use:\n - `TopAppBar`: use for screens that don't require a lot of navigation or actions.\n - [`CenterAlignedTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#CenterAlignedTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)): use for screens that have a single primary action.Title is centered within the component.\n - `MediumTopAppBar`: use for screens that require a moderate amount of navigation and actions.\n - [`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)): use for screens that require a lot of navigation and actions. Uses more padding than `MediumTopAppBar` and places the title beneath any additional icons.\n\nResults\n-------\n\n\u003cbr /\u003e\n\n**Figure 1.** A medium top app bar.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Create a home screen scaffold\n\nFind out how to use a standardized platform to build complex user interfaces. The scaffold holds together different parts of the UI, giving apps a coherent look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/create-a-home-screen-scaffold) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
