Bottom Navigation Demo in Android

To get started with this, you need the latest version (version 25) of Android SDK & tools (including SDK tools, build-tools, platform-tools, support repository).

Gradle

Add the design support library

First step is to add the design support library to your app-level build.gradle file. Example is as shown below:

dependencies {
    compile 'com.android.support:appcompat-v7:25.1.0'
	compile 'com.android.support:design:25.1.0'
	compile 'com.android.support:support-v4:25.1.0'
}

Layout

Add the BottomNavigationView to your layout
Next step, is to add the actual bottom nav view to the layout. Typically, you will add something like:

<android.support.design.widget.BottomNavigationView
       android:id="@+id/navigation"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="start"
       design:menu="@menu/bottom_nav_items" />

Whenever a new component is introduced, along with it some new methods and attributes are also added with it. Hence with the Android’s official bottom navigation widget the BottomNavigationView following new XML attributes are added:

• android.support.design:itemBackground – It is used to set the background color of the navigation item. It does not take a ColorStateList, as per design specifications.
• android.support.design:itemIconTint – It is used to set the icon tint color, use a ColorStateList to specify colors for all states.
• android.support.design:itemTextColor – It is used to set the text color of the navigation item, use a ColorStateList to specify colors for all states.

Navigation Items

Here we are going to set three bottom tabs.

To define the items, you need to do so in a menu resource. Let’s create one and name it bottom_nav_items.xml as we have specified in step 2 above.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:title="@string/menu_home"
        android:icon="@drawable/ic_home_black"
        />
    <item
        android:id="@+id/menu_search"
        android:title="@string/menu_search"
        android:icon="@drawable/ic_search_black"
        />

    <item
        android:id="@+id/menu_notifications"
        android:title="@string/menu_notifications"
        android:icon="@drawable/ic_notifications_black" />
</menu>

Listening to Events

mBottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                // handle desired action here
                // One possibility of action is to replace the contents above the nav bar
                // return true if you want the item to be displayed as the selected item
                return true;
            }
        });

References

You can check the documentation from here

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html
https://material.google.com/components/bottom-navigation.html

Source Code

You can download the complete source code from here