How to Add Bottom Navigation in Jetpack Compose?

This content originally appeared on DEV Community and was authored by Vincent Tsen

Step-by-step guides to add bottom navigation in Jetpack Compose for beginners

This article was originally published at vtsen.hashnode.dev on Jun 4, 2022.

This article shows the steps that you need to do to add the bottom navigation from this simple navigation in jetpack compose example.

1. Add Icon Vector Asset

In this example, you're adding the ic_home.xml and ic_search.xml vector assets for the screen navigation tab.

This highlights the steps :

New -> ** Vector Asset**
Click on the Clip Art to select the Icon asset
Rename it

You may get the following compilation error after adding those icons.

AAPT: error: resource attr/colorControlNormal not found.

It is because of the dependency on the androidx.appcompat:appcompat library, which is not required by Jetpack Compose app.

To fix the error, add this library into your app\build.gradle file:

dependencies {
    // required by "?attr/colorControlNormal" ic_home.xml
    implementation 'androidx.appcompat:appcompat:1.4.1'
}

2. Add BottomNavigation() Composable

androidx.compose.material.BottomNavigation() composable function is used to implement the bottom bar navigation.

@Composable
fun BottomBarNavigation(navController: NavController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    if (currentRoute == null || currentRoute == NavRoute.Login.path) {
        return
    }

    BottomNavigation {
        // implement each navigation tab with BottomNavigationItem() here
    }
}

navController.currentBackStackEntryAsState() is used so that it can retrigger the composable function to run when the navigation route is changed.

3. Add BottomNavigationItem() Composable

In the BottomNavigation(), you add the RowScope.BottomNavigationItem() for each row navigation tab.

BottomNavigation {

    val homeSelected = currentRoute == NavRoute.Home.path
    BottomNavigationItem(
        icon = {
            Icon(
                painter = painterResource(R.drawable.ic_home),
                contentDescription = NavRoute.Home.path
            )
        },
        selected = homeSelected,
        onClick = {
            if(!homeSelected) {
                navController.navigate(NavRoute.Home.path) {
                    popUpTo(NavRoute.Home.path) { inclusive = true }
                }
            }
        },
        label = {Text(NavRoute.Home.path)}
    )
}

icon, selected and onClick are mandatory parameters, the rest are optional.

4. Implement Scaffold bottomBar

To add BottomBarNavigation(), you call it from the Scaffold -> bottomBar parameter as the following:

val navController = rememberNavController()

Scaffold(
    bottomBar = { BottomBarNavigation(navController = navController) }
) {
    BuildNavGraph(navController)
}

Source Code

GitHub Repository: Demo_SimpleNavigationCompose (bottom_nav branch)

1. Add Icon Vector Asset

2. Add BottomNavigation() Composable

3. Add BottomNavigationItem() Composable

4. Implement Scaffold bottomBar

Source Code

See Also

Related Posts