How to make custom bottom navigation bar in jetpack compose

In this blog, we will explore How to make custom bottom navigation bar with notification badges in jetpack compose android step by step 2025.

How to make Custom Bottom Navigation Bar with notification badges in Jetpack Compose Android Step by Step

Step 1 : Create BottomNavItem data class file for store Bottom Navigation Item data.

import androidx.compose.ui.graphics.vector.ImageVector

data class BottomNavItem(
    val icon: ImageVector,
    val label: String,
    val route: String,
    val badgeCount: Int,
    val isNotification: Boolean
)

Step 2 : Create a BottomNavigationRoute.kt file for implement all bottom navigation design and functionality.

@Composable
fun BottomNavigationRoute() {
    BottomNavigationUI()
}

Step 3 : Create a BottomNavigationUI() function in BottomNavigationRoute.kt file for implement all bottom navigation design and functionality.

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun BottomNavigationUI() {
    val navController = rememberNavController()

    val navItems = listOf(
        BottomNavItem(
            icon = Icons.Default.Home,
            label = "Home",
            route = Routes.Home.route,
            badgeCount = 0,
            isNotification = false
        ),

        BottomNavItem(
            icon = Icons.Default.Search,
            label = "Search",
            route = Routes.Search.route,
            badgeCount = 12,
            isNotification = false
        ),

        BottomNavItem(
            icon = Icons.Default.Face,
            label = "Profile",
            route = Routes.Profile.route,
            badgeCount = 0,
            isNotification = false
        ),

        BottomNavItem(
            icon = Icons.Default.Settings,
            label = "Settings",
            route = Routes.Settings.route,
            badgeCount = 0,
            isNotification = true
        )
    )

    Scaffold(
        bottomBar = {
            NavigationBarUI(
                navController, navItems
            )
        }) {
        MainNavigation(navHostController = navController)
    }
}

Step 4 : Create a NavigationBarUI() function in BottomNavigationRoute.kt file for create and customize of bottom navigation item design and logic.

@Composable
fun NavigationBarUI(
    navController: NavController, navItems: List<BottomNavItem>
) {
    var currentScreen by remember { mutableStateOf(navItems[0].route) }

    NavigationBar(
        containerColor = Color.Transparent,
        contentColor = Color.White,
        tonalElevation = 5.dp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .background(
                color = Color.Black,
                shape = RoundedCornerShape(40.dp)
            )
    ) {
        navItems.forEach { bottomNavItem ->
            NavigationBarItem(
                selected = currentScreen == bottomNavItem.route,
                onClick = {
                    currentScreen = bottomNavItem.route
                    navController.toBottomNavigation(bottomNavItem.route)
                },
                label = {
                    Text(text = bottomNavItem.label)
                },
                alwaysShowLabel = false,
                icon = {
                    BadgedBox(
                        badge = {
                            if (bottomNavItem.badgeCount > 0) {
                                Badge {
                                    Text(text = bottomNavItem.badgeCount.toString())
                                }
                            } else if (bottomNavItem.isNotification) {
                                Badge()
                            }
                        }
                    ) {
                        Icon(
                            imageVector = bottomNavItem.icon,
                            contentDescription = "Image"
                        )
                    }
                },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = Color.White,
                    selectedTextColor = Color.White,
                    unselectedIconColor = Color.White.copy(alpha = 0.4f),
                    unselectedTextColor = Color.White.copy(alpha = 0.4f),
                    indicatorColor = Color.Transparent
                )
            )
        }
    }
}

Step 5 : Final code of BottomNavigationRoute.kt file

package com.example.myjetpackcomposeapp.bottomNavigation

import android.annotation.SuppressLint
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Face
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Badge
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.example.myjetpackcomposeapp.nav.MainNavigation
import com.example.myjetpackcomposeapp.nav.Routes
import com.example.myjetpackcomposeapp.nav.Routes.MainBottomRoute.toBottomNavigation

@Composable
fun BottomNavigationRoute() {
    BottomNavigationUI()
}

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun BottomNavigationUI() {
    val navController = rememberNavController()

    val navItems = listOf(
        BottomNavItem(
            icon = Icons.Default.Home,
            label = "Home",
            route = Routes.Home.route,
            badgeCount = 0,
            isNotification = false
        ),

        BottomNavItem(
            icon = Icons.Default.Search,
            label = "Search",
            route = Routes.Search.route,
            badgeCount = 12,
            isNotification = false
        ),

        BottomNavItem(
            icon = Icons.Default.Face,
            label = "Profile",
            route = Routes.Profile.route,
            badgeCount = 0,
            isNotification = false
        ),

        BottomNavItem(
            icon = Icons.Default.Settings,
            label = "Settings",
            route = Routes.Settings.route,
            badgeCount = 0,
            isNotification = true
        )
    )

    Scaffold(
        bottomBar = {
            NavigationBarUI(
                navController, navItems
            )
        }) {
        MainNavigation(navHostController = navController)
    }
}

