Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Bottom Navigation Bar in Android Jetpack Compose

  • Last Updated : 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. 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

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:



BottonNavigationView

Prerequisites:

Step by Step Implementation

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




@Composable
fun 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




@Composable
fun 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




@Composable
fun 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




@Composable
fun 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




@Composable
fun 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :