Are you using Navigation Drawer in Android to take your users to different sections of your App?
But Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. It should be used when an application has three to five top-level destinations. Until before Design Support Library 25, you had to use third-party libraries or had to write code from scratch to use Bottom Navigation. But after the release of Design Support Library 25, Bottom Navigation Bar is now a part of Design Support library.
So now it is very simple to add Bottom Navigation to your App. And you should use it if your application has three to five top-level destinations.
In this tutorial, we are going to implement BottomNavigationView from Design Support Library. Follow the steps given below.
First of all, add Design Support Library dependency to app-level build.gradle file.
Define the Menu Resource File
Before adding BottomNavigationView to the layout, we must define a menu resource file which will be used to populate the BottomNavigationView. Each menu item title, icon, and enabled state will be used for displaying bottom navigation bar items.
Copy the code given below in a menu resource file named as
Also, add the vector drawables given below to the drawable folder with their respective names as mentioned in the above menu resource file.
Add BottomNavigationView to the Layout file.
Now add the BottomNavigationView to the layout of your Activity. Copy the code given below as you need in your layout file. I have named this layout file as.
The various XML attributes of Bottom Navigation View are as follows:
+ app:menu – Inflate the Bottom Navigation Bar with the items defined in menu resource file.
+ app:itemBackground – Set the background of our menu items.
+ app:itemIconTint – Set the tint which is applied to our menu items’ icons.
+ app:itemTextColor – Set the colors to use for the different states (normal, selected, focused, etc.) of the menu item text.
The attributes given above can also be set programmatically using methods shown below.
You must have noticed that for the attributes app:itemIconTint and app:itemTextColor, I have used a resource file instead of color. We will discuss this in the last step.
Listen for Click events on BottomNavigationView
After adding BottomNavigationView to the layout, we can listen for click events on BottomNavigationView items through BottomNavigationView.OnNavigationItemSelectedListener interface.
Add the code given below to your Activity class file.
In the above-given code, you must take required action like Fragment Transaction when each of the items gets clicked.
Handling different States of Menu Items of BottomNavigationView
You must have encountered that in some Android Apps, the items inside BottomNavigationView are presented in a different manner. Like the item in focus has dark color while other items have the light color or disabled items have the different color. All this is achieved through a selector file which is referenced in app:itemIconTint and app:itemTextColor attributes of BottomNavigationView.
I have defined a selector file below, to have a different color for an item in focus as compared to other items. This can be extended to deal with other types of states also.
We have now completely implemented the BotttomNavigationView in our Android Application. You must see, how straightforward and simple it is to add BottomNvaigationView from Design Support Library to an App. The BottomNavigationView will look like as shown in the image below.
If you face any problem in the tutorial above, you can always leave a reply or reach me through the chat option given in bottom right corner of the window.