Jetpack Compose Bottom Navigation Bar

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.

Defining Navigation Routes

Create a Kotlin file named Routes.kt  and add the following code.

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.

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.

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

  • 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 🙂

Leave a Comment