Bottom Navigation Bar in Android Jetpack Compose - GeeksforGeeks

08 Sep, 2021
We all have seen BottomNavigationBar in so many apps, such as Instagram, Quora. In this article, we will learn how to add bottom navigation in Jetpack Compose. Below is a sample of how it will look. 
Why do we need a Bottom Navigation Bar?
It allows the user to switch to different activities/fragments easily.
It makes the user aware of the different screens available in the app.
The user is able to check which screen are they on at the moment.
The following is an anatomy diagram for the Bottom Navigation Bar:
Prerequisites:
Knowledge of Jetpack Compose.
Knowledge of Scaffold in Jetpack compose.
Knowledge of Compose Navigation.
Step 1: Create a New Project (Or use it in the existing Compose project)
To create a new project in the Android Studio Canary version. Refer to this article: How to Create a New Project in Android Studio Canary Version with Jetpack Compose?
Project structure
Step 2: Adding Dependencies
Open build.gradle(app) and add the following dependency.
    implementation  “androidx.navigation:navigation-compose:2.4.0-alpha07”
Step 3: Creating Screens
Open Screens.kt and create three screens, Home, Search, Profile.
HomeScreen:
Kotlin
@Composablefun HomeScreen() {      // Column Composable,    Column(        modifier = Modifier            .fillMaxSize()            .background(Color.White),        // Parameters set to place the items in center        horizontalAlignment = Alignment.CenterHorizontally,        verticalArrangement = Arrangement.Center    ) {        // Icon Composable        Icon(            imageVector = Icons.Default.Home,            contentDescription = "home",            tint = Color(0xFF0F9D58)        )        // Text to Display the current Screen        Text(text = "Home", color = Color.Black)    }}
SearchScreen:
Kotlin
@Composablefun SearchScreen() {    // Column Composable,    Column(        modifier = Modifier            .fillMaxSize()            .background(Color.White),        // parameters set to place the items in center        horizontalAlignment = Alignment.CenterHorizontally,        verticalArrangement = Arrangement.Center    ) {        // Icon Composable        Icon(            imageVector = Icons.Default.Search,            contentDescription = "search",            tint = Color(0xFF0F9D58)        )        // Text to Display the current Screen        Text(text = "Search", color = Color.Black)    }}
ProfileScreen:
Kotlin
@Composablefun ProfileScreen() {    // Column Composable,    Column(        modifier = Modifier            .fillMaxSize()            .background(Color.White),        // parameters set to place the items in center        horizontalAlignment = Alignment.CenterHorizontally,        verticalArrangement = Arrangement.Center    ) {        // Icon Composable        Icon(            imageVector = Icons.Default.Person,            contentDescription = "Profile",            tint = Color(0xFF0F9D58)        )        // Text to Display the current Screen        Text(text = "Profile", color = Color.Black)    }}
Step 4: Create Bottom nav items
Let’s create a data class to hold data related to bottom nav items like label, icon, route. Open models/BottomNavItem.kt and add the following code.
Kotlin
import androidx.compose.ui.graphics.vector.ImageVector  data class BottomNavItem(    val label: String,    val icon: ImageVector,    val route:String,)
And create some bottom nav items, open Utils/Constants.kt, and a list of three nav items.
Kotlin
object Constants {    val BottomNavItems = listOf(        BottomNavItem(            label = "Home",            icon = Icons.Filled.Home,            route = "home"        ),        BottomNavItem(            label = "Search",            icon = Icons.Filled.Search,            route = "search"        ),        BottomNavItem(            label = "Profile",            icon = Icons.Filled.Person,            route = "profile"        )    )}
Step 5: Working with the MainActivity and Navigation Components 
Create a function with the name NavHostContainer in MainActivity.kt which will contain NavHost and the Composable for navigation. Refer to the comments in the code for a better understanding
Kotlin
@Composablefun NavHostContainer(    navController: NavHostController,    padding: PaddingValues) {      NavHost(        navController = navController,                   // set the start destination as home        startDestination = "home",          // Set the padding provided by scaffold        modifier = Modifier.padding(paddingValues = padding),                  builder = {              // route : Home            composable("home") {                HomeScreen()            }              // route : search            composable("search") {                SearchScreen()            }              // route : profile            composable("profile") {                ProfileScreen()            }        })  }
Step 6: Adding Bottom Navigation
Refer to comments for better understanding.
Kotlin
@Composablefun BottomNavigationBar(navController: NavHostController) {      BottomNavigation(                // set background color        backgroundColor = Color(0xFF0F9D58)) {          // observe the backstack        val navBackStackEntry by navController.currentBackStackEntryAsState()          // observe current route to change the icon           // color,label color when navigated        val currentRoute = navBackStackEntry?.destination?.route          // Bottom nav items we declared        Constants.BottomNavItems.forEach { navItem ->              // Place the bottom nav items            BottomNavigationItem(                                    // it currentRoute is equal then its selected route                selected = currentRoute == navItem.route,                  // navigate on click                onClick = {                    navController.navigate(navItem.route)                },                                // Icon of navItem                icon = {                    Icon(imageVector = navItem.icon, contentDescription = navItem.label)                },                                // label                label = {                    Text(text = navItem.label)                },                alwaysShowLabel = false            )        }    }}
Step 7: Putting everything together in Scaffold
Now we need to put everything in the scaffold in setContent on MainActivity class
Kotlin
class MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            BottomNavigationTheme {                                // remember navController so it does not                  // get recreated on recomposition                val navController = rememberNavController()                  Surface(color = Color.White) {                    // Scaffold Component                    Scaffold(                        // Bottom navigation                        bottomBar = {                            BottomNavigationBar(navController = navController)                        }, content = { padding ->                            // Navhost: where screens are placed                            NavHostContainer(navController = navController, padding = padding)                        }                    )                }            }        }    }}
Output:
Project Link: Click Here
Android-Jetpack
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
GridView in Android with Example
Android Listview in Java with Example
How to Change the Background Color After Clicking the Button in Android?
Kotlin Array
Android UI Layouts
Retrofit with Kotlin Coroutine in Android
Android Menus
Kotlin Setters and Getters