Bottom Navigation View by Design Support Library in Android

Bottom Navigation View was introduced for a long time ago in Material design guideline but it hasn’t been easy for us to implement it into our apps. Some applications have built their own solutions, whilst others have used a third-party open-source libraries to get the job done. I also had a post about using a library to make this design, you should take a glance here!

But now, with the release of Design Support Library version 25.0.0, Google now provide an official widget to make this design. This is a good new for Android developers, from now on, we have not depended on any third-party library anymore, just only need to use BottomNavigationView in your layout design.
DEMO VIDEO:

Adding Design Support Library dependency

It is included in the Design Support Library, starting with version 25.0.0. You can include it in your build.gradle file with the following line (you'll also need the AppCompat Support Library as the Design Support Library's dependency):

compile 'com.android.support:appcompat-v7:25.0.0'  
compile 'com.android.support:design:25.0.0'

Declaring in activity layout

Next we simply need to add the BottomNavigationView widget to our desired layout file. Remember that this should be aligned with the bottom of the screen with all content displaying above it. We can add this view like so:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.devexchanges.bottomnavigationview.MainActivity">

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/activity_horizontal_margin">

    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimaryDark"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/menu_bottom_navigation" />
</RelativeLayout>

As you can see, there are 4 important attributes of BottomNavigationView:

itemBackground: the background color or Drawable of the items. Can be set from code with the setItemBackgroundResource() method.
itemIconTint: the icon tint for items. Can be set from code with the setItemIconTintList() method.
itemTextColor: the text color for the item labels. Can be set from code with the setItemTextColor() method.
menu: the menu resource to be used to display items in the bottom navigation menu. Can be set from code with inflateMenu() method.

If you add this to your app and run it on your device, you’ll see a shiny new bottom navigation view like this:

Create a menu for Bottom Navigation View

At the XML code above, we provided a menu attribute for our BottomNavigationView. It looks exactly the same as any other menu that we’d use throughout our app, let put a menu resource file in res/menu folder:

menu_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/songs"
        android:icon="@drawable/song"
        android:title="All songs" />
    <item
        android:id="@+id/genre"
        android:icon="@drawable/genre"
        android:title="Genres" />
    <item
        android:id="@+id/album"
        android:icon="@drawable/album"
        android:title="Albums" />
    <item
        android:id="@+id/artist"
        android:icon="@drawable/artist"
        android:title="Artists" />
</menu>

Important Note: the maximum number of items we can display now is 5. You can check it through call getMaxItem() method.

Handle selected/unselected states

Using the BottomNavigationView we can easily handle the display of both selected and unselected menu items. Firstly, create a selector file for our selected/unselected colors (this file is put in res/color folder):

color_states.xml

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

    <item
        android:color="#757575"
        android:state_checked="false"/>
    <item
        android:color="@color/colorAccent"
        android:state_checked="true"/>

</selector>

Now, change the itemIconTint attribute value of your BottomNavigationView:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimaryDark"
        app:itemIconTint="@color/color_states"
        app:itemTextColor="@color/white"
        app:menu="@menu/menu_bottom_navigation" />

You will have this output:

Handle menu items click event

Now we’ve implemented our menu we need to be able to react when it’s interacted with. In programmatically code, we can use the setOnNavigationItemSelectedListener() method of BottomNavigationView to set a listener for menu item events:

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.artist:

                        break;
                    case R.id.genre:

                        break;
                    case R.id.album:

                        break;
                    case R.id.songs:

                        break;
                    default:
                        break;
                }
                return true;
            }
        });

Conclusions

I hope you can see now just how straight forward it is to implement the Bottom Navigation view using the design support library. At this time, this widget is still not perfect. For example, we now cannot custom it's behavior to show/hide it when scrolling screen, hope that Google will make it better soon!
Of course, if you need more code of this project, please check it out on @Github, I will replace corresponding fragments when menu items clicked, output of my sample project like this:

Read more:

Material design guidelines
My previous post about Bottom Navigation View

DOWNLOAD CODE

Learn Programming Together