
<p>This post is about how to add bottom navigation in Jetpack Compose using navigation compose.</p> 
 
 
 
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #1c0274;" href="https://github.com/arunk7839/JetpackComposeBottomNavigationExp"><strong>DOWNLOAD</strong> <strong>CODE</strong></a></div> 
</div> 
 
 
 
<h4> </h4> 
<h4><span style="color: #000080;"><strong>Creating New Project</strong></span></h4> 
<p>1 . Create a new project by going to <strong>File ⇒ New Android Project</strong>, select <strong>Empty Compose Activity</strong>, provide <strong>app</strong> name and then finally click on <strong>finish</strong>.</p> 
<p>2 . Open app-level build.gradle file and under the <strong>dependencies</strong> section add the below navigation-compose library and then <strong>sync</strong> the project<strong>:</strong></p> 
<p><span style="color: #0000ff;"><strong>build.gradle</strong></span></p> 
<pre>dependencies {<br /><strong><span style="color: #008000;"> //navigation with compose</span></strong><br /> implementation("androidx.navigation:navigation-compose:2.4.2")<br />}</pre> 
<p>Get the latest navigation-compose dependency from <strong><a href="https://developer.android.com/jetpack/compose/navigation#setup">here</a></strong>.</p> 
<p>3. Now create a sealed class with the name <span style="color: #008000;"><strong>NavigationItem</strong></span> with bottom navigation item title, item icon, and item route which we will use later for navigation between screens.</p> 
<p><span style="color: #0000ff;"><strong>NavigationItem.kt</strong></span></p> 
<pre>sealed class NavigationItem(var route: String, var icon: ImageVector, var title: String) {<br /> object Home : NavigationItem("home", Icons.Filled.Home, "Home")<br /> object Place : NavigationItem("place", Icons.Filled.Place, "Place")<br /> object Favorites : NavigationItem("favorites", Icons.Filled.Favorite, "Favorites")<br />}</pre> 
<p>4. Inside <span style="color: #008000;"><strong>MainActivity.kt</strong></span> file, create three composable functions <span style="color: #0000ff;"><strong>Home, Place, and Favorites </strong></span>which define the screen&#8217;s content<strong>.</strong></p> 
<pre>@Composable<br />fun Home() {<br /><br /> Box(<br /> modifier = Modifier.fillMaxSize()<br /> ) {<br /> Icon(<br /> imageVector = Icons.Filled.Home,<br /> contentDescription = "home",<br /> tint = Color.Blue,<br /> modifier = Modifier<br /> .size(150.dp)<br /> .align(Alignment.Center)<br /> )<br /> }<br />}<br /><br />@Composable<br />fun Place() {<br /><br /> Box(<br /> modifier = Modifier.fillMaxSize()<br /> ) {<br /> Icon(<br /> imageVector = Icons.Filled.Place,<br /> contentDescription = "contacts",<br /> tint = Color.Blue,<br /> modifier = Modifier<br /> .size(150.dp)<br /> .align(Alignment.Center)<br /> )<br /> }<br />}<br /><br />@Composable<br />fun Favorites() {<br /><br /> Box(<br /> modifier = Modifier.fillMaxSize()<br /> ) {<br /> Icon(<br /> imageVector = Icons.Filled.Favorite,<br /> contentDescription = "favorites",<br /> tint = Color.Blue,<br /> modifier = Modifier<br /> .size(150.dp)<br /> .align(Alignment.Center)<br /> )<br /> }<br />}</pre> 
<p>5. Create a composable function with the name <span style="color: #0000ff;"><strong>NavigationHost</strong></span> in MainActivity.kt which will contain NavHost and the Composable for navigation. </p> 
<pre>@Composable<br />fun NavigationHost(navController: NavHostController) {<br /> NavHost(<br /> navController = navController,<br /> startDestination = NavigationItem.Home.route<br /> ) {<br /> composable(NavigationItem.Home.route) {<br /> Home()<br /> }<br /> composable(NavigationItem.Place.route) {<br /> Place()<br /> }<br /> composable(NavigationItem.Favorites.route) {<br /> Favorites()<br /> }<br /> }<br />}</pre> 
<p>6. Create object <span style="color: #0000ff;"><strong>NavBarItems</strong></span>, and define a <strong><span style="color: #008000;">BarItems</span></strong> list that contains bottom navigation items.</p> 
<p><strong><span style="color: #0000ff;">NavBarItems.kt</span></strong></p> 
<pre>object NavBarItems {<br /> val BarItems = listOf(<br /> NavigationItem.Home,<br /> NavigationItem.Place,<br /> NavigationItem.Favorites,<br /> )<br />}</pre> 
<p>7. Create a new composable function <strong><span style="color: #0000ff;">BottomNavigationBar</span></strong> to define bottom navigation, its item, and handling bottom navigation backstack.</p> 
<pre>@Composable<br />fun BottomNavigationBar(navController: NavHostController) {<br /><br /> BottomNavigation {<br /><br /><strong><span style="color: #008000;"> //observe the backstack</span></strong><br /> val backStackEntry by navController.currentBackStackEntryAsState()<br /><span style="color: #008000;"><strong> //observe current route to change the item icon,label when navigated</strong></span><br /> val currentRoute = backStackEntry?.destination?.route<br /><br /> <strong><span style="color: #008000;"> //bottom nav items we declared</span></strong><br /> NavBarItems.BarItems.forEach { navItem ->;<br /><br /><strong><span style="color: #008000;"> //place the bottom nav items</span></strong><br /> BottomNavigationItem(<br /> selected = currentRoute == navItem.route,<br /> onClick = {<br /><strong><span style="color: #008000;"> //navigate on click</span></strong><br /> navController.navigate(navItem.route) {<br /> popUpTo(navController.graph.findStartDestination().id) {<br /> saveState = true<br /> }<br /> launchSingleTop = true<br /> restoreState = true<br /> }<br /> },<br /><br /><span style="color: #008000;"><strong> //icon of navItem</strong></span><br /> icon = {<br /> Icon(<br /> imageVector = navItem.icon,<br /> contentDescription = navItem.title<br /> )<br /> },<br /><span style="color: #008000;"><strong> //label</strong></span><br /> label = {<br /> Text(text = navItem.title)<br /> },<br /> )<br /> }<br /> }<br />}</pre> 
<p>8. Create a new composable function with <strong><span style="color: #008000;">Scaffold()</span></strong> so that you can define the topBar, bottom bar, and content.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
<pre>@Composable<br />fun MainScreen() {<br /> val navController = rememberNavController()<br /><br /> Scaffold(<br /> topBar = { TopAppBar(title = { Text("Bottom Navigation Demo") }) },<br /> content = { NavigationHost(navController = navController) },<br /> bottomBar = { BottomNavigationBar(navController = navController) }<br /> )<br /><br />}</pre> 
<p>9. At last just call the MainScreen() function from onCreate method of your activity:</p> 
<pre>override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContent {<br /> JetpackComposeBottomNavigationExpTheme {<br /><span style="color: #008000;"><strong> // A surface container using the 'background' color from the theme</strong></span><br /> Surface(<br /> modifier = Modifier.fillMaxSize(),<br /> color = MaterialTheme.colors.background<br /> ) {<br /> MainScreen()<br /> }<br /> }<br /> }<br />}</pre> 
<h4><span style="color: #000080;"><strong>Complete MainActivity Code:</strong></span></h4> 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p> 
<pre>package com.c1ctech.jetpackcomposebottomnavigationexp<br /><br />import android.os.Bundle<br />import androidx.activity.ComponentActivity<br />import androidx.activity.compose.setContent<br />import androidx.compose.foundation.layout.Box<br />import androidx.compose.foundation.layout.fillMaxSize<br />import androidx.compose.foundation.layout.size<br />import androidx.compose.material.*<br />import androidx.compose.material.icons.Icons<br />import androidx.compose.material.icons.filled.Favorite<br />import androidx.compose.ui.graphics.Color<br />import androidx.compose.material.icons.filled.Home<br />import androidx.compose.material.icons.filled.Place<br />import androidx.compose.runtime.Composable<br />import androidx.compose.runtime.getValue<br />import androidx.compose.ui.Alignment<br />import androidx.compose.ui.Modifier<br />import androidx.compose.ui.unit.dp<br />import androidx.navigation.NavGraph.Companion.findStartDestination<br />import androidx.navigation.NavHostController<br />import androidx.navigation.compose.NavHost<br />import androidx.navigation.compose.composable<br />import androidx.navigation.compose.currentBackStackEntryAsState<br />import androidx.navigation.compose.rememberNavController<br />import com.c1ctech.jetpackcomposebottomnavigationexp.ui.theme.JetpackComposeBottomNavigationExpTheme<br /><br />class MainActivity : ComponentActivity() {<br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContent {<br /> JetpackComposeBottomNavigationExpTheme {<br /><strong><span style="color: #008000;"> // A surface container using the 'background' color from the theme</span></strong><br /> Surface(<br /> modifier = Modifier.fillMaxSize(),<br /> color = MaterialTheme.colors.background<br /> ) {<br /> MainScreen()<br /> }<br /> }<br /> }<br /> }<br />}<br /><br />@Composable<br />fun MainScreen() {<br /> val navController = rememberNavController()<br /><br /> Scaffold(<br /> topBar = { TopAppBar(title = { Text("Bottom Navigation Demo") }) },<br /> content = { NavigationHost(navController = navController) },<br /> bottomBar = { BottomNavigationBar(navController = navController) }<br /> )<br /><br />}<br /><br />@Composable<br />fun NavigationHost(navController: NavHostController) {<br /> NavHost(<br /> navController = navController,<br /> startDestination = NavigationItem.Home.route<br /> ) {<br /> composable(NavigationItem.Home.route) {<br /> Home()<br /> }<br /> composable(NavigationItem.Place.route) {<br /> Place()<br /> }<br /> composable(NavigationItem.Favorites.route) {<br /> Favorites()<br /> }<br /> }<br />}<br /><br />@Composable<br />fun BottomNavigationBar(navController: NavHostController) {<br /><br /> BottomNavigation {<br /> val backStackEntry by navController.currentBackStackEntryAsState()<br /> val currentRoute = backStackEntry?.destination?.route<br /><br /> NavBarItems.BarItems.forEach { navItem ->;<br /><br /> BottomNavigationItem(<br /> selected = currentRoute == navItem.route,<br /> onClick = {<br /> navController.navigate(navItem.route) {<br /> popUpTo(navController.graph.findStartDestination().id) {<br /> saveState = true<br /> }<br /> launchSingleTop = true<br /> restoreState = true<br /> }<br /> },<br /><br /> icon = {<br /> Icon(<br /> imageVector = navItem.icon,<br /> contentDescription = navItem.title<br /> )<br /> },<br /> label = {<br /> Text(text = navItem.title)<br /> },<br /> )<br /> }<br /> }<br />}<br /><br />@Composable<br />fun Home() {<br /><br /> Box(<br /> modifier = Modifier.fillMaxSize()<br /> ) {<br /> Icon(<br /> imageVector = Icons.Filled.Home,<br /> contentDescription = "home",<br /> tint = Color.Blue,<br /> modifier = Modifier<br /> .size(150.dp)<br /> .align(Alignment.Center)<br /> )<br /> }<br />}<br /><br />@Composable<br />fun Place() {<br /><br /> Box(<br /> modifier = Modifier.fillMaxSize()<br /> ) {<br /> Icon(<br /> imageVector = Icons.Filled.Place,<br /> contentDescription = "contacts",<br /> tint = Color.Blue,<br /> modifier = Modifier<br /> .size(150.dp)<br /> .align(Alignment.Center)<br /> )<br /> }<br />}<br /><br />@Composable<br />fun Favorites() {<br /><br /> Box(<br /> modifier = Modifier.fillMaxSize()<br /> ) {<br /> Icon(<br /> imageVector = Icons.Filled.Favorite,<br /> contentDescription = "favorites",<br /> tint = Color.Blue,<br /> modifier = Modifier<br /> .size(150.dp)<br /> .align(Alignment.Center)<br /> )<br /> }<br />}</pre> 
<p>When you run the app it will look like this:</p> 
<p><img class="alignnone wp-image-3278" src="https://c1ctech.com/wp-content/uploads/2022/05/Screenshot_2022-05-30-21-08-51-620_com.c1ctech.jetpackcomposebottomnavigationexp1-473x1024.png" alt="" width="246" height="532" /> <img class="alignnone wp-image-3279" src="https://c1ctech.com/wp-content/uploads/2022/05/Screenshot_2022-05-30-21-08-56-541_com.c1ctech.jetpackcomposebottomnavigationexp1-473x1024.png" alt="" width="247" height="535" /> <img class="alignnone wp-image-3280" src="https://c1ctech.com/wp-content/uploads/2022/05/Screenshot_2022-05-30-21-09-05-193_com.c1ctech.jetpackcomposebottomnavigationexp1-473x1024.png" alt="" width="248" height="537" />