Android Bottom Navigation View Tutorial With Example

Google added Bottom Navigation View in android design support library in it’s version 25. In this tutorial, you will learn more about android bottom navigation view, what is it, how to use and implement it in any application etc.

Android Bottom Navigation View is another way (like Navigation View, Sliding TabBar, Fixed TabBar etc.) to quickly navigate between different top level view in a single tap in an android application. There are several points you need to keep in mind while implementing this view. We have categorised these points in 4 parts. They are Usage, Style, Behaviour and Specs. We will talk about it one by one.

Usage

Bottom navigation View is used to quickly navigate between top-level views of an application. It is primarily designed to be used in mobile application. However, larger devices like Desktop may achieve similar behaviour by using side navigation.
It should be used for :
a. 3 to 5 top level destinations of similar importance.
b. Destination that needs direct access from anywhere in the application.
If you have more than five top level destinations, you can provide access to destinations not covered in bottom navigation view in navigation drawer.

Style

This section covers how should bottom navigation-view look, what should be the color of text, etc.
Icons and Text:
We represent bottom navigation actions as icon, so, we should use icons that can be related to the respective actions. For example, If we are showing home tab, then, use icon that represents home. For example, you can see the example in output shown above.

You can also style each action as below.
a. When the view is in focus, show text label and icon both.
b. When there are only three actions, show both icons and text labels at all times.
c. When there are more than three actions, Show icons when view is inactive. Otherwise, show icons and text label.

Color:
a. Tint the current bottom navigation action with the app’s primary color.
b. If navigation bar is coloured, the color of icons and text of current action should be either black or white.

Text Labels:
a. Provide short and simple name to the bottom navigation actions as it will neither truncate nor wrap.

Behaviour

a. Tapping on a bottom navigation icon redirects you to the related views or refreshes the current view. Each icon must have a fixed destination and may not open menus or pop-ups.
b. Pressing back button should not navigate between different bottom navigation views.
c. It can appear/disappear dynamically. If you are doing so, it should hide while scrolling downward and reveals it while scrolling upward.

Specs

Width of each action can be calculated using below formula
Width of action = Width of entire view / Number of actions.

If you want to know more, you can go to guidelines detail.




Output

At the end of the tutorial, you will get output as below.

Tutorialwing - Android Bottom Navigation View Output

Tutorialwing – Android Bottom Navigation View Output

Video Output

Source Code

Android Navigation View Tutorial Source Code

1. Getting Started

In this tutorial, you will learn how to use one of the most important design support library – Android Bottom Navigation View Library. Let’s start the tutorial now.

1.1 Creating New Project

Follow steps written below to create a new project.
a. Goto File –> New –> New Project. Then, Write application name as BottomNavigationView and click next.
b. Select Minimum SDK 15 or more –> click next –> Select Empty Activity –> click next –> click finish.
If you have followed above process correctly, you will get a newly created project successfully.

1.2 Basic setup for Bottom Navigation View

Follow steps below to setup bottom navigation view.

1.2.1 Add gradle into app/build.gradle

You need to add design support library gradle into app/build.gradle file.

compile 'com.android.support:design:25.1.0'

1.3 Important Attributes detail

Bottom Navigation View has certain attributes that can be used to style this view. You can choose the color of each menu, you can set the color of the whole tab, you can style the text appearance of each tab etc. by using appropriate attributes. Some of such attributes are as listed below.

app:Background —  Use this attribute to set the background color of the bottom navigation view.
app:itemIconTint — Use this attribute to tint the icons in bottom navigation view.
app:itemTextColor — Use this attribute to set the text color of the item in bottom navigation view.
app:menu — Use this attribute to set the menu(that contains the item to be displayed in Navigation View) of the Bottom Navigation View.

You can also check other attributes in this link. You will also find some methods that can be used to style the bottom navigation view. All of them are listed in this link.

2.0 Creating menu to Show Bottom Navigation View

We use menu xml file to show items needed in bottom navigation view. According to guidelines, three to five items are recommended. So, make sure you follow the guidelines while creating the menu items. It should be between three to five. So, let’s create menu items for bottom navigation view.

Create menu folder in res folder(res/menu). Now, Create bottom_navigation.xml file into this(res/menu) folder.
In this tutorial, we are going to show only 3 menu items. So, Add 3 items in bottom_navigation.xml file. Finally, bottom_navigation.xml file would look like below.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_home"
        android:title="@string/home"/>
 
    <item
        android:id="@+id/action_bag"
        android:icon="@drawable/ic_bag"
        android:title="@string/bag"/>
 
    <item
        android:id="@+id/action_account"
        android:icon="@drawable/ic_account"
        android:title="@string/account"/>
 
