Bottom Navigation in Compose Way

We know that bottom navigation is Android UI widget that commonly use by many Android developer. And since compose is also really hype nowadays, let’s try to create bottom navigation with compose.

Preparation

Before we play with bottom navigation, there are some preparation need to be done before. First, we need to implement compose material dependency so that we can use bottom navigation.

implementation "androidx.compose.material:material:$compose_version"

Second, we need to prepare some data that we used to make the bottom bar. The goal is to make our bottom navigation look like this :

So we need some data to put on bottom navigation. We need some icon and label for bottom navigation, and add route too for compose navigation. Let’s make a data class for this :

And last, we need to prepare a screen for each bottom navigation tab. Since we don’t want to make some complicated screen, so we only made one screen with text on it.

Bottom Navigation

To create bottom navigation using compose, we need to add three things, BottomNavigation(), NavHost(), and Scaffold(). First let’s create BottomNavigation.

BottomNavigation contains several BottomNavigationItem, in this case the items are from list of BottomBar that we create before. We can add icon and label, also modify selected and unselected color. On click we navigate to the destined route through NavController. Next, we create the scaffold and add BottomNavigation in it.

And last, inside scaffold content, we add NavHost to control the navigation for BottomNavigation.

Result

So that’s all with the code, along the way I add some color to the screen so that it looks much nicer. If compared to creating bottom bar using XML, this compose way is more easier to implement. The back stack is also work properly. But there is still some behavior from navigation that I don’t like, which is the back stack is not behaving like my expectation.

I expect when I press back button, it will pop the back stack one by one until reaching the start destination and stop at that, but it actually not. As you see it in the image above, the back stack will all pop up even though it already reach start destination. This might be the correct behavior, but I want to make it stop at start destination. Maybe later I will try to solve this problem.