Implement Bottom Bar Navigation in Jetpack Compose

In this article, we would explore the new navigation component released for Jetpack Compose and implement a bottom bar navigation system.

Ziv Kesten
ProAndroidDev

--

Here is the list of the blogs in this series:

**Update**
Jetpack Compose = 1.5.4
Compose navigation = 2.7.6

Navigation in Jetpack Compose has been somewhat complicated to implement up until the latest release from the Compose toolkit team.

Navigating between Android app screens was quite troublesome for years, using fragments and activities, with lifecycles and process deaths that catch you by surprise, I remember scanning through enormous code bases trying to find where one screen was replaced by another and why.
The navigation component, which was released in late 2018, was a great step up and allowed developers to create complicated storyboards with flows of screens, centering all of their data in XML graphs and providing actions and destinations as more friendly terms for navigation.

Then came Jetpack Compose

Jetpack Compose is Android’s modern toolkit for building native UI.

It’s built with Kotlin and with performance and less code as the main objectives, basic knowledge of Compose is required for implementing the approaches suggested in this article.
I recommend starting with the Android Compose pathways.

Navigation with Jetpack Compose

At first, Compose did not offer any native way of navigating screens, we had to implement our own navigation system, keeping track of back stacks and back button clicks, and this approach was very difficult to maintain as the number of screens grew and the app scaled.

recently, the toolkit team released the first version of the navigation library for Compose, and that means less code and better performance.

Let’s get started

We start by adding the Compose navigation dependency to our build.gradle file:

We are going to build a small cute app in the Halloween spirit, it will have four screens to which we can navigate with a bottom bar, It’s gonna look like that:

You can fork or clone the app from Github.

Composing time

Our entry point to the app is a Compose activity that contains one composable function called MainScreen.

MainScreen will contain a navigation bar and another composable function that will represent a screen that can display some spooky animation.

MainScreen is implemented like this:

Let’s break it down, the first part is the navController,

val navController = rememberNavController()

We create a val using the rememberNavController method provided by the navigation library.
Remember is a concept from the Compose world and is used for holding state, more on states in Jetpack Compose can be learned here.

Next, we declare our navigation items:

val bottomNavigationItems = listOf(
BottomNavigationScreens.Frankendroid,
BottomNavigationScreens.Pumpkin,
BottomNavigationScreens.Ghost,
BottomNavigationScreens.ScaryBag
)

These are contained in a sealed class and hold three parameters:

  • A String to represent a route.
  • A String resource for the name on the navigation button in the bottom bar
  • A VectorAsset for the Icon.

Then we just create a Scaffold with only a bottom bar for this specific spooky app example:

Scaffold(
bottomBar = {
SpookyAppBottomNavigation(navController, bottomNavigationItems)
},
) {
MainScreenNavigationConfigurations(navController)
}

The Navigation bottom bar

Now let’s implement SpookyAppBottomNavigation, It’s a BottomNavigation with four BottomNavigationItem created from the list we declared in the first part.

So most of the code is straight forward, we take the navController and the list of navigation items, and while iterating over them, we declare the icon, label, selected state, and onClick lambda for each.

The selected state is determined by the current route:

selected = currentRoute == screen.route

the screen is the model for which we are creating the current navigation item we are on, so what is this currentRoute?
In the previous section, we declared the screens with string properties called “route” this route string is how the navigation library tags the screens on its back stack, and the current route is the screen visible to us at this moment.

But how can we get the current route?

Luckily the folks at the navigation team provided us with a NavBackStackEntry class that holds the screen routes, we can access it like this:

So if we have the navController we can get the current back stack entry as a state by using:

navController.currentBackStackEntryAsState()

Then we just extract the current route string representation from its arguments property using the KEY_ROUTE constant:

return navBackStackEntry?.arguments?.getString(KEY_ROUTE)

So the last thing to implement is the onClick lambda which is responsible in our case to navigate us to the screen associated with our specific navigation item:

if (currentRoute != screen.route) {
navController.navigate(screen.route)
}

Notice how we check if the item we clicked is the current route, in that case, do not wish to perform any navigation.

The last and most important part is providing the system with the information on where it should navigate given a specific route, so in the trailing lambda of the Scaffold we had a function that handles that:

MainScreenNavigationConfigurations(navController)

Let’s implement it:

So that function is just a wrapper for a function provided by the navigation library called NavHost, it will replace the XML we used to write for navigation in the old view system.
It takes the navController and a starting destination, we provided it with our Frankendroid’s route as the starting destination.
Remember that destinations are represented as routes that are of type String.

Now We define a composable for each route:

composable(BottomNavigationScreens.Frankendroid.route) {
ScaryScreen(ScaryAnimation.Frankendroid)
}

As you can see what we are doing here is telling the NavHost to run the ScaryScreen function with the Frankendroid animation when we navigate to the BottomNavigationScreens.Frankendroid’s route.

If you play around with the app now you can see how pressing the back button pops the back stack to the latest screen we were on!

Full code available here.

Wasn’t that fun?
In the next article, I will cover animating the transitions between the screens and using SafeArgs to pass data between screens as well.

Stay tuned!

--

--

I am a mobile developer, an android enthusiast and a drone lover (Secretly, don’t tell the wife)