Panel aplikasi

Panel aplikasi adalah penampung yang memberi pengguna akses ke fitur utama dan item navigasi. Ada dua jenis panel aplikasi, panel aplikasi atas dan panel aplikasi bawah. Tampilan dan tujuannya masing-masing adalah sebagai berikut:

Jenis	Tampilan	Tujuan
Panel aplikasi atas	Di bagian atas layar.	Menyediakan akses ke tugas dan informasi utama. Umumnya menghosting judul, item tindakan inti, dan item navigasi tertentu.
Panel aplikasi bawah	Di bagian bawah layar.	Biasanya mencakup item navigasi inti. Dapat juga memberikan akses ke tindakan utama lainnya, seperti melalui tombol tindakan mengambang yang ada.

Gambar 1. Panel aplikasi atas (kiri) dan panel aplikasi bawah (kanan).

Untuk menerapkan panel aplikasi atas dan panel aplikasi bawah, gunakan composable TopAppBar dan BottomAppBar. Fitur ini memungkinkan Anda membuat antarmuka konsisten yang mengenkapsulasi kontrol navigasi dan tindakan, serta sesuai dengan prinsip Desain Material.

Penting: Panel aplikasi umumnya diteruskan ke composable Scaffold, yang memiliki parameter tertentu untuk menerimanya. Untuk mengetahui informasi selengkapnya tentang bagaimana Scaffold menyediakan cara yang mudah dalam menyusun aplikasi, buka halaman Scaffold.

Panel aplikasi atas

Tabel berikut menguraikan empat jenis panel aplikasi atas:

Jenis	Contoh
Kecil: Untuk layar yang tidak memerlukan banyak navigasi atau tindakan.
Diratakan ke tengah: Untuk layar yang memiliki satu tindakan utama.
Sedang: Untuk layar yang memerlukan cukup banyak navigasi dan tindakan.
Besar: Untuk layar yang memerlukan banyak navigasi dan tindakan.

Platform API

Berbagai composable yang memungkinkan Anda menerapkan empat panel aplikasi atas yang berbeda cukup mirip. Tag tersebut membagikan beberapa parameter utama:

• title: Teks yang muncul di seluruh panel aplikasi.
• navigationIcon: Ikon utama untuk navigasi. Muncul di sebelah kiri panel aplikasi.
• actions: Ikon yang memberi pengguna akses ke tindakan utama. Tombol muncul di sebelah kanan panel aplikasi.
• scrollBehavior: Menentukan cara panel aplikasi atas merespons scroll konten dalam scaffold.
• colors: Menentukan cara panel aplikasi muncul.

Perilaku scroll

Anda dapat mengontrol cara panel aplikasi merespons saat pengguna men-scroll konten dalam scaffold yang ditentukan. Untuk melakukannya, buat instance TopAppBarScrollBehavior dan teruskan ke panel aplikasi atas untuk parameter scrollBehavior.

Ada tiga jenis TopAppBarScrollBehavior. Kolom tersebut adalah sebagai berikut:

• enterAlwaysScrollBehavior: Saat pengguna menarik konten bagian dalam scaffold, panel aplikasi atas akan diciutkan. Panel aplikasi diluaskan saat pengguna menarik konten dalam ke bawah.
• exitUntilCollapsedScrollBehavior: Mirip dengan enterAlwaysScrollBehavior, meskipun panel aplikasi juga diperluas saat pengguna mencapai akhir konten dalam scaffold.
• pinnedScrollBehavior: Panel aplikasi tetap di tempatnya dan tidak bereaksi terhadap scroll.

Contoh berikut menerapkan beberapa opsi ini.

Contoh

Bagian berikut memberikan implementasi untuk empat jenis panel aplikasi atas yang berbeda, termasuk berbagai contoh cara mengontrol perilaku scroll.

Kecil

Untuk membuat panel aplikasi atas yang kecil, gunakan composable TopAppBar. Ini adalah panel aplikasi atas yang paling sederhana dan dalam contoh ini hanya berisi judul.

Contoh berikut tidak meneruskan nilai pada TopAppBar untuk scrollBehavior sehingga tidak bereaksi terhadap scroll konten dalam.

@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

Implementasi ini akan muncul sebagai berikut:

Gambar 2. Panel aplikasi atas yang kecil.

Rata tengah

Panel aplikasi atas yang rata tengah pada dasarnya sama dengan panel aplikasi kecil, meskipun judulnya dipusatkan dalam komponen. Untuk menerapkannya, gunakan composable CenterAlignedTopAppBar khusus.

Contoh ini menggunakan enterAlwaysScrollBehavior() untuk mendapatkan nilai yang diteruskan untuk scrollBehavior. Dengan demikian, panel akan diciutkan saat pengguna men-scroll konten dalam scaffold.

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    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.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

Implementasi ini akan muncul sebagai berikut:

Gambar 3. Panel aplikasi atas rata tengah.

Medium

Panel aplikasi atas yang sedang menempatkan judul di bawah ikon tambahan. Untuk membuatnya, gunakan composable MediumTopAppBar.

Seperti cuplikan sebelumnya, contoh ini menggunakan enterAlwaysScrollBehavior() untuk mendapatkan nilai yang diteruskan untuk 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.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

Implementasi ini akan muncul sebagai berikut, dengan demonstrasi bagaimana perilaku scroll dari enterAlwaysScrollBehavior() muncul:

Gambar 4. Panel aplikasi atas rata tengah.

Besar

Panel aplikasi atas yang besar mirip dengan media, meskipun padding antara judul dan ikon lebih besar dan menempati lebih banyak ruang di layar secara keseluruhan. Untuk membuatnya, gunakan composable LargeTopAppBar.

Tidak seperti cuplikan sebelumnya, contoh ini menggunakan exitUntilCollapsedScrollBehavior() guna mendapatkan nilai yang diteruskan untuk scrollBehavior. Dengan demikian, panel akan diciutkan saat pengguna men-scroll konten dalam scaffold, tetapi kemudian diluaskan saat pengguna men-scroll ke akhir konten dalam.

@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.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

Implementasi ini akan muncul sebagai berikut:

Gambar 5. Contoh implementasi panel aplikasi atas yang besar.

Panel aplikasi bawah

Untuk membuat panel aplikasi bawah, gunakan composable BottomAppBar. Penggunaan composable ini sangat mirip dengan composable panel aplikasi atas yang dijelaskan di bagian sebelumnya pada halaman ini. Anda meneruskan composable untuk parameter kunci berikut:

• actions: Rangkaian ikon yang muncul di sisi kiri panel. Tindakan ini biasanya dapat berupa tindakan tombol untuk layar tertentu, atau item navigasi.
• floatingActionButton: Tombol tindakan mengambang yang muncul di sisi kanan panel.

@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

Implementasi ini akan muncul sebagai berikut:

Gambar 6. Contoh implementasi panel aplikasi bawah.

Catatan: Anda juga dapat menggunakan BottomAppBar tanpa meneruskan nilai untuk actions dan floatingActionButton. Dalam hal ini, Anda dapat membuat panel aplikasi bawah kustom dengan mengisi BottomAppBar dengan konten seperti yang Anda lakukan terhadap penampung lainnya.

Referensi tambahan

• Dokumen Material3 - Panel aplikasi atas
• Dokumen Material3 - Panel aplikasi bawah
• Scaffold