Jetpack Compose Bottom Navigation Example

In this article, we are going to implement bottom navigation bar in android application using jetpack compose components. You can also check out jetpack related articles.

To create bottom navigation bar with jetpack compose, First we need to add navigation compose library in build.gradle file. If you are new to jetpack compose, You can also check out jetpack compose basics UI example.

Add required dependency in app level build.gradle file

implementation “androidx.navigation:navigation-compose:2.4.0-rc01”

Jetpack Compose Main Activity

Scaffold layout contains top bar, bottom bar, navigation drawer, floating action button etc. navigation related views. We can implement our bottom navigation bar to bottom bar property of Scaffold layout.

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeBottomNavigationSampleTheme {
// A surface container using the ‘background’ color from the theme
Surface(color = MaterialTheme.colors.background) {
MainActivityLayout()
}
}
}
}
}

@Composable
fun MainActivityLayout() {
val navigationController = rememberNavController()
Scaffold(
topBar = {
TopBar()
},
bottomBar = {
BottomNavigationLayout(navigationController)
}
) {
NavigationContent(navigationController = navigationController)
}
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetpackComposeBottomNavigationSampleTheme {
MainActivityLayout()
}
}

Customize Top Bar

@Composable
fun TopBar(){
TopAppBar(
title = { Text(text = “Jetpack Compose Navigation”, fontSize = 18.sp) },
backgroundColor = Color.Magenta,
contentColor = Color.White
)
}

Create Class for Navigation Item

sealed class NavigationItem(var navRoute: String, var navIcon: Int, var navTitle: String) {

object Search: NavigationItem(“search”, android.R.drawable.ic_menu_search, “Search”)
object Location: NavigationItem(“location”, android.R.drawable.ic_menu_mylocation, “Location”)
object Share: NavigationItem(“share”, android.R.drawable.ic_menu_share, “Share”)
object More: NavigationItem(“more”, android.R.drawable.ic_menu_more, “More”)

}

Create UI for Bottom Bar Items

@Composable
fun NavigationContent(navigationController: NavHostController) {
NavHost(
navController = navigationController,
startDestination = NavigationItem.Search.navRoute
) {
composable(NavigationItem.Search.navRoute) {
SearchScreen()
}
composable(NavigationItem.Location.navRoute) {
LocationScreen()
}
composable(NavigationItem.Share.navRoute) {
ShareScreen()
}
composable(NavigationItem.More.navRoute) {
MoreScreen()
}
}
}

@Composable
fun SearchScreen() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = “Search”,
textAlign = TextAlign.Center,
fontSize = 50.sp,
fontWeight = FontWeight.Bold,
color = Color.DarkGray
)
}
}

@Composable
fun LocationScreen(){
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = “Location”,
textAlign = TextAlign.Center,
fontSize = 50.sp,
fontWeight = FontWeight.Bold,
color = Color.DarkGray
)
}
}

@Composable
fun ShareScreen(){
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = “Share”,
textAlign = TextAlign.Center,
fontSize = 50.sp,
fontWeight = FontWeight.Bold,
color = Color.DarkGray
)
}
}

@Composable
fun MoreScreen(){
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = “More”,
textAlign = TextAlign.Center,
fontSize = 50.sp,
fontWeight = FontWeight.Bold,
color = Color.DarkGray
)
}
}

Jetpack Compose Bottom Navigation

@Composable
fun BottomNavigationLayout(navigationController: NavController) {
val bottomNavItems = listOf(
NavigationItem.Search,
NavigationItem.Location,
NavigationItem.Share,
NavigationItem.More,
)
BottomNavigation() {
val backStackEntry by navigationController.currentBackStackEntryAsState()
val currentNavRoute = backStackEntry?.destination?.route
bottomNavItems.forEach { navItem ->
BottomNavigationItem(
icon = {
Icon(
painterResource(id = navItem.navIcon),
contentDescription = navItem.navTitle
)
},
label = { Text(text = navItem.navTitle) },
selected = currentNavRoute == navItem.navRoute,
alwaysShowLabel = true,
selectedContentColor = Color.White,
unselectedContentColor = Color.Cyan,
onClick = {
navigationController.navigate(navItem.navRoute) {
navigationController.graph.startDestinationRoute?.let { route ->
popUpTo(route) {
saveState = true
}
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}