Jetpack Compose Bottom Navigation Bar – Android Coding by DMTechnolab

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.

Jetpack Compose Bottom Navigation Bar

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.

implementation "androidx.navigation:navigation-compose:2.4.1"

Defining Navigation Routes

Create a Kotlin file named

Routes.kt

and add the following code.

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

,

Defining Navigation Items

Now for each route, we will define a navigation item. We can use a sealed class for this, as you can see below.

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.

Defining Bottom Navigation

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.

@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.

Using Material Scaffold to Display Bottom Navigation

  • Finally, write the following code inside your
    MainActivity

    ,

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.

Jetpack Compose Bottom Navigation Bar Code

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


Source link

About dmtechnolab

Check Also

Simplified Coding

Android Espresso Tutorial – Testing Fragment in Isolation – Android Coding by DMTechnolab

Welcome to another tutorial in the Android test series. And this post is called Android …

Leave a Reply

Your email address will not be published. Required fields are marked *