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.
Table of Contents
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.
|
1 2 3 |
implementation "androidx.navigation:navigation-compose:2.4.1" |
Create a Kotlin file named Routes.kt and add the following code.
|
1 2 3 4 5 6 |
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 NavHost.
Now for each route, we will define a navigation item. We can use a sealed class for this, as you can see below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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.
To create a Bottom Navigation in Jetpack Compose, we have a composable function called BottomNavigation. We will use this function only. To create a new file and define a new composable function as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@Composable fun AppBottomNavigation(navController: NavController) { val navItems = listOf(NavItem.Home, NavItem.Fav, NavItem.Feed, NavItem.Profile) BottomNavigation( backgroundColor = colorResource(id = R.color.teal_700), ) { val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route navItems.forEach { item -> BottomNavigationItem( 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 listOf<NavItem>()Â that contains each NavItem that we specified.
- After this, we used the function BottomNavigation to define the BottomNav.
- Inside BottomNav, we are using BottomNavigationItem for each NavItem, and it will create our Navigation Option inside BottomNav.
- Finally, inside onClick we are navigating to the selected NavItem’s route.
- Finally, write the following code inside your MainActivity.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainScreen() } } } @Composable fun MainScreen() { val navController = rememberNavController() Scaffold( 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") } } } } @Composable fun AppScreen(text: String) = Surface(modifier = Modifier.fillMaxSize()) { Text(text = text, fontSize = 32.sp) } @Preview @Composable fun DefaultPreview(){ MainScreen() } |
- The important thing here is the Scaffold, and it is another composable function from androidx.compose.material package. We can use it to create material UI quickly. The Bottom bar is part of the material UI, so inside Scaffold, we can pass BottomNavigation. We can also give Navigation Drawer to the Scaffold, but I will leave it for some other post.
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 🙂
