Bottom Navigation Bar in Android Studio using Java

Table of Contents

• Bottom Navigation Bar
• Step-by-Step Implementation
• Output

Bottom Navigation Bar

The Bottom Navigation Bar is a navigation view provided at the bottom of the screen making it easy for users to switch between multiple fragments or activities with the help of the bottom navigation bar.

We have provided four fragments – Home, Shorts, Subscriptions, and Library and one floating action button. Users can easily switch between any of these. You can use fragments or activities as per your choice.

Step-by-Step Implementation

Step 1: Open Android Studio, Create a New Project, Choose an Empty Activity, and Name the Project “Bottom Navigation”.

Step 2: Add all the vector assets to the drawable folder

Icons – home, add, subscriptions, library, whatshot.

Step 3: bottom_menu.xml

Right-click on res -> Android Resource Directory and select the menu then right-click on the menu directory and click on New -> Menu Resource File and name “bottom_menu”.

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

    <item
        android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/home"/>

    <item
        android:id="@+id/shorts"
        android:title="Info"
        android:icon="@drawable/info"/>

    <item
        android:id="@+id/fab"
        android:title=""
        android:enabled="false"/>

    <item
        android:id="@+id/subscriptions"
        android:title="Location"
        android:icon="@drawable/location"/>

    <item
        android:id="@+id/library"
        android:title="Settings"
        android:icon="@drawable/settings"/>

</menu>

Step 4: activity_main.xml

We have used a frame layout because it will replace the existing fragments with each other and make it possible for us to switch between different fragments.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
    android:background="@color/lavender"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frame_layout"/>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottomAppBar"
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="50dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bottomNavigationView"
            android:layout_marginEnd="20dp"
            app:labelVisibilityMode="labeled"
            android:background="@android:color/transparent"
            app:menu="@menu/bottom_menu"/>

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:src="@drawable/add"
        app:layout_anchor="@id/bottomAppBar"
        app:maxImageSize="40dp"
        app:tint ="@color/lavender"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 5: All Fragments

Create four fragments: HomeFragment, ShortsFragment, SubscriptionFragment, and LibraryFragment.

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"
    android:background="@color/lavender"
    tools:context=".HomeFragment">
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Home"
        android:gravity="center"
        android:textSize="30sp"
        android:textColor="@color/white"/>
</FrameLayout>

fragment_info.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"
    android:background="@color/lavender"
    tools:context=".InfoFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Info"
        android:gravity="center"
        android:textSize="30sp"
        android:textColor="@color/white"/>

</FrameLayout>

fragment_location.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"
    android:background="@color/lavender"
    tools:context=".LocationFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Location"
        android:gravity="center"
        android:textSize="30sp"
        android:textColor="@color/white"/>

</FrameLayout>

fragment_settings.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"
    android:background="@color/lavender"
    tools:context=".SettingsFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Settings"
        android:gravity="center"
        android:textSize="30sp"
        android:textColor="@color/white"/>

</FrameLayout>

Clear all unnecessary code from all the Fragments.java – HomeFragment, ShortsFragment, SubscriptionFragment, and LibraryFragment. Just Kepp "OnCreateView" function.

Step 6: MainActivity.java

package com.example.bottomnavigation;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.widget.FrameLayout;
import android.widget.Toast;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView;
    private FrameLayout frameLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        bottomNavigationView = findViewById(R.id.bottomNavigationView);
        frameLayout = findViewById(R.id.frame_layout);

        replaceFragment(new HomeFragment());


        bottomNavigationView.setBackground(null);

        bottomNavigationView.setOnItemSelectedListener(item -> {
            if (item.getItemId() == R.id.home) {
                replaceFragment(new HomeFragment());
            } else if (item.getItemId() == R.id.shorts) {
                replaceFragment(new InfoFragment());
            } else if (item.getItemId() == R.id.subscriptions) {
                replaceFragment(new LocationFragment());
            } else if (item.getItemId() == R.id.library) {
                replaceFragment(new SettingsFragment());
            } else {
                return false;
            }

            return true;
        });
    }
    private void replaceFragment(Fragment fragment) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.frame_layout, fragment);
        fragmentTransaction.commit();
    }
}

Output