Untuk membuat panel aplikasi atas kecil, gunakan composable TopAppBar. Ini adalah
panel aplikasi atas yang paling sederhana dan dalam contoh ini hanya berisi judul.
Contoh berikut tidak meneruskan nilai TopAppBar untuk
scrollBehavior, sehingga panel aplikasi atas tidak bereaksi terhadap scroll konten
dalam.
Hasil
Gambar 1. Panel aplikasi atas yang kecil.
Panel aplikasi atas yang dipusatkan
Panel aplikasi atas yang sejajar dengan tengah sama dengan panel aplikasi kecil,
kecuali judulnya berada di tengah dalam komponen. Untuk menerapkannya, gunakan
composable CenterAlignedTopAppBar khusus.
Contoh ini menggunakan enterAlwaysScrollBehavior() untuk mendapatkan nilai yang diteruskan
untuk scrollBehavior. Panel diciutkan saat pengguna men-scroll
konten dalam scaffold.
Hasil
Gambar 2. Panel aplikasi atas yang diposisikan di tengah.
Panel aplikasi atas sedang
Panel aplikasi atas sedang menempatkan judul di bawah ikon tambahan. Untuk membuatnya, gunakan composable MediumTopAppBar.
Seperti kode sebelumnya, contoh ini menggunakan enterAlwaysScrollBehavior() untuk
mendapatkan nilai yang diteruskan untuk scrollBehavior.
Hasil
Gambar 3. Panel aplikasi atas sedang yang menunjukkan perilaku scroll dari enterAlwaysScrollBehavior.
Panel aplikasi atas besar
Panel aplikasi atas besar mirip dengan panel aplikasi sedang, meskipun padding antara
judul dan ikon lebih besar dan menempati lebih banyak ruang di layar secara keseluruhan. Untuk
membuatnya, gunakan composable LargeTopAppBar).
Contoh ini menggunakan
exitUntilCollapsedScrollBehavior() untuk mendapatkan nilai yang diteruskan untuk
scrollBehavior. Panel diciutkan saat pengguna men-scroll
konten dalam scaffold, tetapi kemudian diperluas saat pengguna men-scroll ke akhir
konten dalam.
Hasil
Gambar 4. Contoh penerapan panel aplikasi atas yang besar.
Mengimplementasikan panel aplikasi bawah
Untuk membuat panel aplikasi bawah, gunakan composable BottomAppBar, yang
mirip dengan composable panel aplikasi atas.
Anda meneruskan composable untuk parameter
utama berikut:
actions: Serangkaian ikon yang muncul di sisi kiri panel. Tindakan ini
biasanya berupa tindakan utama untuk layar tertentu, atau item navigasi.
floatingActionButton: Tombol tindakan mengambang yang muncul di
sisi kanan panel.
Hasil
Gambar 5. Contoh penerapan panel aplikasi bawah.
Poin utama
Anda biasanya meneruskan panel aplikasi ke composable Scaffold, yang memiliki
parameter tertentu untuk menerimanya.
Composable yang Anda gunakan untuk menerapkan panel aplikasi
atas memiliki parameter utama yang sama:
title: Teks yang muncul di seluruh panel aplikasi.
navigationIcon: Ikon utama untuk navigasi, yang muncul di
sisi kiri panel aplikasi.
actions: Ikon yang memberi pengguna akses ke tindakan utama, yang
muncul di sebelah kanan panel aplikasi.
scrollBehavior: Menentukan respons panel aplikasi atas terhadap scroll
konten dalam scaffold.
colors: Menentukan tampilan panel aplikasi.
Anda dapat mengontrol respons panel aplikasi saat pengguna men-scroll
konten dalam scaffold. Untuk melakukannya, buat instance
TopAppBarScrollBehavior dan teruskan ke panel aplikasi atas untuk
parameter scrollBehavior. Ada tiga jenis TopAppBarScrollBehavior:
enterAlwaysScrollBehavior: Saat pengguna menarik konten bagian dalam
scaffold, panel aplikasi atas akan diciutkan. Panel aplikasi akan diperluas saat pengguna
menarik konten bagian dalam ke bawah.
exitUntilCollapsedScrollBehavior: Serupa dengan
enterAlwaysScrollBehavior,
meskipun panel aplikasi juga diperluas saat pengguna mencapai akhir
konten dalam scaffold.
pinnedScrollBehavior: Panel aplikasi tetap berada di tempatnya dan tidak bereaksi terhadap
scroll.
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas
sasaran pengembangan Android yang lebih luas:
Menampilkan komponen interaktif
Pelajari cara fungsi composable dapat memudahkan Anda
membuat komponen UI yang menarik berdasarkan sistem desain
Desain Material.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-02-06 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nApp bars are containers at the top or the bottom of the screen that give your\nusers access to key features and navigation items:\n\n| Type | Appearance | Purpose |\n|---------------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------------------------|\n| [Top app bar](#top) | Across the top of the screen. | Provides access to key tasks and information. Typically hosts a title, core action items, and certain navigation items. |\n| [Bottom app bar](#bottom) | Across the bottom of the screen. | Typically includes core navigation items. Might give access to other actions, for example, by using a floating action button. |\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a top app bar\n\nThe following code shows implementations for the four types of top app bars,\nincluding varying examples of how you can control scroll behavior.\n\n- [Small top app bar](#small)\n- [Center-aligned top app bar](#center)\n- [Medium top app bar](#medium)\n- [Large top app bar](#large)\n\nSmall top app bar\n\nTo create a small top app bar, use the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable. This is the\nsimplest possible top app bar and in this example just contains a title.\n\nThe following example does not pass `TopAppBar` a value for\n`scrollBehavior`, so the top app bar does not react to scrolling of the inner\ncontent.\n\nResult **Figure 1.** A small top app bar.\n\nCenter-aligned top app bar\n\nThe center-aligned top app bar is the same as the small app bar,\nexcept the title is centered within the component. To implement it, use the\ndedicated [`CenterAlignedTopAppBar`](/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)) composable.\n\nThis example uses `enterAlwaysScrollBehavior()` to get the value that it passes\nfor `scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content.\n\nResult **Figure 2.** A center-aligned top app bar.\n\nMedium top app bar\n\nThe medium top app bar places the title beneath any additional icons. To create\none, use 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.\n\nLike the previous code, this example uses `enterAlwaysScrollBehavior()` to\nget the value that it passes for `scrollBehavior`.\n\nResult\n\n\u003cbr /\u003e\n\n**Figure 3.** A medium top app bar demonstrating the scroll behavior from `enterAlwaysScrollBehavior`.\n\n\u003cbr /\u003e\n\nLarge top app bar\n\nA large top app bar is similar to the medium, though the padding between the\ntitle and the icons is greater and it occupies more space on screen overall. To\ncreate one, use the [`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) ) composable.\n\nThis example uses\n`exitUntilCollapsedScrollBehavior()` to get the value that it passes for\n`scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content, but then expands when the user scrolls to the end of\nthe inner content.\n\nResult **Figure 4.** An example implementation of a large top app bar.\n\nImplement a bottom app bar\n\nTo create a bottom app bar, use the [`BottomAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) composable, which is\nsimilar to the top app bar composable.\n\nYou pass composables for the following key\nparameters:\n\n- `actions`: A series of icons that appear on the left side of the bar. These are commonly either key actions for the given screen, or navigation items.\n- `floatingActionButton`: The floating action button that appears on the right side of the bar.\n\n| **Note:** You can also use `BottomAppBar` without passing a value for `actions` and `floatingActionButton`. You create a custom bottom app bar by filling `BottomAppBar` with content as you would other containers.\n\nResult **Figure 5.** An example implementation of a bottom app bar.\n\nKey points\n\n- You generally pass app bars to the `Scaffold` composable, which has specific parameters to receive them.\n- The composables that you use to implement top app\n bars share key parameters:\n\n - `title`: The text that appears across the app bar.\n - `navigationIcon`: The primary icon for navigation, which appears on the left of the app bar.\n - `actions`: Icons that provide the user access to key actions, which appear on the right of the app bar.\n - `scrollBehavior`: Determines how the top app bar responds to scrolling of the scaffold's inner content.\n - `colors`: Determines how the app bar appears.\n- You can control how the app bar responds when the user scrolls the\n scaffold's inner content. To do so, create an instance of\n [`TopAppBarScrollBehavior`](/reference/kotlin/androidx/compose/material3/TopAppBarScrollBehavior) and pass it to your top app bar for the\n `scrollBehavior` parameter. There are three types of `TopAppBarScrollBehavior`:\n\n - `enterAlwaysScrollBehavior`: When the user pulls up the scaffold's inner content, the top app bar collapses. The app bar expands when the user pulls down the inner content.\n - `exitUntilCollapsedScrollBehavior`: Similar to `enterAlwaysScrollBehavior`, though the app bar also expands when the user reaches the end of the scaffold's inner content.\n - `pinnedScrollBehavior`: The app bar remains in place and does not react to scrolling.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \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 \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)"]]
