Jetpack Compose - BottomAppBar

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

BottomAppBar di Jetpack Compose

Apa itu BottomAppBar?

BottomAppBar adalah komponen dalam Jetpack Compose yang digunakan untuk menampilkan akses ke tindakan atau navigasi di bagian bawah layar aplikasi. Ini sering digunakan untuk menempatkan tombol aksi, navigasi, atau menu di bawah konten utama aplikasi.

Kapan Harus Menggunakan BottomAppBar?

BottomAppBar harus digunakan ketika Anda ingin menyediakan akses cepat dan navigasi tambahan di bagian bawah layar aplikasi. Biasanya digunakan dalam aplikasi yang memiliki tindakan atau navigasi utama yang ditempatkan di bagian bawah.

Perbedaan dengan BottomBar

• BottomAppBar: Ini adalah komponen spesifik dalam Jetpack Compose yang dirancang untuk menempatkan aksi atau navigasi tambahan di bagian bawah layar. BottomAppBar biasanya menunjukkan beberapa ikon tindakan atau menu.

• BottomBar: Istilah ini umumnya mengacu pada area atau bar di bagian bawah layar yang menampilkan navigasi atau akses ke bagian-bagian aplikasi tertentu. BottomBar bisa berupa BottomNavigationView di Android, yang merupakan komponen dalam UI Toolkit Android.

Penjelasan

• BottomAppBar: Digunakan untuk menempatkan tindakan, navigasi, atau menu tambahan di bagian bawah layar aplikasi.

• Kapan Harus Menggunakan: Saat Anda ingin memberikan akses cepat ke tindakan atau navigasi tambahan yang ditempatkan di bagian bawah layar aplikasi.

• Perbedaan dengan BottomBar: BottomAppBar adalah komponen dalam Jetpack Compose yang khusus untuk menempatkan aksi atau navigasi tambahan di bagian bawah, sedangkan BottomBar secara umum dapat merujuk pada area atau bar di bagian bawah layar yang menampilkan navigasi atau akses ke bagian-bagian aplikasi tertentu.

Dengan menggunakan BottomAppBar, Anda dapat menyediakan pengalaman pengguna yang lebih baik dengan akses yang mudah dan nyaman ke fungsi-fungsi penting di aplikasi Anda.

Parameter/Atribut

@Composable
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
)

Parameter pada BottomAppBar di Jetpack Compose

• modifier: Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual BottomAppBar.

• containerColor: Color

  • Warna latar belakang dari BottomAppBar.

• contentColor: Color

  • Warna konten (misalnya ikon dan teks) di dalam BottomAppBar, yang didasarkan pada containerColor.

• tonalElevation: Dp

  • Elevasi tonal dari BottomAppBar.

• contentPadding: PaddingValues

  • Padding untuk konten di dalam BottomAppBar.

• windowInsets: WindowInsets

  • Insets jendela (misalnya area bawah layar atau keyboard) yang diterapkan pada BottomAppBar.

• content: @Composable RowScope.() -> Unit

  • Komposisi untuk menentukan konten yang akan ditampilkan di dalam BottomAppBar, biasanya berisi ikon dan teks.

Penjelasan

• modifier: Digunakan untuk menyesuaikan tata letak atau gaya visual BottomAppBar sesuai kebutuhan aplikasi Anda.

• containerColor: Warna latar belakang dari BottomAppBar, yang dapat disesuaikan sesuai desain aplikasi.

• contentColor: Warna dari konten di dalam BottomAppBar, yang dihitung berdasarkan containerColor untuk memastikan kontras yang baik.

• tonalElevation: Menentukan elevasi tonal dari BottomAppBar, memberikan kedalaman visual terhadap latar belakang.

• contentPadding: Padding untuk konten di dalam BottomAppBar, untuk menyesuaikan jarak antara elemen-elemen di dalamnya.

• windowInsets: Menentukan bagaimana insets jendela diterapkan pada BottomAppBar, mempengaruhi interaksi dengan area bawah layar atau keyboard.

• content: Komposisi untuk menentukan konten yang akan ditampilkan di dalam BottomAppBar, misalnya ikon dan teks yang menanggapi input dari pengguna.

Contoh

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DemoBottomAppBar() {
    val currentIndex = remember {
        mutableIntStateOf(0)
    }
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("The Ngoding", color = Color.White)
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color.Blue,
                )
            )
        },
        content = { paddingValues ->
            Column(modifier = Modifier.padding(paddingValues)) {
                Text(text = "The")
                Text(text = "Ngoding")
            }
        },
        floatingActionButton = {
            Text(text = "FAB")
        },
        bottomBar = {
            BottomAppBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Filled.Home, contentDescription = "Home") },
                    label = { Text("Home") },
                    selected = currentIndex.intValue == 0,
                    onClick = {
                        currentIndex.intValue = 0
                    }
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite") },
                    label = { Text("Favorite") },
                    selected = currentIndex.intValue == 1,
                    onClick = {
                        currentIndex.intValue = 1
                    }
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Filled.Settings, contentDescription = "Settings") },
                    label = { Text("Settings") },
                    selected = currentIndex.intValue == 2,
                    onClick = {
                        currentIndex.intValue = 2
                    }
                )

            }
        }
    )
}

Video