Jetpack Compose Bottom Navigation Bar – Android Coding by DMTechnolab

Hi Coders, in this post, we will learn to create Jetpack Compose Bottom Navigation Bar, Declarative UI design is a hot topic nowadays. And the android team also came up with Jetpack Compose, which will help us accelerate UI development.

I’ve created a complete Jetpack Compose Crash Course from scratch that you should check out. But today’s topic is Jetpack Compose Bottom Navigation Bar, and for this, I assume you already have some idea about Jetpack Compose.

Jetpack Compose Bottom Navigation Bar

We use a Bottom navigation bar to navigate between different application screens. And that is why we need to use Jetpack Compose Navigation as well.

Now create a new project using the Empty Compose Application template and add the following dependency.

implementation "androidx.navigation:navigation-compose:2.4.1"

Defining Navigation Routes

Create a Kotlin file named


and add the following code.

const val NAV_HOME = "home"
const val NAV_FAV = "fav"
const val NAV_FEED = "feed"
const val NAV_PROFILE = "profile"

I’ve planned to display four options at our Bottom Navigation. And that is why I’ve defined four navigation routes here that we will use while building our



Defining Navigation Items

Now for each route, we will define a navigation item. We can use a sealed class for this, as you can see below.

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import net.simplifiedcoding.compose_bottomnav.R

sealed class NavItem(
    @StringRes val title: Int,
    @DrawableRes val icon: Int,
    val navRoute: String
) {
    object Home : NavItem(R.string.home, R.drawable.ic_home, NAV_HOME)
    object Fav : NavItem(R.string.fav, R.drawable.ic_fav, NAV_FAV)
    object Feed : NavItem(R.string.feed, R.drawable.ic_feed, NAV_FEED)
    object Profile : NavItem(R.string.feed, R.drawable.ic_profile, NAV_PROFILE)

Each item contains a title, icon, and route.

Defining Bottom Navigation

To create a Bottom Navigation in Jetpack Compose, we have a composable function called


, We will use this function only. To create a new file and define a new composable function as shown below.

fun AppBottomNavigation(navController: NavController) {

    val navItems = listOf(NavItem.Home, NavItem.Fav, NavItem.Feed, NavItem.Profile)

        backgroundColor = colorResource(id = R.color.teal_700),
    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route

        navItems.forEach { item ->
                icon = { Icon(painterResource(id = item.icon), contentDescription = stringResource(item.title))},
                label = { Text(text = stringResource(item.title), fontSize = 9.sp) },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White.copy(0.4f),
                alwaysShowLabel = true,
                selected = currentRoute == item.navRoute,
                onClick = {
                    navController.navigate(item.navRoute) {
                        navController.graph.startDestinationRoute?.let { screen_route ->
                            popUpTo(screen_route) {
                                saveState = true
                        launchSingleTop = true
                        restoreState = true

  • As you can see, we first defined a

    that contains each


    that we specified.

  • After this, we used the function

    to define the BottomNav.

  • Inside BottomNav, we are using

    for each


    and it will create our Navigation Option inside BottomNav.

  • Finally, inside

    we are navigating to the selected


    ‘s route.

Using Material Scaffold to Display Bottom Navigation

  • Finally, write the following code inside your


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        setContent {

fun MainScreen() {
    val navController = rememberNavController()
        bottomBar = { AppBottomNavigation(navController = navController) },
        drawerContent = { Text(text = "Drawer") }
    ) {
        NavHost(navController = navController, startDestination = NAV_HOME) {
            composable(NAV_HOME) { AppScreen(text = "Home Screen") }
            composable(NAV_FAV) { AppScreen(text = "Favourite Screen") }
            composable(NAV_FEED) { AppScreen(text = "Feed Screen") }
            composable(NAV_PROFILE) { AppScreen(text = "Profile Screen") }

fun AppScreen(text: String) = Surface(modifier = Modifier.fillMaxSize()) {
    Text(text = text, fontSize = 32.sp)

fun DefaultPreview(){

  • The important thing here is the

    and it is another composable function from


    package. We can use it to create material UI quickly. The Bottom bar is part of the material UI, so inside


    , we can pass BottomNavigation. We can also give Navigation Drawer to the Scaffold, but I will leave it for some other post.

Jetpack Compose Bottom Navigation Bar Code

If you have any trouble building this project, you can download the source code from this link.

So that is all for this post. I hope you enjoyed it and learned something. If you think this post was helpful, please share it with your friends. Thank You

Source link

About dmtechnolab

Check Also

Simplified Coding

Android Espresso Tutorial – Testing Fragment in Isolation – Android Coding by DMTechnolab

Welcome to another tutorial in the Android test series. And this post is called Android …

Leave a Reply

Your email address will not be published. Required fields are marked *