Vincent Tsen
Android Kotlin Weekly

Android Kotlin Weekly

How to Add Bottom Navigation in Jetpack Compose?

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

Vincent Tsen's photo
Vincent Tsen
·Jun 3, 2022·

2 min read

How to Add Bottom Navigation in Jetpack Compose?

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • 1. Add Icon Vector Asset
  • 2. Add BottomNavigation() Composable
  • 3. Add BottomNavigationItem() Composable
  • 4. Implement Scaffold bottomBar
  • Source Code

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

How_to_Add_Bottom_Navigation _in_Jetpack_Compose_00.gif

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

How_to_Add_Bottom_Navigation _in_Jetpack_Compose_01.gif

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)

Did you find this article valuable?

Support Vincent Tsen by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this