Bottom Navigation View in Android - Androhub

Bottom Navigation View in Android

Its been a while i have not written any article. Today we are going to learn new design widget in Android naming Bottom Navigation View which has been added to version 25 of the Design Support Library.

The Bottom Navigation View has been in the material design guidelines for some time, but it hasn’t been easy for us to implement it into our apps. Some applications have built their own solutions, whilst others have relied on third-party open-source libraries to get the job done. Now the design support library is seeing the addition of this bottom navigation bar, let’s take a dive into how we can use it!

Example

In this tutorial, we are going to learn how to implement 3 types Bottom Navigation View : Default, Custom and Bottom Navigation with more than 3 Menus.

Types of Bottom Navigation View that we are going to learn:

 

Default Bottom Navigation View
Default Bottom Navigation View

 

Custom Bottom Navigation View
Custom Bottom Navigation View

 

Bottom Navigation View with 3+ Menu Items
Bottom Navigation View with 3+ Menu Items

 

VIDEO DEMO

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.

2. Open build.gradle and include this libraries show below:

3. Once you have synced your project with the Design support library. Now create a new layout naming bottom_navigation_view_activity.xml and we simply need to add the Bottom Navigation View widget to our desired layout file. Remember that this should be aligned with the bottom of the screen with all content displaying above it.

You’ll notice that the widget has a couple of attributes set on it. We can use these to set menu items we wish to display and the colours to be used throughout the Bottom Navigation View:

  • app:itemBackground — The background color to be used for the bottom navigation menu
  • app:itemIconTint — The tint to be used for the icons in the bottom navigation menu
  • app:itemTextColor — The color to be used for the text in the bottom navigation menu
  • app:menu — The menu resource to be used to display items in the bottom navigation menu

We can also set these values programatically by using the following methods on our BottomNavigationView instance:

  • inflateMenu(int menuResource) — Inflate a menu for the bottom navigation view using a menu resource identifier.
  • setItemBackgroundResource(int backgroundResource) — The background to be used for the menu items.
  • setItemTextColor(ColorStateList colorStateList) — A ColorStateList used to color the text used for the menu items
  • setItemIconTintList(ColorStateList colorStateList) — A ColorStateList used to tint the icons used for the menu items

4. So we referenced a menu in the previous section, so create a menu under menu directory naming bottom_navigation_menu.xml and more_bottom_navigation_menu.xml and add the menu items according to your requirement.

It’s important to note that the maximum number of items we can display is 5. This may change at any point, so it’s important to check this by using the getMaxItem() method provided by the BottomNavigationView class rather than hard-coding the value yourself.

5. For custom Navigation View we need to create a selector file under drawable directory naming custom_navigation_selector.xml. This selector file is going to be used in your point 3 layout file.

6. Now to handle the click event over Bottom Navigation Bar you need setOnNavigationItemSelectedListener() method to set a listener for menu.

7. Now create BottomNavigationViewActivity.java class and add the below code to it. This class contains the implementation of Bottom Navigation View.

8. Now you are all set up to create a Bottom Navigation Bar for your Android app.

Thanks. 🙂

 

2 Comments

Hanry
Saturday, May 19th, 2018

What about muli-line text in bottom navigation item?

Dr. Droid
Saturday, May 19th, 2018

Hi Hanry,

You can check the Bottom Navigation design guidelines here: https://material.io/design/components/bottom-navigation.html#anatomy

If you want to make multiline you need to make it custom.

Thanks

Post comment

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