Bottom Navigation in Jetpack Compose Android

src: https://learn.vonage.com/blog/2021/06/15/a-better-way-of-creating-android-views-with-jetpackcompose/

Hi Devs, in this article i am going to show you how you can design bottom navigation bar in jetpack compose using navigation component(nav controller and nav host).

For this article I have designed bottom navigation bar just like LinkedIn. In jetpack compose you don’t need to define your navigation under navigation directory and create its navigation graph. Navigation in jetpack compose is different from xml navigation where we need to define the fragments and graph. Add below dependency in your app level gradle file and rebuild your app.

implementation "androidx.navigation:navigation-compose:2.4.0-beta02"

After rebuilding your app create a separate directory for bottom navigation related files. Now create sealed class with name BottomNavItem with bottom navigation item title, item icon and item route which we will use later for navigation between screens just like below:

In jetpack compose navigation we are not using fragments so you need to define the screen content, so create a new file with name BottomNavContentScreens.kt and add the below code in it:

I have added only single text with route name so that you can see the navigation in action.

Now we need to create BottomNavActivity and copy below composable function for handling navigation graph:

Now you need to create new function to define bottom navigation, its item, handling bottom navigation backstack and defining start destination.

Now you need to create new composable function with Scaffold() so that you can define bottom navigation bar location, see blow:

@Composable
fun MainScreenView(){
    val navController = rememberNavController()
    Scaffold(
        bottomBar = { BottomNavigation(navController = navController) }
    ) {

        NavigationGraph(navController = navController)
    }
}

Thats it now at last just call the MainScreenView() function from oncreate method of your activity:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MainScreenView()
    }
}

Finally the output:

You can check this repository for bottom navigation source code:

GitHub - DaaniDev/jetpack_compose_animations