Bottom Navigation Bar Android Example

Bottom Navigation Bar is a material component that makes it easy to explore and switch between the top-level view in single click or tap. So in this android tutorial, you’ll learn how to create a bottom navigation bar in Android. You’ll learn also how to display menu items inside a bottom navigation bar? Let get started.

When you should use bottom navigation bar in your app

• Destinations requiring direct access
• Three to five top-level destinations

Let’s take example of some popular app that implements the bottom navigation bar such as google plus android app which uses to different screen of the app.

Prerequisites

I this post, We’ll use BottomNavigationView material component to perform the task. Additionally, I’ll create an Android Studio sample app in java to quickly bootstrap your project with a bottom navigation bar.  To be able to follow this tutorial, you’ll need

• Android Studio 3.0 or higher
• Kotlin plugin 1.1.51 or higher

BottomNavigationBar example app

Implementation step of Bottom Navigation Bar

• Create an Android Studio Project
• Adding the BottomNavigationView
•  Creates menu items for the bottom navigation bar
• Initialization of Components
• Configuring Click Events
• Creating the Fragments
• Launching the Fragments

1. Create an Android Studio Project

Let’s open the Android Studio and create a new project, (put the name you want, I’m taking here BottomNavigation View) with empty activity template. Make sure you create project with androidx support lib.

2. Adding the BottomNavigationView

To begin using BottomNavigationView in the project, make sure you have added material io dependencies in your app/build.gradle file

   implementation 'com.google.android.material:material:1.1.0-alpha10'

Now open res/layout/activlty_main.xml file to add the BottomNavigationView widget. In this layout file you have to add one FrameLayout. It will serve as a container for the different fragments.

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/container"
      >

    <!-- Main content -->

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_menu"
        />

  </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 3. Creates menu items for the bottom navigation bar

For including the menu items for the bottom navigation bar create a menu file inside the  res/menu/ bottom_navigation_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:id="@+id/navigation_home"
      android:icon="@drawable/ic_home"
      android:title="Home" />

  <item
      android:id="@+id/navigation_sms"
      android:icon="@drawable/ic_sms"
      android:title="SMS" />

  <item
      android:id="@+id/navigation_notifications"
      android:icon="@drawable/ic_notifications"
      android:title="Notification" />
</menu>

In this menu file, we are using Menu which serves as a container for menu items. A creates a MenuItem, which represents a single item in a menu. As you can see, each has a title, an icon, and id.

4. Initialization of Components

Next, we are going to initialize an instance of BottomNavigationView Initialization is going to happen inside the activity onCreate methods.

  BottomNavigationView bottomNavigation;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    bottomNavigation = findViewById(R.id.bottom_navigation);
   
  }

5. Configuring Click Events

BottomNavigationView.OnNavigationItemSelectedListener navigationItemSelectedListener =
      new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) {
          switch (item.getItemId()) {
            case R.id.navigation_home:
              openFragment(HomeFragment.newInstance("", ""));
              return true;
            case R.id.navigation_sms:
              openFragment(SmsFragment.newInstance("", ""));
              return true;
            case R.id.navigation_notifications:
              openFragment(NotificationFragment.newInstance("", ""));
              return true;
          }
          return false;
        }
      };

6. Creating the Fragments

HomeFragment.java

package com.bottomnavigationview.fragments;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.bottomnavigationview.R;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link HomeFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class HomeFragment extends Fragment {
  // TODO: Rename parameter arguments, choose names that match
  // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
  private static final String ARG_PARAM1 = "param1";
  private static final String ARG_PARAM2 = "param2";

  // TODO: Rename and change types of parameters
  private String mParam1;
  private String mParam2;

  public HomeFragment() {
    // Required empty public constructor
  }

  /**
   * Use this factory method to create a new instance of
   * this fragment using the provided parameters.
   *
   * @param param1 Parameter 1.
   * @param param2 Parameter 2.
   * @return A new instance of fragment HomeFragment.
   */
  // TODO: Rename and change types and number of parameters
  public static HomeFragment newInstance(String param1, String param2) {
    HomeFragment fragment = new HomeFragment();
    Bundle args = new Bundle();
    args.putString(ARG_PARAM1, param1);
    args.putString(ARG_PARAM2, param2);
    fragment.setArguments(args);
    return fragment;
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
      mParam1 = getArguments().getString(ARG_PARAM1);
      mParam2 = getArguments().getString(ARG_PARAM2);
    }
  }

  @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);
  }
}

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".fragments.HomeFragment"
    >


  <ImageView
      android:id="@+id/imageView"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:layout_gravity="center"
      android:src="@drawable/ic_home"
      />
</FrameLayout>

NotificationFragment.java

