Bottom Navigation Drawer view Android Example - Android Support Library Tutorial

A few days back tried Bottom Navigation View from official support library for Android and 
got some good impression over it and try to solve problems like lifecycle management while switching between fragments or bottom navigation view tabs. So, let us dive into the topic to configure Bottom Navigation Drawer view for android app.

Prerequisites :

1. Android Studio and SDK installed - How to install android studio

Getting Started

Note: If you're using Android studio 2.3 latest version as of March 2017 you can create bottom navigation view directly from New => Activity Gallery.

Add support library dependency in build.gradle file and sync it via android studio.

compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0'    

Use gradle sync to download all the support libraries and import to your project.

Adding Layout: 

We need to wrap the bottom navigation view with the Linear layout and make it as a bottom with gravity option so that it can be meaningful as the name specifies.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.ivisionblog.apps.bottomnavigationdrawer.MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">


    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</LinearLayout>

The above XML code contains linear layout with Framelayout and bottom navigation view. Frame layout contains the fragments which is yet to be replaced while clicking the bottom tabs.

Adding menu navigation with Icon:

Now we can add navigation icons with title via predefined xml file for the bottom navigation drawer view. 

1. android:icon represents the icon present in the navigation drawer
2. android:title represents the title below the icon in the bottom navigation drawer
3. android:checked represent the currently selected icon 

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

    <item
        android:id="@+id/navigation_home"
        android:checked="true"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

Java code Implementation:

Now take reference of the xml view and setting bottom navigation view with listener. check out the code below,

  @Override
  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        changeFragment(new HomeFragment());
  }

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    changeFragment(new HomeFragment());
                    return true;
                case R.id.navigation_dashboard:
                    changeFragment(new ButtonFragment());
                    return true;
                case R.id.navigation_notifications:
                    changeFragment(new ItemFragment());
                    return true;
            }
            return false;
        }

    };

    private void changeFragment(Fragment fm){
        android.support.v4.app.FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.content, fm);
        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        ft.addToBackStack(null);
        ft.commit();
    }

As you can check the above code in which, on Bottom Navigation Drawer clicks are handled and changed the fragment accordingly with Fragment manager replace methods.

For Full working sample, follow the Github repo. Just clone and open in android studio to execute the bottom navigation drawer view android example application. This Bottom Navigation Drawer view is bundled with Android support library officially and it's worth trying out in your application.

Hope you have enjoyed the post, post you own thoughts, additional points as comments. For complete code, projects, hugs/bugs just drop me mail/ chat in Facebook/Google+. share is care.