Android BottomNavigationView Example

The 25th version of Android Support Library brings an implementation of the Bottom navigation pattern called BottomNavigationView – a navigation bar intended to make it easy to switch between top level views with a single tap.

In order to benefit from this new addition, the design support library needs to be updated to API Level 25.0.0:

dependencies {
    compile 'com.android.support:design:25.0.0'
    // ...
}

Having the support library updated, the BottomNavigationView now can be used in your layout:

    <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="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_nav_items" />

The menu items are inflated from a menu resource file:

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

    <item
        android:id="@+id/action_recents"
        android:icon="@drawable/ic_recent"
        android:title="@string/recents" />

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

    <item
        android:id="@+id/action_explore"
        android:icon="@drawable/ic_explore"
        android:title="@string/explore" />

</menu>

Handling click events

From code side BottomNavigationView is as easy to use as from layout side. An implementation of OnNavigationItemSelectedListener is what you need to provide in order to handle events on bottom navigation items.

BottomNavigationView bottomNavigation = 
        (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                handleBottomNavigationItemSelected(item);
                return true;
            }
        });

// ... 

private void handleBottomNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_recents:
                switchFragment(new RecentsFragment());
                break;
            case R.id.action_favorites:
                switchFragment(new FavoritesFragment());
                break;
            case R.id.action_explore:
                switchFragment(new ExploreFragment());
                break;
        }
    }

Handling items state

In order to have a full featured example, the last thing that we are missing is to have the navigation items change accordingly to their state, eg.: checked/uncheked. To achieve this we need to provide a ColorStateList resource, and set this resource as background for the app:itemIconTint and app:itemTextColor attributes:

<!-- item_bg.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/blue" android:state_checked="true" />
    <item android:color="@color/white" />
</selector>


<!-- activity_main.xml -->
<android.support.design.widget.BottomNavigationView
        // ...       
        app:itemIconTint="@drawable/item_bg"
        app:itemTextColor="@drawable/item_bg" />

And the result will look something like this: