Bottom Navigation di Android Jetpack Compose adalah komponen UI yang ditempatkan di bagian bawah layar dan berfungsi untuk menavigasi antar layar atau fitur utama dalam aplikasi. Bottom Navigation biasanya berisi beberapa item ikon dengan label teks yang mewakili setiap layar atau fitur. Setiap item dalam Bottom Navigation dapat diklik untuk mengubah konten layar, dan biasanya hanya menampilkan 3 hingga 5 item agar tetap sederhana dan mudah diakses. untuk membuat bottom navigation bar sebagai berikut :
1. Buat dulu project baru beri nama bottomNavigation
Kemudian, Buat file sealed class berinama Screen. Ketik kode sebagai berikut:
``` import androidx.annotation.DrawableRes
sealed class Screen (val title:String, val route:String){
sealed class BottomScreen(
val bTitle: String,
val bRoute: String,
@DrawableRes val Icon: Int
): Screen(bTitle, bRoute){
object Home : BottomScreen(
"Home", "home", R.drawable.*baseline_home_24*
)
object Library : BottomScreen(
"Library", "library", R.drawable.*baseline_library_books_24*
)
object Browse : BottomScreen(
"Browser", "browser", R.drawable.*baseline_cloud_24*
)
}
}
val screenInBottom = listOf(Screen.BottomScreen.Home,Screen.BottomScreen.Browse,Screen.BottomScreen.Library,) ```
Kemudian, buat file baru berinama MainView. Lalu masukan kode berikut:
import com.example.musicapps.Screen
import androidx.navigation.compose.composable
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainView() {
val bottomBar: @Composable () -> Unit = **{**
if (currentScreen is Screen.DrawerScreen || currentScreen == Screen.BottomScreen.Home) {
BottomNavigation(modifier = Modifier.*wrapContentSize*()) **{**
*screenInBottom*.*forEach* **{** item **->**
val isSelected = currentRoute == item.bRoute
val tint = if (isSelected) Color.White else Color.Black
Log.d(
"Navigation",
"Item : ${item.bTitle}, Current Route : $currentScreen, is Selected ${isSelected}"
)
BottomNavigationItem(
selected = currentRoute == item.bRoute,
onClick = **{**
title.value = item.bTitle
controller.navigate(item.bRoute)
**}**,
icon = **{**
Icon(
tint = tint,
painter = painterResource(id = item.Icon),
contentDescription = item.bTitle
)
**}**,
label = **{** Text(item.bTitle, color = tint) **}**,
selectedContentColor = Color.White,
unselectedContentColor = Color.Black
)
**}
}
**}
**}
**
Scaffold( bottomBar = bottomBar ) **{**
\#Letakkan Screen Navigation Disini
**}**
Selamat Mencoba …
