This blog will help you to setup a navigation bar at the bottom side of screen in which you can define maximum three to five top level view of an app. These all view can be directly accessed from any where in the app. If we are putting maximum five view inside navigation bar then it could be not covered and will be scrollable. Whereas it should avoid scrollable content inside navigation bar. Bottom navigation bar has icons and text both together.

With the help of this tutorial you will be able to easily use Bottom Navigation in your app. Just follow the below mentioned steps:

Step-1 Put below line in your Gradle files

compile 'com.roughike:bottom-bar:1.3.3'

Step-2 Adding items from menu resource

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

    <item
        android:id="@+id/firstitem"
        android:icon="@drawable/ic_recents"
        android:title="Second" />
    <item
        android:id="@+id/seconditem"
        android:icon="@drawable/ic_favorites"
        android:title="Second" />
    <item
        android:id="@+id/thirditem"
        android:icon="@drawable/ic_nearby"
        android:title="Third" />
    <item
        android:id="@+id/fourthitem"
        android:icon="@drawable/ic_friends"
        android:title="Fourth" />
    <item
        android:id="@+id/fifthitem"
        android:icon="@drawable/ic_restaurants"
        android:title="Five" />
</menu>

Step-3 Create a MainActivity

import android.os.Bundle;
import android.support.annotation.IdRes;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import android.widget.Toast;

import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.OnMenuTabClickListener;

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBarView;
    private TextView mMessageView;

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

        mMessageView = (TextView) findViewById(R.id.msgview);

        mBottomBarView = BottomBar.attach(this, savedInstanceState);
        mBottomBarView.setItemsFromMenu(R.menu.bottombar_menu, new OnMenuTabClickListener() {
            @Override
            public void onMenuTabSelected(@IdRes int menuItemId) {
                mMessageView.setText(getMessage(menuItemId, false));
            }

            @Override
            public void onMenuTabReSelected(@IdRes int menuItemId) {
                Toast.makeText(getApplicationContext(), getMessage(menuItemId, true), Toast.LENGTH_SHORT).show();
            }
        });

        // Setting colors for different tabs when there's more than three of them.
        // You can set colors for tabs in three different ways as shown below.
        mBottomBarView.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
        mBottomBarView.mapColorForTab(1, 0xFF5D4037);
        mBottomBarView.mapColorForTab(2, "#7B1FA2");
        mBottomBarView.mapColorForTab(3, "#FF5252");
        mBottomBarView.mapColorForTab(4, "#FF9800");
    }

    private String getMessage(int menuItemId, boolean isReselection) {
        String message = "Content for ";

        switch (menuItemId) {
            case R.id.firstitem:
                message += "First";
                break;
            case R.id.seconditem:
                message += "Second";
                break;
            case R.id.thirditem:
                message += "Third";
                break;
            case R.id.fourthitem:
                message += "Fourth";
                break;
            case R.id.fifthitem:
                message += "Five";
                break;
        }

        if (isReselection) {
            message += " Reselected!";
        }

        return message;
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);

        // Necessary to restore the BottomBar's state, otherwise we would lose the current tab on orientation change.
        mBottomBarView.onSaveInstanceState(outState);
    }
}

Step-4 Add badges to bottom bar tabbed

You can easily add badges for showing an unread message count or new items.

/* Make a Badge for the first tab, with red background color and a value of "20"*/
// 
BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(0, "#FF0000", 20);

// Control the badge's visibility
unreadMessages.show();
unreadMessages.hide();

// Change the displayed count for this badge.
unreadMessages.setCount(4);

// Change the show / hide animation duration.
unreadMessages.setAnimationDuration(200);

// If you want the badge be shown always after unselecting the tab that contains it.
unreadMessages.setAutoShowAfterUnSelection(true);

Step-5 Add listener on tab selected

It will provide a specified position to tabs on which you will click.

// Listen for tab changes
mBottomBar.setOnTabClickListener(new OnTabClickListener() {
    @Override
    public void onTabSelected(int position) {
        // The user selected a tab at the specified position
        Toast.makeText(MainActivity.this,"Tab Selected Position "+position,Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onTabReSelected(int position) {
        // The user reselected a tab at the specified position!
    }
});