</menu>



3.0 Start Implementing Bottom Navigation View

Now, We have completed basic setup for Bottom Navigation View. So, We will start implementing bottom navigation view in our application. There are 2 sections in which we will see the implementation. First section describes how to Add Bottom Navigation View into xml file. Second section contains code to perform some operations on tab item selection programatically.

3.1 Add Bottom Navigation View into xml file

This is bottom navigation view. Add this code into main_activity.xml file.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation"/>

Finally, main_activity.xml file would look like below

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <FrameLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:orientation="vertical">
 
    </FrameLayout>
 
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_navigation"/>
 
</RelativeLayout>

3.2 Perform operation on Bottom Navigation View programatically

You can access Bottom Navigation by it’s Id programatically as below

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);

You can set NavigationItemSelectedListener as below

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
    if (bottomNavigationView != null) {
        // Set action to perform when any menu-item is selected.
        bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    // Write code to perform some actions.
                    return false;
                }
            });
    }

In this tutorial, we are showing corresponding fragment on tab selection. Here, I will create only one fragment and rest you can create similarly.

3.3 Create Fragments to show on Tab Menu Item Selection

We are showing only three menu items in Bottom navigation View. So, I will create fragment related to one of them. Similarly, you create fragments for other tab. You can also modify UI as per your requirements in the fragment.

Create a Java file named HomeFragment in com.tutorialwing.bottomnavigationview. Also, create an xml file named home_fragment in res/layout folder. Modify the UI as per your need. Here, we are just showing sample. So, Finally, both of these files would look like below.

Final HomeFragment.java code

package com.tutorialwing.bottomnavigationview;
 
import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class HomeFragment extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.home_fragment, container, false);
    }
}

Final home_fragment.xml code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    android:gravity="center"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/home"/>
 
</LinearLayout>

Similarly, you can create fragments for other tabs. However, you can download the final code from source code given above.

4.0 Final code

Finally, our MainActivity.java and main_activity.xml file would look like below.

MainActivity.java

package com.tutorialwing.bottomnavigationview;
 
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
 
        setupNavigationView();
    }
 
    private void setupNavigationView() {
        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        if (bottomNavigationView != null) {
 
            // Select first menu item by default and show Fragment accordingly.
            Menu menu = bottomNavigationView.getMenu();
            selectFragment(menu.getItem(0));
 
            // Set action to perform when any menu-item is selected.
            bottomNavigationView.setOnNavigationItemSelectedListener(
                    new BottomNavigationView.OnNavigationItemSelectedListener() {
                        @Override
                        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                            selectFragment(item);
                            return false;
                        }
                    });
        }
    }
 
    /**
     * Perform action when any item is selected.
     *
     * @param item Item that is selected.
     */
    protected void selectFragment(MenuItem item) {
 
        item.setChecked(true);
 
        switch (item.getItemId()) {
            case R.id.action_home:
                // Action to perform when Home Menu item is selected.
                pushFragment(new HomeFragment());
                break;
            case R.id.action_bag:
                // Action to perform when Bag Menu item is selected.
                pushFragment(new BagFragment());
                break;
            case R.id.action_account:
                // Action to perform when Account Menu item is selected.
                pushFragment(new AccountFragment());
                break;
        }
    }
 
    /**
     * Method to push any fragment into given id.
     *
     * @param fragment An instance of Fragment to show into the given id.
     */
    protected void pushFragment(Fragment fragment) {
        if (fragment == null)
            return;
 
        FragmentManager fragmentManager = getFragmentManager();
        if (fragmentManager != null) {
            FragmentTransaction ft = fragmentManager.beginTransaction();
            if (ft != null) {
                ft.replace(R.id.rootLayout, fragment);
                ft.commit();
            }
        }
    }
}

main_activity.xml code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <FrameLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:orientation="vertical">
 
    </FrameLayout>
 
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_navigation"/>
 
</RelativeLayout>



Output

If you run the app, You will see the output as shown below. Notice that i have used drawable folders to change the colour or MenuItem on selection. By default, this feature is ON. So, you do not need extra code for these features.

Conclusion

Android Bottom Navigation View is one of the most useful support that can be used to navigate between top level view within an application. However, This should be used only when we have three to five top level view in our application. If you want, you can download the source code from link given above.

Recommended Posts

8 Comments

  1. ERICK KOGI KIMANI April 7, 2017

    how do i make the bottom navigation bar appear/disappear dynamically

  2. mahi September 19, 2017

    thanxs buddy helpful for me

  3. poke November 12, 2017

    thank you for clean code!

  4. Eduardo Dornel December 13, 2017

    Thanks!!!

Leave a Reply