Design a stylish Bottom Navigation Bar on Android

Bottom navigation bar make it easy for users to explore and switch between top-level views in a single tap. It should be used when application has three to five top-level destinations. In this post, we are going to create a stylish bottom navigation bar in Java but using a Kotlin library.

Add dependencies

Create an empty project in Android Studio. We are going to use this Chip Navigation Bar library. Add the library’s dependencies to your build.gradle file:

We require the Kotlin dependency in order to use the library in our Java project.

Designing our menu

We need to design our menu which will span over the bottom navigation bar. We will use three menu items in this case. Head over to your res folder and right-click it. Click on Create New Android Resource Directory and create a new menu directory.

Right-click on the menu directory and create a new Menu Resource file and name it menu_bottom.xml

You can get the icons from the Vector drawables.

Next, we need a design for our menu that we can put as its background. So, right-click on the drawable directory and create a new drawable resource file and name it bubble.xml . Add the following code:

For the color you can set any but I’ll stick to the default for simplicity.

For the final design part, head over to your activity_main.xml and add the following:

Main Activity

We will then link our layout to our Main Activity as shown below:

The outcome:

There are various methods that we can implement in this library but not for now. We could for example set a chipNavigationBar. setOnItemSelectedListener method to set intents for when a different menu item is selected. However, that’s all for now. I have hosted this repository on GitHub here. Happy coding!