In this blog post we will learn how to make a Toolbar and a Bottom Navigation Bar in Jetpack Compose.

If you are interested in exploring other components in Jetpack Compose you can check out the series of articles that I have written.

Series Pit Stops

There are two types of AppBars in Jetpack Compose: TopAppBar and BottomAppBar . Let’s explore TopAppBar first.

TopAppBar in Jetpack Compose is basically the toolbar in Android. There are two implementations of TopAppBar in Jetpack Compose, let’s explore their method signatures one by one.

This is pretty straight forward. In the title , you can specify the text that appears on the toolbar. You can use color to specify the color of the toolbar by default it uses the primary color of the theme that you are using. navigationIcon is an icon that appears on the left side of the title, typically used to open the navigation drawer, although you can customise what happens on clicking on the navigationIcon in your implementation.

Let’s have a look at the second implementation of TopAppBar .

Two additional fields that we see here are actionData and action . Although the naming is a bit weird but all they do is tell you what actionData should be shown at the end of the toolbar. You can have at max 2 icons in the toolbar other than the navigationIcon , if you use more than 2 icons then the extra icons should appear in an overflow menu but as you can see in the comment above, this functionality is still not there. action defines what should be done when the user clicks on your actionData in the toolbar. For instance if your actionData is a search icon, the action would be to allow you to search for something. The following example will make things more clear.

Here we have set the title of the toolbar using a Text component. We are providing an image of the search icon in the actionData . AppBarIcon is used to make an icon in the toolbar using the image which we provide in the actionData . AppBarIcon is also used to make the navigationIcon . The screenshot below shows the result of the above code.

Let’s explore the other AppBar which is BottomAppBar . BottomAppBar is basically the Bottom Navigation bar in Android. Let’s have a look at its method signature.

You might notice that BottomAppBar has a similar method signature as TopAppBar , fabConfiguration is the only field that is different. If you don’t need a fab just let the field be null otherwise you can configure the fab according to your needs. FabConfiguration is a data class which looks like this

Basically here you can specify the position of the fab which takes a default value of centre, other than that you can place it at the right side. cutoutShape is the shape that will be cut off from the BottomAppBar to fit the fab. The following example will make things more clear.

The code snippet above is similar to how we setup the TopAppBar . Only difference is here we have to define the fabConfiguration as well. We are using circleShape in cutOutShape , the gap between the BottomAppBar and fab that you see in the screenshot below is because of this parameter, you can pass a null value if you don’t want it. navigationIcon is the left most icon in the BottomAppBar just like it was in TopAppBar .

When you have a fab which is centred then you can have at max 2 icons in the BottomAppBar in addition to the navigationIcon otherwise if there is no fab or the fab is positioned in the end you can have at max 4 icons in the BottomAppBar .

This is how you can use AppBars in Jetpack Compose to create TopAppBar and BottomAppBar .

One thing that I realised after exploring AppBars is that I never thought Bottom Navigation Bar and Toolbar worked in a similar manner and lot of code can be reused like it has been done in Jetpack Compose. Jetpack Compose is really promising and I can’t wait to see its stable version!

The code snippets used in this blog post are from this repository, feel free to check it out.

Jetpack Compose is still in developer preview, there will be breaking changes in the future so some of the things that I mentioned might change over time.

Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!

If you have any kind of feedback, feel free to connect with me on Twitter.