Make an Awesome Bottom Navigation using Jetpack Compose

Easily make bottom navigation in compose and Jetpack Navigation Library

Photo by Mika Baumeister on Unsplash

Getting the required libraries

Start Composing

Step 1: Define MainActivity

If you have a web development background The AppMainNavigation() function is like router to all the screens in your pokemon viewer app.

Step 2: Define your Screens(Routes)

These screens are actually objects that defines the meta data for each screen.

Step 3: Build a NavGraph using the Screens(Routes)

val navController = rememberNavController()
composable(IconScreens.Home.route) {
HomeScreen(navController)
}

Step4: Define your Application Skeleton using Scaffold

val bottomNavigationItems = listOf(
IconScreens.Home,
IconScreens.Explore,
IconScreens.Subscription,
IconScreens.Library
)
Scaffold(
topBar = {},
bottomBar ={BottomAppNavBar(navController,bottomNavigationItems)},
content = { screen() }
)

Step 5: Define your bottom Navbar Composable

navController.currentBackStackEntryAsState()
navBackStackEntry?.arguments?.getString(KEY_ROUTE)
BottomNavigationItem(                
icon = {Icon(imageVector = screen.icon, contentDescription = null)}, selected = currentRoute == screen.route,
onClick = {
navController.navigate(screen.route) {
popUpTo = navController.graph.startDestination
launchSingleTop = true
}
})
onClick = {                    
navController.navigate(screen.route) {
popUpTo = navController.graph.startDestination
launchSingleTop = true
}

Step 6: Define Screens to show after Clicking bottom navbar Icons (Fragments in XML terms)

I am a Tech Trend Hunter with a passion for Web Development and writing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store