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.

Android Bottom Navigation View

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:

Android navigation view state list

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s