Select Page

Quick guide for Bottom Navigation View in Android

by | Oct 24, 2016

Quick guide for Bottom Navigation View in Android

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

implementation 'com.android.support:design:27.1.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

Latest posts by Jaison Fernando (see all)

  • Quintin

    Hello there! Is it possible to add a notification icon onto the tab icons?

  • Vikas Singh

    how to show 5 tabs with text and icon visible for all the tabs, all time and without the animation which only displays the currently selected with text and icon, bottom of screen.

    • Dimas Albuquerque Mendes

      For now, the only way to do that is via reflection

      public class BottomNavigationViewHelper {
      public static void disableShiftMode(BottomNavigationView view) {
      BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
      try {
      Field shiftingMode = menuView.getClass().getDeclaredField(“mShiftingMode”);
      shiftingMode.setAccessible(true);
      shiftingMode.setBoolean(menuView, false);
      shiftingMode.setAccessible(false);
      for (int i = 0; i < menuView.getChildCount(); i++) {
      BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
      //noinspection RestrictedApi
      item.setShiftingMode(false);
      // set once again checked value, so view will be updated
      //noinspection RestrictedApi
      item.setChecked(item.getItemData().isChecked());
      }
      } catch (NoSuchFieldException e) {
      Log.e("BNVHelper", "Unable to get shift mode field", e);
      } catch (IllegalAccessException e) {
      Log.e("BNVHelper", "Unable to change value of shift mode", e);
      }
      }
      }

  • Anshul Tyagi

    Can you please tell how to add dividers in BottomNavigationMenuView items ?

  • Albert Kuevago

    selector should use checked state, not the selected one

  • ali

    how to open 2nd tab or chat tab selected by default

    • Jaison Fernando

      Hey Ali,

      In SupportLibrary 25.3.0, they introduced the following method ” setSelectedItemId(int id) ” for selecting item.

      So just update your API version in the build.gradle

      compile ‘com.android.support:design:25.3.0’


      And use the following statement for select second tab(Chat),

      bottomNavigationView.setSelectedItemId(R.id.action_chat);

      Call this statement after setupViewPager(viewPager); function call in this example.

      • ali

        Thanks Jason You help a lot

      • mr bit

        how to set the selected item to none? I want when the app starts none of the items get selected by default.

  • Debasish Kumar Das

    I have 3 layouts in my content view XML file. I am refreshing the view with the navigation button click. Yes, I am able to set the default layout. But when I am re selecting the tab the layout is not getting refreshed. I am pasting my code here. Please look into it and suggest if I am doing anything wrong.

    Thanks in advanced for any help.

    bottomNavigation.setOnNavigationItemSelectedListener(
    new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()) {
    case R.id.bbn_item1:
    // The First Layout will be displayed
    handleMainLayoutVisibility(Constants.LAYOUT_FIRST);
    case R.id.bbn_item2:
    // The Second Layout will be displayed
    handleMainLayoutVisibility(Constants.LAYOUT_SECOND);
    case R.id.bbn_item3:
    // The Second Layout will be displayed
    handleMainLayoutVisibility(Constants.LAYOUT_THIRD);
    }
    return true;
    }
    });

    bottomNavigation.setOnNavigationItemReselectedListener(
    new BottomNavigationView.OnNavigationItemReselectedListener() {
    @Override
    public void onNavigationItemReselected(@NonNull MenuItem item) {

    switch (item.getItemId()) {

    // The First Layout will be displayed
    handleMainLayoutVisibility(Constants.LAYOUT_FIRST);
    case R.id.bbn_item2:
    // The Second Layout will be displayed
    handleMainLayoutVisibility(Constants.LAYOUT_SECOND);
    case R.id.bbn_item3:
    // The Second Layout will be displayed
    handleMainLayoutVisibility(Constants.LAYOUT_THIRD); }
    }
    });

    public void handleMainLayoutVisibility(String layoutName) {
    if (layoutName != null
    && layoutName.equalsIgnoreCase(Constants.LAYOUT_FIRST)) {
    if(layPastOrders.getVisibility() == View.VISIBLE){
    layPastOrders.setVisibility(View.GONE);
    layOrdersCustomers.setVisibility(View.VISIBLE);
    ToastUtils.displayToastMessageShort(TailorDashBoard.this,”First Layout Displayed”);

    layButtons.setVisibility(View.VISIBLE);
    // Handling button colors
    hanldeButtonColor(true);

    // Handling the layout visibility
    handleLayoutVisibility(true);
    //Initializing the array
    customerDetailsModels = new ArrayList();

    orderDetailsModelsArray = new ArrayList();

    setAllOrderAdapter();

    fetchAllOrderValue();
    }
    } else if (layoutName != null && layoutName.equalsIgnoreCase(Constants.LAYOUT_SECOND)) {
    if(layOrdersCustomers.getVisibility() == View.VISIBLE){
    layOrdersCustomers.setVisibility(View.GONE);
    layPastOrders.setVisibility(View.VISIBLE);
    ToastUtils.displayToastMessageShort(TailorDashBoard.this,”First Layout Displayed”);
    }
    } else if (layoutName != null && layoutName.equalsIgnoreCase(Constants.LAYOUT_THIRD)) {

    }

    }

  • Sankar Narayan Chakravarty

    Hello i applied this with four icons but the problem is that when activity loads, these are not equally spaced, when i touch the second one, it changes its position so are the third and fourth. the first one appearance is okay, I cannot understand this peculiar problem. Please help. Changing showAsAction attribute in menu.xml does not help also.

  • Kaustubh Bawankar

    Hello,
    Icons are not loading .What’s wrong ?

  • Ringo’e

    Hi Jai, Can you help me with a pet project i have?