Android
Using Bottom Navigation View from Design Support Library Android

Using Bottom Navigation View from Design Support Library Android

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.

 

STEP 1Add Dependency

First of all, add Design Support Library dependency to app-level build.gradle file.

 

STEP 2Define 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 bottom_navigation_menu.xml

Also, add the vector drawables given below to the drawable folder with their respective names as mentioned in the above menu resource file.

 

STEP 3Add 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 activity_bottom_navigation_view.xml.

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.

BottomNavigationView Public Methods

 

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.

 

STEP 4Listen 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.

 

STEP 5Handling 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.

BottomNavigationView Activity

 


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.

Share this Story

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me


I'm a college student pursuing B.tech. I created this website (Blog) to share my learnings with the people who search for the same content/knowledge.