Methods to Add Backside Navigation in Jetpack Compose?

That is a part of the Jetpack Compose navigation collection:

This text exhibits the steps that you should do so as to add the underside navigation from this straightforward navigation in Jetpack Compose instance partly 1.

1. Add Icon Vector Asset

On this instance, you are including the ic_home.xml and ic_search.xml vector belongings for the display screen navigation tab.

This highlights the steps :

Chances are you’ll get the next compilation error after including these icons. AAPT: error: useful resource attr/colorControlNormal not discovered.

It’s due to the dependency on the androidx.appcompat:appcompat library, which isn’t required by Jetpack Compose app.

To repair the error, add this library into your appbuild.gradle file:

dependencies {
    
    implementation 'androidx.appcompat:appcompat:1.4.1'
}

[Updated – Sept 27, 2022]: It appears like this step is pointless as a result of we are able to simply reference ImageVector straight from the code utilizing Icons.Default.Residence. So this dependency implementation 'androidx.appcompat:appcompat:1.4.1' will be eliminated as nicely.

2. Add BottomNavigation() Composable

androidx.compose.materials.BottomNavigation() composable operate is used to implement the underside bar navigation.

@Composable
enjoyable BottomBarNavigation(navController: NavController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.vacation spot?.route

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

    BottomNavigation {
        
    }
}

navController.currentBackStackEntryAsState() is used in order that it could possibly retrigger the composable operate to run when the navigation route is modified.

3. Add BottomNavigationItem() Composable

Within the BottomNavigation(), you add the RowScope.BottomNavigationItem() for every row navigation tab.

BottomNavigation {

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

icon, chosen and onClick are obligatory parameters, the remaining are non-obligatory.

[Updated – Sept 27, 2022]: Since importing icon asset manually is now not wanted (see above part), you change

Icon(
    painter = painterResource(R.drawable.ic_home),
    contentDescription = NavRoute.Residence.path
)

with

Icon(
    imageVector = Icons.Default.Residence,
    contentDescription = NavRoute.Residence.path
)

The commit adjustments are right here.

4. Implement Scaffold bottomBar

So as to add BottomBarNavigation(), you name it from the Scaffold -> bottomBar parameter as the next:

val navController = rememberNavController()

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

[Updated – Sept 28, 2022]: Whereas engaged on this Easy RSS Feed reader app, I seen that the content material is roofed by this backside bar navigation. To repair that, I used PaddingValues.calculateBottomPadding() from the Scaffold() so as to add the underside padding of the content material.

• Use paddingValues.calculateBottomPadding() to calculate the required backside bar padding

val navController = rememberNavController()

Scaffold(
    bottomBar = { BottomBarNav(navController = navController) }
) { paddingValues ->
    NavGraph(
        modifier = Modifier.padding(
            backside = paddingValues.calculateBottomPadding()),
        navController = navController
    )
}

• Add Modifier parameter into NavGraph() and NavHost()

@Composable
enjoyable NavGraph(
    modifier: Modifier = Modifier, 
    navController: NavHostController) {

    NavHost(
        modifier = modifier,
        navController = navController,
        startDestination = NavRoute.Login.path
    ) {
        
    }
}

Supply Code

GitHub Repository: Demo_SimpleNavigationCompose (bottom_nav department)