Implementation of a BottomNavigationView in an Android application. Component available from the compatibility library 25.

What you'll learn

  • Use the BottomNavigationView component

What you'll need

  • Compatibility library 25 or higher

1. Dependency

Dependency addition (0.48)

compile 'com.android.support:design:25.0.0'

2. Adding  the component

Adding the BottomNavigationView (1.08)

<android.support.design.widget.BottomNavigationView  
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

3. Menu

Menu creation (1.38) menu_navigation.xml

<?xml version="1.0" encoding="utf-8"?>  
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/inicioItem"
        android:icon="@drawable/ic_home"
        android:title="@string/inicio" />

    <item
        android:id="@+id/buscarItem"
        android:icon="@drawable/ic_search"
        android:title="@string/buscar" />

    <item
        android:id="@+id/camaraItem"
        android:icon="@drawable/ic_camera_alt"
        android:title="@string/camara" />

    <item
        android:id="@+id/favoritosItem"
        android:icon="@drawable/ic_favorite"
        android:title="@string/favoritos" />

    <item
        android:id="@+id/perfilItem"
        android:icon="@drawable/ic_person"
        android:title="@string/perfil" />

</menu>

4. The Code

The complete code:

After you download or clone the project you can import it with the "Import Project" option from Android Studio.

5. Remove animation

If you want to not have the zoom animation when the option changes (shift mode) there is no method that allows this, but you can use this:

private void removeShiftMode(BottomNavigationView bottomNavigationView) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.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);
            //noinspection RestrictedApi
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
    } catch (IllegalAccessException e) {
    }
}

You can download the same example with this change.

6. With Fragments

If you want an example with fragments I leave it here:

7. Resources