Enhance Navigation with Android Jetpack Compose Material-3 BottomBar

Are you ready to revolutionize your Android app’s navigation experience? The Android Jetpack Compose Material-3 BottomBar offers a powerful way to create a seamless and delightful user journey. In this guide, we’ll walk you through implementing the BottomBar, from setting up dependencies to creating screens and enabling smooth navigation. Let’s dive in and create an app that users will love to navigate!

Dependencies: Setting the Foundation

Before we embark on our navigation journey, ensure your project is equipped with the necessary dependencies. Open your project’s build.gradle file and add the following dependencies:

dependencies {
    implementation "androidx.core:core-ktx:1.10.1"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"
    implementation "androidx.activity:activity-compose:1.7.2"
    implementation platform("androidx.compose:compose-bom:2023.03.00")
    implementation "androidx.compose.ui:ui"
    implementation "androidx.compose.ui:ui-graphics"
    implementation "androidx.compose.ui:ui-tooling-preview"
    implementation "androidx.compose.material3:material3"
    
    //Navigation
    implementation "androidx.navigation:navigation-compose:2.7.0"
}

Defining Routes:

To guide users through different sections of your app, you need well-defined routes. Start by defining the routes for your app screens. Create a Routes.kt file and create a route mapping using a sealed class:

sealed class Routes(val route: String) {
    object Home : Routes("Home")
    object History : Routes("History")
    object Profile : Routes("Profile")
}

Creating Screens:

Next, let’s create the individual screens using Jetpack Compose. In a Screens.kt file, define the following composable functions:

@Composable
fun HomeScreen(navController: NavHostController) {
    CenterText(text = "Home Screen")
}

@Composable
fun HistoryScreen(navController: NavHostController) {
    CenterText(text = "History Screen")
}

@Composable
fun ProfileScreen(navController: NavHostController) {
    CenterText(text = "Profile Screen")
}

@Composable
fun CenterText(text: String) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = text, fontSize = 22.sp)
    }
}

Navigating Between Screens:

Now, let’s make sure users can smoothly navigate between screens using Jetpack Compose Navigation. In the Navigations.kt file, define the navigation logic:

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

        composable(Routes.History.route) {
            HistoryScreen(navController = navController)
        }

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

Implementing BottomBar

Time to put it all together! In the BottomBarDemoActivity class, you'll create the main screen featuring the BottomBar:

class BottomBarDemoActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeDemoM3Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainScreen()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
           Column {
                Divider()
                BottomAppBar(
                    containerColor = MaterialTheme.colorScheme.background,
                    contentPadding = PaddingValues(5.dp),
                    actions = {
                        IconButton(onClick = { navController.navigate(Routes.Home.route) }) {
                            Icon(
                                Icons.Filled.Home,
                                contentDescription = "Home",
                                tint = Color.DarkGray,
                            )
                        }
                        IconButton(onClick = { navController.navigate(Routes.History.route) }) {
                            Icon(
                                Icons.Filled.Info,
                                contentDescription = "History",
                                tint = Color.DarkGray,
                            )
                        }
                        IconButton(onClick = { navController.navigate(Routes.Profile.route) }) {
                            Icon(
                                Icons.Filled.Person,
                                contentDescription = "Profile",
                                tint = Color.DarkGray,
                            )
                        }
                    },
                    floatingActionButton = {
                        FloatingActionButton(
                            onClick = { },
                            containerColor = MaterialTheme.colorScheme.primary,
                            elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
                            shape = RoundedCornerShape(18.dp)
                        ) {
                            Icon(Icons.Filled.Add, "", tint = Color.White)
                        }
                    }
                )
            }
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier.padding(
                PaddingValues(
                    0.dp,
                    0.dp,
                    0.dp,
                    innerPadding.calculateBottomPadding()
                )
            )
        ) {
            Navigations(navController = navController)
        }
    }
}

Inside the MainScreen() composable, the Scaffold component encapsulates the user experience. By implementing the BottomBar, you create a consistent and user-friendly navigation experience. The BottomBar provides clear icons and buttons for users to effortlessly switch between sections of your app.

Conclusion: Navigational Excellence Achieved!

By integrating the Android Jetpack Compose Material-3 BottomBar into your app, you’ve successfully elevated your navigation game. With organized routes, engaging screens, and a seamless BottomBar, your app will become a joy to explore for users. So why wait? Start implementing these steps to provide an exceptional navigation experience that users will appreciate and love!

Stay Updated with the Latest Posts: Don’t Miss Out!

If you found this post helpful, show your support by giving multiple claps 👏

Thank you for your support and appreciation! 😊🙏