Implementing Bottom Navigation with Jetpack Compose and Material 3

Creating a bottom navigation bar is a common requirement in modern Android applications. Jetpack Compose, the declarative UI toolkit from Google, simplifies this process significantly. In this article, we’ll explore how to implement a bottom navigation bar using Material 3 components in Jetpack Compose. Overview of Bottom Navigation Bottom navigation bars are an essential part of mobile app navigation. They provide a quick way for users to switch between primary destinations in your app. With the introduction of Material 3, the styling and functionality of bottom navigation have been enhanced, making it easier to implement and more visually appealing. Setting Up Your Compose Project Before you get started with the bottom navigation implementation, ensure your Jetpack Compose project is set up correctly. If you haven't set up a Compose project yet, you can do so by creating a new project in Android Studio with Jetpack Compose support. 1. Add Dependencies: Open your build.gradle file and make sure to include the necessary Compose and Material 3 dependencies. Here’s an example: groovy dependencies { implementation "androidx.compose.ui:ui:1.0.5" implementation "androidx.compose.material3:material3:1.0.0-alpha02" implementation "androidx.navigation:navigation-compose:2.4.0-beta01" } 2. Sync the Project: After adding the dependencies, sync your project to ensure everything is up to date. Creating the Bottom Navigation Bar Now that your project is set up, let’s create the bottom navigation bar. We will use the NavigationBar component from Material 3 to achieve this. Step 1: Define Navigation Destinations First, define the screens or destinations that will be accessible through the bottom navigation bar. This can be done using a sealed class to represent each screen. kotlin sealed class Screen(val route: String) { object Home : Screen("home") object Profile : Screen("profile") object Settings : Screen("settings") } Step 2: Setting Up the Bottom Navigation Next, implement the BottomNavigation component in your main composable function. Here’s how you can structure it: kotlin @Composable fun MainScreen() { val navController = rememberNavController() Scaffold( bottomBar = { BottomNavigationBar(navController) } ) { innerPadding - NavHost(navController, startDestination = Screen.Home.route, Modifier.padding(innerPadding)) { composable(Screen.Home.route) { HomeScreen() } composable(Screen.Profile.route) { ProfileScreen() } composable(Screen.Settings.route) { SettingsScreen() } } } } Step 3: Implementing the BottomNavigationBar In the BottomNavigationBar composable, you can define the navigation items and handle the navigation actions: kotlin @Composable fun BottomNavigationBar(navController: NavController) { val navBackStackEntry = navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry.value?.destination?.route NavigationBar { val items = listOf(Screen.Home, Screen.Profile, Screen.Settings) items.forEach { screen - NavigationBarItem( icon = { Icon(Icons.Filled.Home, contentDescription = null) }, label = { Text(screen.route.capitalize()) }, selected = currentRoute == screen.route, onClick = { navController.navigate(screen.route) { // Avoid multiple copies of the same destination popUpTo(navController.graph.startDestinationId) { saveState = true } launchSingleTop = true restoreState = true } } ) } } } In this code, we create a NavigationBar that contains multiple NavigationBarItem components for each screen. We check if the item is currently selected and navigate to the corresponding route when the item is clicked. Creating Individual Screens To complete the setup, you will need to create composable functions for each screen referenced in your navigation: kotlin @Composable fun HomeScreen() { // Your Home Screen UI here } @Composable fun ProfileScreen() { // Your Profile Screen UI here } @Composable fun SettingsScreen() { // Your Settings Screen UI here } Each of these composable functions can contain the UI elements specific to that screen. Conclusion Implementing a bottom navigation bar in Jetpack Compose using Material 3 is straightforward and enhances the user experience by providing easy access to different sections of your app. By following the steps outlined in this article, you can create a functional and visually appealing bottom navigation system in your Android applications. For a more detailed walkthrough, you can watch the tutorial on YouTube(https://www.youtube.com/watch?v=RVxFJc5oBnc). This video provides additional insights and a visual demonstration of the concepts discussed here.