Instruction
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Introduction to Bottom Navigation
Bottom navigation is a UI element that helps add a few (generally three to five) top-level destinations in the app at the screen’s bottom. It’s a common practice to add bottom-bar navigation in an app with the most critical or frequently visited app sections, often shown with an icon and, optionally, a label, although you can customize that according to your requirements.
Understanding NavigationBar & NavigationBarItem and Integration with Navigation Component
To use bottom navigation in your app, add the following dependency to the app:
dependencies {
implementation("androidx.compose.material:material:1.6.8")
}
var navBarIndex by remember { mutableIntStateOf(0) }
NavigationBar {
NavigationBarItem(
selected = navBarIndex == 0,
onClick = {
navBarIndex = 0
// navigate to email screen
},
icon = {
Icon(
imageVector = Icons.Outlined.Email,
contentDescription = "Email"
)
},
label = { Text(text = "Email") },
)
NavigationBarItem(
selected = navBarIndex == 1,
onClick = {
navBarIndex = 1
// navigate to call screen
},
icon = {
Icon(
imageVector = Icons.Outlined.Call,
contentDescription = "Call"
)
},
label = { Text(text = "Call") },
)
}
val navController = rememberNavController()
Scaffold(
bottomBar = {
NavigationBar {
NavigationBarItem(...)
NavigationBarItem(...)
}
}
) { innerPadding ->
NavHost(
navController = navController,
startDestination = "email-screen",
modifier = Modifier.padding(innerPadding)
) {
composable("email-screen") {
...
}
composable("call-screen") {
...
}
}
}
NavigationBarItem(
onClick = {
navController.navigate("call-screen")
}
...
)