What I learned When I Used BottomNavigation + JetPack Navigation

Image by Material.io:https://material.io/components/bottom-navigation/

Two weeks ago I had to add BottomNavigation in a project that uses Navigation Component I faced some problems so I will share with you the steps to make your bottom navigation works as you expected.

Step 1:

Make your menu items id’s the same as the navigation graph destinations id’s in your navigation XML file.

bottom_nav_menu and mobile_navigation.xml

Step 2:

SetUp your appBarConfiguration Passing each menu ID as a set of Ids because each menu should be considered as top-level destinations.

val appBarConfiguration = AppBarConfiguration(setOf(
        R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications))

Step 3:

Set up the action bar with Navigation Controller

setupActionBarWithNavController(navController, appBarConfiguration)

Step 4:

Set up Navigation Controller with the Bottom Navigation View

navView.setupWithNavController(navController)

Step 5:

Make sure that you have added your start destination in the navigation graph

as the first fragment in your bottom navigation

mobile_navigation.xml

But what the benefit of making navigation_home your start destination? and what will happen if it isn’t ?

By adding navigation_home, When you start navigating through the bottom navigation menu and navigate up or press back button it will always back to navigation_home but if it isn’t navigation_home then the stack will keep adding the destination every time you navigate between destinations so when back pressed the stack will keep popup all till it back to the very first destination so what to do in this case?

• implement OnNavigationItemSelectedListener to listen to the selected Item and set NavOptions builder to popUpTo navigation_home

navView.setOnNavigationItemSelectedListener { item ->
    return@setOnNavigationItemSelectedListener onNavItemDestinationSelected(
        item,
        navController
    )
}
private fun onNavItemDestinationSelected(
        item: MenuItem,
        navController: NavController
    ): Boolean {

        val builder = NavOptions.Builder()
            .setLaunchSingleTop(true)
        if (item.order and Menu.CATEGORY_SECONDARY == 0) {
            builder.setPopUpTo(
                R.id.navigation_home,
                false
            )
        }
        val options = builder.build()
        return try {
            navController.navigate(item.itemId, null, options)
            true
        } catch (e: IllegalArgumentException) {
            false
        }
    }
}

I got this solution form onNavDestinationSelected the extension function of NavigationUI

Finally , you can add custom Transition to your top Level destination to options

val builder = NavOptions.Builder()
    .setLaunchSingleTop(true)
    .setEnterAnim(androidx.navigation.ui.R.anim.nav_default_enter_anim)
    .setExitAnim(androidx.navigation.ui.R.anim.nav_default_exit_anim)
    .setPopEnterAnim(androidx.navigation.ui.R.anim.nav_default_pop_enter_anim)
    .setPopExitAnim(androidx.navigation.ui.R.anim.nav_default_pop_exit_anim)

Check out the project here.

If you have any questions, suggestions, objections then leave a comment.