Bottom Navigation bar in the jetpack compose using material3

Design composable UIs

Bottom Navigation Bar Jetpack compose

Material Design 3 (MD3), commonly referred to as Material You, is Google’s newest design system for Android apps, launched with Android 12. It emphasizes user-centered design, offering personalization and customization options to create accessible, one-of-a-kind interfaces tailored to individual preferences.

So Today we are building Bottom Navigation Bar using material3

Prerequisites

1. Understanding the basics of the Kotlin programming language knowledge of core concepts in Kotlin development
2. Proficiency in Jetpack Compose essentials familiarity with the foundational principles of Jetpack Compose

Step 1. Configure your lib.versions.toml file

[libraries]

androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
androidx-navigation= { group = "androidx.navigation",name = "navigation-compose" }

Step 2. Add Tabs Screen
Currently, I have added simply Text To display Screens.

@Composable
fun Home(){
    Column(
        modifier = Modifier.fillMaxSize()
            .wrapContentSize(Alignment.Center)
    ) {
        Text(text = "Home",
            fontSize = 18.sp,
            color = Color.Gray,
            fontWeight = androidx.compose.ui.text.font.FontWeight.Bold,
            textAlign = androidx.compose.ui.text.style.TextAlign.Center
        )
    }
}

@Composable
fun Categories(){
    Column(
        modifier = Modifier.fillMaxSize()
            .wrapContentSize(Alignment.Center)
    ) {
        Text(text = "Categories",
            fontSize = 18.sp,
            color = androidx.compose.ui.graphics.Color.Gray,
            fontWeight = androidx.compose.ui.text.font.FontWeight.Bold,
            textAlign = androidx.compose.ui.text.style.TextAlign.Center
        )
    }
}

@Composable
fun Order(){
    Column(
        modifier = Modifier.fillMaxSize()
            .wrapContentSize(Alignment.Center)
    ) {
        Text(text = "Order",
            fontSize = 18.sp,
            color = androidx.compose.ui.graphics.Color.Gray,
            fontWeight = androidx.compose.ui.text.font.FontWeight.Bold,
            textAlign = androidx.compose.ui.text.style.TextAlign.Center
        )
    }
}

Step 3. Define Bottom Navigation Screens
We have created sealed class to define our bottom nav screens, it includes route, icon, and title corresponding to each screen.

sealed class Destination(val route: String, val icon: Int, val title: String) {


    data object  Home : Destination(
        route = "home",
        icon = R.drawable.ic_home,
        title = "Home"
    )

    data object Categories : Destination(
        route = "categories",
        icon = R.drawable.ic_category,
        title = "Categories"
    )

    data object Order : Destination(
        route = "order",
        icon = R.drawable.ic_shopping,
        title = "Order"
    )

    companion object{
      val toList = listOf(Home, Categories, Order)
    }
}

Step 4. Add Navigation Screens

Nav Host Controler is a container, with the help of this we can switch between composable screens based on the route.

@Composable
fun AppNavigation(navController: NavHostController) {
    NavHost(navController, startDestination = Destination.Home.route) {
        composable(Destination.Home.route) {
            Home()
        }
        composable(Destination.Order.route) {
            Order()
        }
        composable(Destination.Categories.route) {
            Categories()
        }
    }
}

Step 4. Create Bottom Navigation Bar

We have NavigationBar and NavigationBarItem composable functions which are part of material3 lib.

Here we can handle the customization UI and stack handling of the Bottom bar.

@Composable
fun BottomNavigationBar(navController: NavController, appItems: List<Destination>) {
    NavigationBar(
        containerColor = colorResource(id = R.color.white),
    ){
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        appItems.forEach { item ->
            NavigationBarItem(
                icon = {
                    Icon(
                        painter = painterResource(id = item.icon),
                        contentDescription = item.title
                    )
                },
                colors = NavigationBarItemColors(
                    selectedIconColor = colorResource(id = R.color.white),
                    unselectedIconColor = colorResource(id = R.color.black),
                    selectedTextColor = colorResource(id = R.color.purple_700),
                    unselectedTextColor = colorResource(id = R.color.black),
                    selectedIndicatorColor = colorResource(id = R.color.purple_700),
                    disabledIconColor = colorResource(id = R.color.black),
                    disabledTextColor = colorResource(id = R.color.black)
                ),
                alwaysShowLabel = true,
                label = { Text(text = item.title) },
                selected = currentRoute == item.route,
                onClick = {
                    navController.navigate(item.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) {
                                saveState = true
                            }
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

Step 5. Add Bottom Navigation Bar and AppNavigation To Scaffold

@Composable
fun AppScreen(modifier: Modifier) {
    val navController = rememberNavController()
    Scaffold(
        bottomBar = { BottomNavigationBar(navController = navController, appItems = Destination.toList) },
        content = { padding ->
            Box(modifier = Modifier.padding(padding)) {
                AppNavigation(navController = navController)
            }
        }
    )
}

Step 6. Final Step

Add App Scrren into MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeBottomNavigationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    AppScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

Yeah… it’s done! Just like that. Thanks for reading it.

GitHub link : https://github.com/kamydeep00178/BottomNavigationBarCompose

Want To Connect?

Reach me out on LinkedIn.

https://www.linkedin.com/in/kamal-kakkar-13ab2773/?originalSubdomain=in me out on LinkedIn.