@Composable
fun NavigationBarUI(
    navController: NavController, navItems: List<BottomNavItem>
) {
    var currentScreen by remember { mutableStateOf(navItems[0].route) }

    NavigationBar(
        containerColor = Color.Transparent,
        contentColor = Color.White,
        tonalElevation = 5.dp,
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .background(
                color = Color.Black,
                shape = RoundedCornerShape(40.dp)
            )
    ) {
        navItems.forEach { bottomNavItem ->
            NavigationBarItem(
                selected = currentScreen == bottomNavItem.route,
                onClick = {
                    currentScreen = bottomNavItem.route
                    navController.toBottomNavigation(bottomNavItem.route)
                },
                label = {
                    Text(text = bottomNavItem.label)
                },
                alwaysShowLabel = false,
                icon = {
                    BadgedBox(
                        badge = {
                            if (bottomNavItem.badgeCount > 0) {
                                Badge {
                                    Text(text = bottomNavItem.badgeCount.toString())
                                }
                            } else if (bottomNavItem.isNotification) {
                                Badge()
                            }
                        }
                    ) {
                        Icon(
                            imageVector = bottomNavItem.icon,
                            contentDescription = "Image"
                        )
                    }
                },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = Color.White,
                    selectedTextColor = Color.White,
                    unselectedIconColor = Color.White.copy(alpha = 0.4f),
                    unselectedTextColor = Color.White.copy(alpha = 0.4f),
                    indicatorColor = Color.Transparent
                )
            )
        }
    }
}

Step 6 : Create a Four file for Bottom Navigation Screen : HomeScreen.kt, SearchScreen.kt, ProfileScreen.kt, SettingsScreen.kt you can create according to your need.

-> For HomeScreen:

package com.example.myjetpackcomposeapp.bottomNavigation

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight

@Composable
fun HomeScreen() {
    Box(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Red.copy(alpha = 0.2f))
    ) {
        Text(
            text = "Home Screen",
            style = TextStyle(fontWeight = FontWeight.Bold, color = Color.Black),
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

-> For SearchScreen:

package com.example.myjetpackcomposeapp.bottomNavigation

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight

@Composable
fun SearchScreen() {
    Box(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Red.copy(alpha = 0.2f))
    ) {
        Text(
            text = "Search Screen",
            style = TextStyle(fontWeight = FontWeight.Bold, color = Color.Black),
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

-> For ProfileScreen:

package com.example.myjetpackcomposeapp.bottomNavigation

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight

@Composable
fun ProfileScreen() {
    Box(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Red.copy(alpha = 0.2f))
    ) {
        Text(
            text = "Profile Screen",
            style = TextStyle(fontWeight = FontWeight.Bold, color = Color.Black),
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

-> For SettingsScreen:

package com.example.myjetpackcomposeapp.bottomNavigation

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight

@Composable
fun SettingsScreen() {
    Box(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Red.copy(alpha = 0.2f))
    ) {
        Text(
            text = "Settings Screen",
            style = TextStyle(fontWeight = FontWeight.Bold, color = Color.Black),
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

Step 7 : Create Routes.kt file for initializing all bottom navigation routes

import androidx.navigation.NavController

sealed class Routes(val route: String) {
    //for bottom navigation routes
    data object Home : Routes("home")
    data object Search : Routes("search")
    data object Profile : Routes("profile")
    data object Settings : Routes("settings")

    //for navigate to particular bottom navigation
    data object MainBottomRoute : Routes("main") {
        fun NavController.toBottomNavigation(route: String) = navigate(route) {
            popUpTo(graph.id) { inclusive = true }
        }
    }
}

Step 8 : Create MainNavigation.kt file for calling all bottom navigation screens.

package com.example.myjetpackcomposeapp.nav

import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import com.example.myjetpackcomposeapp.bottomNavigation.*


@Composable
fun MainNavigation(navHostController: NavHostController) {
    NavHost(
        navController = navHostController,
        startDestination = Routes.Home.route
    ) {
        composable(Routes.Home.route) {
            HomeScreen()
        }

        composable(Routes.Search.route) {
            SearchScreen()
        }

        composable(Routes.Profile.route) {
            ProfileScreen()
        }

        composable(Routes.Settings.route) {
            SettingsScreen()
        }
    }
}

Step 9 : Call BottomNavigationRoute.kt file in MainActivity.kt file.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.myjetpackcomposeapp.bottomNavigation.BottomNavigationRoute
import com.example.myjetpackcomposeapp.ui.theme.MyJetpackComposeAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyJetpackComposeAppTheme {
                BottomNavigationRoute()
            }
        }
    }
}

Reference

here are the reference blog of how to make custom bottom navigation bar with notification badges in jetpack compose android step by step you can easily watch and use in your android studio.

Read More: How to favorite items using room in jetpack compose android

Reference Video

-> here are the reference video of how to make custom bottom navigation bar with notification badges in jetpack compose android

Conclusion

In this post i have shown you how to make custom bottom navigation bar with notification badges in jetpack compose android step by step 2025. you can easily use this code and modify according to your use.

Here are the final output of this post: