Bottom Navigation Bar in Android Jetpack Compose
We all have seen BottomNavigationBar in so many apps, such as Instagram, Quora. In this article, we will learn how to add bottom navigation in Jetpack Compose. Below is a sample of how it will look.
Why do we need a Bottom Navigation Bar?
- It allows the user to switch to different activities/fragments easily.
- It makes the user aware of the different screens available in the app.
- The user is able to check which screen are they on at the moment.
The following is an anatomy diagram for the Bottom Navigation Bar:
Prerequisites:
Step by Step Implementation
Step 1: Create a New Project (Or use it in the existing Compose project)
To create a new project in the Android Studio Canary version. Refer to this article: How to Create a New Project in Android Studio Canary Version with Jetpack Compose?
Project structure
Step 2: Adding Dependencies
Open build.gradle(app) and add the following dependency.
implementation “androidx.navigation:navigation-compose:2.4.0-alpha07”
Step 3: Creating Screens
Open Screens.kt and create three screens, Home, Search, Profile.
HomeScreen:
Kotlin
@Composable
fun HomeScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Icon(
imageVector = Icons.Default.Home,
contentDescription = "home" ,
tint = Color( 0xFF0F9D58 )
)
Text(text = "Home" , color = Color.Black)
}
}
|
SearchScreen:
Kotlin
@Composable
fun SearchScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Icon(
imageVector = Icons.Default.Search,
contentDescription = "search" ,
tint = Color( 0xFF0F9D58 )
)
Text(text = "Search" , color = Color.Black)
}
}
|
ProfileScreen:
Kotlin
@Composable
fun ProfileScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Icon(
imageVector = Icons.Default.Person,
contentDescription = "Profile" ,
tint = Color( 0xFF0F9D58 )
)
Text(text = "Profile" , color = Color.Black)
}
}
|
Step 4: Create Bottom nav items
Let’s create a data class to hold data related to bottom nav items like label, icon, route. Open models/BottomNavItem.kt and add the following code.
Kotlin
import androidx.compose.ui.graphics.vector.ImageVector
data class BottomNavItem(
val label: String,
val icon: ImageVector,
val route:String,
)
|
And create some bottom nav items, open Utils/Constants.kt, and a list of three nav items.
Kotlin
object Constants {
val BottomNavItems = listOf(
BottomNavItem(
label = "Home" ,
icon = Icons.Filled.Home,
route = "home"
),
BottomNavItem(
label = "Search" ,
icon = Icons.Filled.Search,
route = "search"
),
BottomNavItem(
label = "Profile" ,
icon = Icons.Filled.Person,
route = "profile"
)
)
}
|
Step 5: Working with the MainActivity and Navigation Components
Create a function with the name NavHostContainer in MainActivity.kt which will contain NavHost and the Composable for navigation. Refer to the comments in the code for a better understanding
Kotlin
@Composable
fun NavHostContainer(
navController: NavHostController,
padding: PaddingValues
) {
NavHost(
navController = navController,
startDestination = "home" ,
modifier = Modifier.padding(paddingValues = padding),
builder = {
composable( "home" ) {
HomeScreen()
}
composable( "search" ) {
SearchScreen()
}
composable( "profile" ) {
ProfileScreen()
}
})
}
|
Step 6: Adding Bottom Navigation
Refer to comments for better understanding.
Kotlin
@Composable
fun BottomNavigationBar(navController: NavHostController) {
BottomNavigation(
backgroundColor = Color( 0xFF0F9D58 )) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
Constants.BottomNavItems.forEach { navItem ->
BottomNavigationItem(
selected = currentRoute == navItem.route,
onClick = {
navController.navigate(navItem.route)
},
icon = {
Icon(imageVector = navItem.icon, contentDescription = navItem.label)
},
label = {
Text(text = navItem.label)
},
alwaysShowLabel = false
)
}
}
}
|
Step 7: Putting everything together in Scaffold
Now we need to put everything in the scaffold in setContent on MainActivity class
Kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContent {
BottomNavigationTheme {
val navController = rememberNavController()
Surface(color = Color.White) {
Scaffold(
bottomBar = {
BottomNavigationBar(navController = navController)
}, content = { padding ->
NavHostContainer(navController = navController, padding = padding)
}
)
}
}
}
}
}
|
Output:
Project Link: Click Here
Last Updated :
08 Sep, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...