How to create bottom navigation bar android ?

In this Tutorial I am going to discuss about How to create bottom navigation view in android app .

Bottom Navigation View creates bottom navigation bars, making it easy to explore and switch between top-level content views with a single tap. Bottom Navigation view should be used when application has three to five top-level destinations.

1. Create a New Project :

Lets we start with a new project in Android Studio from File New Project ⇒
select Empty Activity and go through it.

2. Implement Design support library :

Implement Design support Library inside your project build.gradle file .

implementation 'com.android.support:design:28.0.0'

Try to add the latest version of the Design support library. Once that’s done, save the file and perform a Gradle sync.

3. Implement Bottom Navigation view and FrameLayout to the XML Layout :

Implement BottomNavigation view and FrameLayout to your XML Layout file i.e. activity_main.xml to display it for better user experience .

BottomNavigation :

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/colorAccent"
        android:layout_gravity="bottom"
        tools:elevation="2dp"
        app:itemTextColor="#fff"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_menu" />

FrameLayout :

<FrameLayout
        android:id="@+id/viewlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

activity_main.xml :

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


    <FrameLayout
        android:id="@+id/viewlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/colorAccent"
        android:layout_gravity="bottom"
        tools:elevation="2dp"
        app:itemTextColor="#fff"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_menu" />

</RelativeLayout>

4.Create menu resourse file :

Create menu resourse file inside res/menu/bottom_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_home"
        android:enabled="true"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_msg"
        android:enabled="true"
        android:icon="@drawable/ic_message_black_24dp"
        android:title="@string/msg"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_video"
        android:enabled="true"
        android:icon="@drawable/ic_ondemand_video_black_24dp"
        android:title="@string/video"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_info"
        android:enabled="true"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/info"
        app:showAsAction="ifRoom" />
</menu>

5.Create Fragments for each of the views :

Here we create four fragments named as Home, Message, Video and Notification .
You can read our last tutorial for How to create Fragments in android ?

6.Implement OnItemSelectedListener of BottomNavigation view :

Now implement OnItemSelectedListener of bottomnavigation view to switch between different fragments .

bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        Fragment fragment;
                        switch (item.getItemId()) {
                            case R.id.action_home:
                                fragment = home;
                                setTitle(item.getTitle());
                                break;
                            case R.id.action_msg:
                                fragment = msg;
                                setTitle(item.getTitle());
                                break;
                            case R.id.action_video:
                                fragment = video;
                                setTitle(item.getTitle());
                                break;
                            case R.id.action_info:
                            default:
                                fragment = noti;
                                setTitle(item.getTitle());
                                break;

                        }
                        fragmentManager.beginTransaction().replace(R.id.viewlayout, fragment).commit();
                        return true;
                    }
                });




        // Set default selection
        bottomNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);
        bottomNavigationView.setSelectedItemId(R.id.action_home);

MainActivity.java :

Now open your MainActivity.java and add following code .

package com.technxtcodelabs;

import android.support.annotation.NonNull;
import android.support.design.bottomnavigation.LabelVisibilityMode;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.FrameLayout;



public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;
    FrameLayout viewlayout;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewlayout = (FrameLayout)findViewById(R.id.viewlayout);
        bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);

        final FragmentManager fragmentManager = getSupportFragmentManager();

        // Declare fragments here
        final Home home = new Home();
        final Message msg = new Message();
        final Video video = new Video();
        final Notification noti = new Notification();



        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        Fragment fragment;
                        switch (item.getItemId()) {
                            case R.id.action_home:
                                fragment = home;
                                setTitle(item.getTitle());
                                break;
                            case R.id.action_msg:
                                fragment = msg;
                                setTitle(item.getTitle());
                                break;
                            case R.id.action_video:
                                fragment = video;
                                setTitle(item.getTitle());
                                break;
                            case R.id.action_info:
                            default:
                                fragment = noti;
                                setTitle(item.getTitle());
                                break;

                        }
                        fragmentManager.beginTransaction().replace(R.id.viewlayout, fragment).commit();
                        return true;
                    }
                });




        // Set default selection
        bottomNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);
        bottomNavigationView.setSelectedItemId(R.id.action_home);


    }
}

Now run the project/app in android device or any Emulator to add Bottom navigation bar android to your app.