Android Bottom Navigation View Example

In this tutorial, we are going to learn how to create android bottom navigation view using the design support library in android.

Android Bottom Navigation View is another way to navigate through related pages in your android application. It is suited to navigate between 3 to 5 pages. If you are planning to add more than 5 different Activity or Fragment pages in your top-level destination, it is highly recommended to use Android Navigation Drawer.

You can as well use Android Tab for 1 or 2 top-level destination. In order to design efficient android Bottom Navigation View that follows android material design principles, I will suggest you read Google User Guide for Bottom Navigation View in android.

Before the new version of the android design support library V25, there are many issues that developers face when working with android Bottom Navigation View. This has resulted to using different third party libraries to overcome the problems.

If you are interested to learn how to implement android Tab and Navigation drawer, you can read my tutorials on these topics.

So we are going to use the Android Support Library v25 in this tutorial to implement android Bottom Navigation View.

In other to get access to Android Bottom Navigation View, we are going to update our project app build.gradleย file.

Also, we will make use of 3 Fragment classes that will be associated to each menu.

In other to get a visual understanding of what we are going to create in this android tutorial, I have add below some screen shots from the application.

 

SOME SCREENSHOT FROM THE APPLICATION

Android Bottom Navigation View

 

CREATE NEW ANDROID PROJECT

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 10

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 24

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidBottomNavigationView

Package: com.inducesmile.androidbottomnavigationview

Select Empty Activity

Name your activity: MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

Now that we have created our android project, if you are not using targetSdkVersion 25, you can update your android SDK version to 25.

 

Build.Gradle

Open your android project build.gradle(module) and add the following dependencies to it.

compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:design:25.0.0'

Now the complete code in the page will look like below.

apply plugin: 'com.android.application'
android {
    compileSdkVersion 25
    buildToolsVersion "24.0.1"
    defaultConfig {
        applicationId "com.inducesmile.androidbottomnavigationview"
        minSdkVersion 14
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'
    compile 'com.android.support:support-v4:25.0.0'
    testCompile 'junit:junit:4.12'
}

 

STRINGS.XML

We are going to update our project strings.xml file located in the values folder inside the res folder. Open the file and add the code below to it.

<resources>
    <string name="app_name">Android Bottom Navigation View</string>
    <string name="menu">Menu</string>
    <string name="action_search">Search</string>
    <string name="action_cart">Cart</string>
    <string name="action_hot_deals">Hot deals</string>
    <!-- TODO: Remove or change this placeholder text -->
    <string name="hello_blank_fragment">Hello blank fragment</string>
    <string name="search_fragment">Search Fragment</string>
    <string name="cart_fragment">Cart Fragment</string>
    <string name="hot_deals_fragment">Hot Deals Fragment</string>
</resources>

 

COLORS.XML

Open the colors.xml file in the same location as the strings.xml file and add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#56B900</color>
    <color name="colorPrimaryDark">#289C2B</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorPrimaryLight">#84FF19</color>
    <color name="colorWhite">#ffffff</color>
    <color name="colorBlack">#000000</color>
    <color name="colorDivider">#2FE897</color>
    <color name="colorBorder">#a7a4a4</color>
    <color name="colorExtra">#fffac1</color>
</resources>

 

Create Activity Class

activity_main.xml

Lets open that activity_main.xml layout file located at the res/layout folder. We are going to add BottomNavigationView widget to the layout View group. In order to display a different Fragment depending on which menu of the Bottom Navigation View is clicked, we will add a Framelayout that will hold the Fragment class.

Add the code below to the layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.inducesmile.androidbottomnavigationview.MainActivity">
    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">
    </FrameLayout>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/color_state_list"
        app:itemTextColor="@color/color_state_list"
        android:layout_alignParentBottom="true">
    </android.support.design.widget.BottomNavigationView>
</RelativeLayout>

 

MainActivity Class

The MainActivity class will use the activity_main.xml layout file we create above to create its UI interface.

You will see in the onCreate() method of the Activity Class, that setContentView(R.layout.activity_main);has been called.

To get the instance of our BottomNavigationView, we will use the findViewById() method of the Activity class.

The create instance will call the inflateMenu() method of its class to inflate a menu it will use as its interface. We are going to create the menu UI soon.

The next step is to wire an event listener to the BottonNavigationView that will monitor when each menu item is selected.

Finally, will create an instance of a Fragment class depending of which menu is selected and replace the FrameLayout with the Fragment instance.

Open the MainActivity.java class and add the code below to it.

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    private BottomNavigationView bottomNavigation;
    private Fragment fragment;
    private FragmentManager fragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigation = (BottomNavigationView)findViewById(R.id.bottom_navigation);
        bottomNavigation.inflateMenu(R.menu.bottom_menu);
        fragmentManager = getSupportFragmentManager();
        bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();
                switch (id){
                    case R.id.action_search:
                        fragment = new SearchFragment();
                        break;
                    case R.id.action_cart:
                        fragment = new CartFragment();
                        break;
                    case R.id.action_hot_deals:
                        fragment = new DealsFragment();
                        break;
                }
                final FragmentTransaction transaction = fragmentManager.beginTransaction();
                transaction.replace(R.id.main_container, fragment).commit();
                return true;
            }
        });
    }
}

 

Create Menu for Bottom Navigation View

bottom_menu.xml

We are going to create a menu resource layout file. As stated in the MainActivity class, the instance of the BottomNavigationView inflates a menu layout.

Under the res folder of your project, create a menu folder if it does not exist. Inside the menu folder, create a menu resource file and name it bottom_menu.xml.

Open the file and add the code below.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:title="@string/action_search"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_action_menu">
    </item>
    <item
        android:id="@+id/action_cart"
        android:title="@string/action_cart"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_action_menu">
    </item>
    <item
        android:id="@+id/action_hot_deals"
        android:title="@string/action_hot_deals"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_action_menu">
    </item>
    
</menu>

 

Create Fragment Classes

We are going to create three different Fragment classes DealsFragment.java, CartFragment.java and SearchFragment.java.

Each of this Fragments will display their names when they are selected by click a BottomNavigationView menu item.

Their implementation is very simple but feel free to extend it according to your project requirements.

 

DealsFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class DealsFragment extends Fragment {
    public DealsFragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_deals, container, false);
    }
}

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.inducesmile.androidbottomnavigationview.DealsFragment">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hot_deals_fragment"
        android:textStyle="bold"
        android:layout_gravity="center"/>
</FrameLayout>

 

CartFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CartFragment extends Fragment {
    public CartFragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_cart, container, false);
    }
}


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.inducesmile.androidbottomnavigationview.CartFragment">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cart_fragment"
        android:textStyle="bold"
        android:layout_gravity="center"/>
</FrameLayout>

 

SearchFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SearchFragment extends Fragment {
    public SearchFragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        return view;
    }
}

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.inducesmile.androidbottomnavigationview.SearchFragment">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textStyle="bold"
        android:text="@string/search_fragment" />
</FrameLayout>

This brings us to the end of this tutorial. I hope that you have learn something. Run your app and see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorial, kindly contact me.

Remember to subscribe with your email address to be among the first to receive my new android blog post once it is published.

5 Comments

    • Inducesmile
    • Inducesmile

Add a Comment