Select Page

Bottom Navigation View has been added to version 25 of the Design Support Library! It Represents a standard bottom navigation bar for application, makes it easy for users to explore and switch between top-level views in a single tap.

STEP 1 : In Gradle

Add/Update the library to your dependency

compile 'com.android.support:design:25.0.0'
STEP 2 : Add to your layout

It is super easy to add to your layout file.

 <android.support.design.widget.BottomNavigationView
  android:id="@+id/bottom_navigation"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  app:itemBackground="@color/colorPrimary"
  app:itemIconTint="@drawable/bottom_navigation_color_selector"
  app:itemTextColor="@drawable/bottom_navigation_color_selector"
  app:menu="@menu/menu_bottom_navigation" />

STEP 3 : Populate Menu

The bar contents can be populated by specifying a menu resource file. First, create a menu file and then populate it by using the following attribute of BottomNavigationView.

 app:menu="@menu/menu_bottom_navigation"
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
    android:id="@+id/action_call"
    android:icon="@drawable/ic_call"
    android:title="@string/tab1"
    app:showAsAction="ifRoom" />
   <item
    android:id="@+id/action_chat"
    android:icon="@drawable/ic_chat"
    android:title="@string/tab2"
    app:showAsAction="ifRoom" />
   <item
    android:id="@+id/action_contact"
    android:enabled="false"
    android:icon="@drawable/ic_contact"
    android:title="@string/tab3"
    app:showAsAction="ifRoom" />
</menu>

STEP 4 : Adjust the appearance

There are several important attributes here that we can set to adjust the appearance.

app:selected – Sample

app:itemBackground  Used to set the background color of the bottom navigation menu.

app:itemIconTint – Used to set the color of the icon.

app:itemTextColor – Used to set the color of the text.

We can also set these values programatically by using the following methods.

inflateMenu(int resId) – Inflate a menu resource into this navigation view.

setItemBackgroundResource(int resId) – Set the background of menu items.

setItemIconTintList(ColorStateList tint) – Set the tint which is applied to menu items’ icons.

setIteTextColor(ColorStateList textColor) – Set the text color of menu items.

bottomnavigationview

STEP 5 : Handling Enabled/Disabled state

We can easily handle the display of both enabled and disabled menu items. First, we need to create a selector file for our enabled / disabled colors like following.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="@color/tab_enable" android:state_enabled="true" />
 <item android:color="@color/tab_disable" android:state_enabled="false" />
</selector>

STEP 5 : Listening Events

We use the setOnNavigationItemSelectedListener() method to set a listener for menu item events:

//Initializing the bottomNavigationView
bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_call:
                       
                        break;
                    case R.id.action_chat:
                        
                        break;
                    case R.id.action_contact:
                        
                        break;
                }
                return false;
            }
        });
Elsewhere

Jaison Fernando

Android Developer at NFN Labs
Elsewhere