package com.bottomnavigationview.fragments;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.bottomnavigationview.R;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link NotificationFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class NotificationFragment extends Fragment {
  // TODO: Rename parameter arguments, choose names that match
  // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
  private static final String ARG_PARAM1 = "param1";
  private static final String ARG_PARAM2 = "param2";

  // TODO: Rename and change types of parameters
  private String mParam1;
  private String mParam2;

  public NotificationFragment() {
    // Required empty public constructor
  }

  /**
   * Use this factory method to create a new instance of
   * this fragment using the provided parameters.
   *
   * @param param1 Parameter 1.
   * @param param2 Parameter 2.
   * @return A new instance of fragment NotificationFragment.
   */
  // TODO: Rename and change types and number of parameters
  public static NotificationFragment newInstance(String param1, String param2) {
    NotificationFragment fragment = new NotificationFragment();
    Bundle args = new Bundle();
    args.putString(ARG_PARAM1, param1);
    args.putString(ARG_PARAM2, param2);
    fragment.setArguments(args);
    return fragment;
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
      mParam1 = getArguments().getString(ARG_PARAM1);
      mParam2 = getArguments().getString(ARG_PARAM2);
    }
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_notification, container, false);
  }
}

fragment_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".fragments.NotificationFragment"
    >


  <ImageView
      android:id="@+id/imageView"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:layout_gravity="center"
      android:src="@drawable/ic_notifications"
      />
</FrameLayout>

SmsFragment.java

package com.bottomnavigationview.fragments;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.bottomnavigationview.R;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link SmsFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class SmsFragment extends Fragment {
  // TODO: Rename parameter arguments, choose names that match
  // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
  private static final String ARG_PARAM1 = "param1";
  private static final String ARG_PARAM2 = "param2";

  // TODO: Rename and change types of parameters
  private String mParam1;
  private String mParam2;

  public SmsFragment() {
    // Required empty public constructor
  }

  /**
   * Use this factory method to create a new instance of
   * this fragment using the provided parameters.
   *
   * @param param1 Parameter 1.
   * @param param2 Parameter 2.
   * @return A new instance of fragment SmsFragment.
   */
  // TODO: Rename and change types and number of parameters
  public static SmsFragment newInstance(String param1, String param2) {
    SmsFragment fragment = new SmsFragment();
    Bundle args = new Bundle();
    args.putString(ARG_PARAM1, param1);
    args.putString(ARG_PARAM2, param2);
    fragment.setArguments(args);
    return fragment;
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
      mParam1 = getArguments().getString(ARG_PARAM1);
      mParam2 = getArguments().getString(ARG_PARAM2);
    }
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_sms, container, false);
  }
}

fragment_sms.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".fragments.SmsFragment"
    >


  <ImageView
      android:id="@+id/imageView"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:layout_gravity="center"
      android:src="@drawable/ic_sms"
      />

</FrameLayout>

7. Launching the Fragments

  public void openFragment(Fragment fragment) {
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.container, fragment);
    transaction.addToBackStack(null);
    transaction.commit();
  }

The full source code of the MainActivity is below

package com.bottomnavigationview;

import android.os.Bundle;
import android.view.MenuItem;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import com.bottomnavigationview.fragments.HomeFragment;
import com.bottomnavigationview.fragments.NotificationFragment;
import com.bottomnavigationview.fragments.SmsFragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

  BottomNavigationView bottomNavigation;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    bottomNavigation = findViewById(R.id.bottom_navigation);
    bottomNavigation.setOnNavigationItemSelectedListener(navigationItemSelectedListener);
    openFragment(HomeFragment.newInstance("", ""));
  }

  public void openFragment(Fragment fragment) {
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.container, fragment);
    transaction.addToBackStack(null);
    transaction.commit();
  }

  BottomNavigationView.OnNavigationItemSelectedListener navigationItemSelectedListener =
      new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) {
          switch (item.getItemId()) {
            case R.id.navigation_home:
              openFragment(HomeFragment.newInstance("", ""));
              return true;
            case R.id.navigation_sms:
              openFragment(SmsFragment.newInstance("", ""));
              return true;
            case R.id.navigation_notifications:
              openFragment(NotificationFragment.newInstance("", ""));
              return true;
          }
          return false;
        }
      };
}

Conclusion

In this article, we learned how to create a bottom navigation bar in Android using BottomNavigationView. We also create a sample application that gives the clarity of bottom navigation implementation.

I would like to recommend you have to read official material design guidelines for bottom navigation bar.

If you have any queries, feel free to ask them in the comment section below. Happy Coding 

• Navigation Architecture Component in Android
• Android Architecture Components
• Retrofit Error Handling Android in Single Place
• Android Snackbar Example
• Android TextView enable Copy Paste