This blog will explain how to create Navigation Bar at bottom of application in Android.

Bottom Navigation Bar

Android Bottom Navigation Bar is a navigation panel stays at bottom of application to navigate between top-level views in single tab. It should be used when application has three to five most important navigation views (It means important screens such as Home, Notification, Profile, Search, and Favorite).

Android has introduced BottomNavigationView component in Design Support Library of version 25 and later. In this blog we use BottomNavigationView and combine it with fragments. The maximum number of item can display in Bottom Navigation Bar is 5.

Prerequisites

  • Android Studio
  • Language Java

You have to have basic knowledge of creating application in Android Studio and Java language.

Please follow below steps to create Android Bottom Navigation Bar.

Step 1. Create Android Project with an empty Activity called MainActivity.  As we have created Activity, two files activity_main.xml and MainActivity.java will be created in its correspondent folders. See project structure given at end of this blog.

Step 2. This is a general setup step you have to do before starting a code.

1. Setup app/build.gradle file by adding com.android.support:design:25.1.1 design support library dependency. Please see below code to add dependencies. After adding dependencies Sync project. If you get error while adding and sync dependency. Download and install version 25 to solve it.

app/build.gradle

apply plugin: 'com.android.application'

  

android {

    compileSdkVersion 25

    buildToolsVersion "26.0.1"

  

    defaultConfig {

        applicationId "com.example.androidbottomnavigationbar"

        minSdkVersion 15

        targetSdkVersion 25

        versionCode 1

        versionName "1.0"

    }

    buildTypes {

        release {

            minifyEnabled false

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

        }

    }

}

  

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    testCompile 'junit:junit:4.12'

    compile 'com.android.support:appcompat-v7:25.1.1'

    compile 'com.android.support:design:25.1.1'     /* Add this dependency */

    compile 'com.android.support:support-v4:25.1.1'

}

2. Add color codes in values/colors.xml.

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="colorPrimary">#3F51B5</color>

    <color name="colorPrimaryDark">#303F9F</color>

    <color name="colorAccent">#FF4081</color>

    <color name="colorWhite">#FFFFFF</color>

</resources>

3. Add string in values/strings.xml.

values/strings.xml

<resources>

    <string name="app_name">AndroidBottomNavigationBar</string>

    <string name="navHome">Home</string>

    <string name="navFavoirte">Favoirte</string>

    <string name="navNotification">Notification</string>

    <string name="navProfile">Profile</string>

</resources>

4. Add all icons according to navigation bar in drawable folder. To add image in drawable folder copy image and paste it to drawable folder. Give name in small letters. You can see project structure for drawable given at the end of blog.

5. Add fragments to project according to menu of navigation bar. I will create three menus so I have added three fragments in project.

Step to add fragment: Right click on app folder (at top of project hierarchy) -> New-> Fragment-> Fragment (Blank). Give proper name click Finish button.

See below code for home fragment.

fragment_home.xml

<LinearLayout 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"

    android:background="#E5E8E8"

    android:gravity="center"

    android:orientation="vertical"

    tools:context=".Home">

  

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Home"

        android:textColor="@color/colorPrimaryDark"

        android:textSize="35dp"

        android:textStyle="bold" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello..!! You are in Home Fragment..!!"

        android:textColor="@color/colorPrimaryDark"

        android:textSize="16dp" />

  

</LinearLayout>

Home.java

package com.example.androidbottomnavigationbar;

  

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

  

public class Home extends Fragment {

  

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        /* Inflate the layout for this fragment */

        return inflater.inflate(R.layout.fragment_home, container, false);

    }

  

}

Please follow same step to create other fragments. 

The general setup steps are ending here. Following steps are for creating Bottom Navigation Bar.

Step 3. Now we have to create menu resource file bottomnavigatiomenu.xml to show menu in bottom bar.

Step to create xml Layout file for Menu: Right click to res folder->New->Layout resource file->Provide name and select menu from Resource type dropdown.

bottomnavigatiomenu.xml

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

  

    <item

        android:id="@+id/navHome"

        android:icon="@drawable/home24"

        android:title="@string/navHome" />

  

    <item

        android:id="@+id/navFavoirte"

        android:icon="@drawable/favorite24"

        android:title="@string/navFavoirte" />

  

    <item

        android:id="@+id/navNotification"

        android:icon="@drawable/notification24"

        android:title="@string/navNotification" />

  

</menu>

Step 4. Open activity_main.xml file and add android.support.design.widget.BottomNavigationView widget and FrameLayout. BottomNavigationView will show bottom bar and FramLayout is used to show fragment when user select item from bottom bar.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

  

    <FrameLayout

        android:id="@+id/replacableFrameLayout"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

  

    <android.support.design.widget.BottomNavigationView

        android:id="@+id/bottomNavigationView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        app:itemBackground="@color/colorPrimary"

        app:itemIconTint="@color/colorWhite"

        app:itemTextColor="@color/colorWhite"

        app:menu="@menu/bottomnavigatiomenu" />

  

</RelativeLayout>

Step 5. Now open MainActivity.java file and modify it by adding below code to show bottom navigation bar and to set OnNavigationItemSelectedListener which calls when the item selecting from bottom bar.

package com.example.androidbottomnavigationbar;

  

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.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.MenuItem;

import android.widget.Toast;

  

public class MainActivity extends AppCompatActivity {

  

    BottomNavigationView bottomNavigationView;

    Fragment fragment;

    FragmentManager fragmentManager;

  

    @Override

    protected void onCreate(Bundle savedInstanceState) {

  

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

  

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

  

        /* Setting home fragment to open when application run first time */

        HomeFragment();

  

        /* Setting item selection event of BottomNavigationView */

        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

            @Override

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                fragment = null;

                switch (item.getItemId()) {

                    case R.id.navHome:

                        fragment = new Home();

                        break;

                    case R.id.navFavoirte:

                        fragment = new Favorite();

                        break;

                    case R.id.navNotification:

                        fragment = new Notification();

                        break;

                    case R.id.navProfile:

                        fragment = new Profile();

                        break;

                    default:

                        Toast.makeText(MainActivity.this, "No Data", Toast.LENGTH_LONG).show();

                }

  

                setFragmentManager();

                return true;

            }

        });

  

    }

  

    /* Function to set first fragment */

    public void HomeFragment() {

        fragment = new Home();

        setFragmentManager();

    }

  

    /* Function to replace FrameLayout available in activity_main.xml file with fragment */

    public void setFragmentManager() {

        if (fragment != null) {

            fragmentManager = getSupportFragmentManager();

            fragmentManager.beginTransaction().replace(R.id.replacableFrameLayout, fragment).commit();

        }

    }

  

}

Your Project Structure may look like,

Step 6. Now run this application in AVD or in your mobile. The output screen shown below.

Note: If you add menu items more than three in bottomnavigatiomenu.xml, your Bottom Navigation Bar design will change. See below image where I have added four items in bottom bar.

To add more items in bottom bar you need to modify bottomnavigatiomenu.xml. Add new <item> in this file.

<item

    android:id="@+id/navProfile"

    android:icon="@drawable/profile24"

    android:title="@string/navProfile" />

Also when you add new item in xml file, you need to modify OnNavigationItemSelectedListener in MainActivity.java. Add new case in SwitchCase as per item having in bottomnavigatiomenu.xml, create fragment for item and set fragment for item in case.

case R.id.navProfile:

    fragment = new Profile();

    break;

After adding above code you will get four menus in Bottom Navigation Bar.

I hope you like this blog. If you have any query, please comment below. Thank You… :)