Learn BottomNavigationView usage with fragments using simple step by step examples.

Example 1: Simple BottomNavigationView Example

This example project will teach you the following concepts:

  1. How to use BottomNavigation in a Java Android project.

Step 1: Create Project

The first step is to create a Android Project in Android Studio.

Step 2: Add Dependencies

No special dependencies are needed:

    implementation "androidx.appcompat:appcompat:$appCompat"
    implementation "com.google.android.material:material:$supportLibVer"

Step 3: Create Menus

Our bottom navigation view will comprise of BottomNavigationView items. Let’s put these menu items in a menu file:

Create a folder known as menu inside the res and add the following:

/res/menu/three_buttons_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:id="@+id/update_item"
      android:icon="@drawable/ic_update"
      android:title="Update"/>
  <item
      android:id="@+id/location_item"
      android:icon="@drawable/ic_location"
      android:title="Location"/>
  <item
      android:id="@+id/favorite_item"
      android:icon="@drawable/ic_favorite"
      android:title="Favorite"/>
</menu>

Step 4: Design Layouts

In our MainActivity layout add a BottomNavigationView component:

activity_main.xml

Attach the menu items to the BottomNavigationView using the app:menu attribute:

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="github.nisrulz.sample.bottomnavigationview.MainActivity"
    >

  <TextView
      android:id="@+id/textView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="Hello World!"
      android:textSize="25sp"
      android:layout_alignParentBottom="true"
      />

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottom_navigation"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      app:elevation="3dp"
      app:menu="@menu/three_buttons_bottom_menu"
      />
</RelativeLayout>

Step : Write Code

Here’s the full code:

MainActivity.java

import android.os.Bundle;
import androidx.annotation.NonNull;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import androidx.appcompat.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    final TextView textView = (TextView) findViewById(R.id.textView);

    // Declare and reference the bottom navigation view
    BottomNavigationView bottomNavigationView =
        (BottomNavigationView) findViewById(R.id.bottom_navigation);

    //Attach the listener
    bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
          @Override
          public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
              case R.id.update_item:
                textView.setText("Update Item Selected");
                break;
              case R.id.location_item:
                textView.setText("Location Item Selected");
                break;
              case R.id.favorite_item:
                textView.setText("Favorite Item Selected");
                break;
            }
            return true;
          }
        });
  }
}

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number Link
1. Download code
2. Follow code author

Example 2: BottomNavigationView with Fragments

This example project will teach you the following concepts:

  1. How to use BottomNavigationview
  2. How to switch connect BottomNavigationView to Fragments.

Step 1: Create Project

The first step is to create a Android Project in Android Studio.

Step 2: Add Dependencies

No external dependencies are needed.

Step 3: Design Layouts

Design layouts as follows:

(a). fragment_notification.xml

Simple fragment layout with a TextView:

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

    <TextView
        android:id="@+id/textViewNotification"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:drawableTop="@drawable/ic_notifications_black_24dp"
        android:gravity="center_horizontal"
        android:text="@string/title_notifications"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>

</RelativeLayout>

(ab. fragment_dashboard.xml

Will be inflated to Dashboard Fragment:

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

    <TextView
        android:id="@+id/textViewDashboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:drawableTop="@drawable/ic_dashboard_black_24dp"
        android:gravity="center_horizontal"
        android:text="@string/title_dashboard"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>

</RelativeLayout>

(c). fragment_home.xml

Will be inflated to Home Fragment

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

    <TextView
        android:id="@+id/textViewHome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:drawableTop="@drawable/ic_home_black_24dp"
        android:gravity="center_horizontal"
        android:text="@string/title_home"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>

</RelativeLayout>

(d). activity_main.xml

The MainActivity layout. Add FrameLayout and a BottomNavigationView widget:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/container"
    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"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation"/>

</LinearLayout>

Step 4: Create Fragments

There will be 3 fragments. Create them as follows:

(a). FragmentNotification.kt

Notification Fragment:

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

class FragmentNotification : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.fragment_notification, container, false)
    }
}

(b). FragmentDashboard.kt

Dashboard Fragment:

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

class FragmentDashboard : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.fragment_dashboard, container, false)
    }

}

(c). FragmentHome.kt

Home Fragment. From here arguments will be passed to other fragments via a Bundle:

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

class FragmentHome : Fragment() {

    /**
     * Initialize newInstance for passing parameters
     */
    companion object {
        fun newInstance(): FragmentHome {
            val fragmentHome = FragmentHome()
            val args = Bundle()
            fragmentHome.arguments = args
            return fragmentHome
        }

    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater!!.inflate(R.layout.fragment_home, container, false)
    }
}

Step 5: Cretae MainActivity

This is the activity that will host our Fragments:

MainActivity.kt

import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.fragment.app.Fragment
import androidx.appcompat.app.AppCompatActivity
import android.widget.FrameLayout

class MainActivity : AppCompatActivity() {

    private var content: FrameLayout? = null

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {

                val fragment = FragmentHome.Companion.newInstance()
                addFragment(fragment)

                [email protected] true
            }
            R.id.navigation_dashboard -> {
                val fragment = FragmentDashboard()
                addFragment(fragment)
                [email protected] true
            }
            R.id.navigation_notifications -> {
                val fragment = FragmentNotification()
                addFragment(fragment)
                [email protected] true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        content = findViewById(R.id.content)
        val navigation = findViewById<BottomNavigationView>(R.id.navigation)
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

        val fragment = FragmentHome.Companion.newInstance()
        addFragment(fragment)
    }

    /**
     * add/replace fragment in container [FrameLayout]
     */
    private fun addFragment(fragment: Fragment) {
        supportFragmentManager
                .beginTransaction()
                .setCustomAnimations(R.anim.design_bottom_sheet_slide_in, R.anim.design_bottom_sheet_slide_out)
                .replace(R.id.content, fragment, fragment.javaClass.simpleName)
                .commit()
    }
}

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number Link
1. Download code
2. Follow code author