How to Implement Bottom Navigation with Fragments in Android

Bottom Navigation is one of the most widely used navigation patterns in modern Android applications.

Applications like:

• Instagram
• YouTube
• Spotify
• Facebook
• WhatsApp

all use bottom navigation for switching between major sections of the app.

In this tutorial, we will learn how to create a Bottom Navigation system in Android using:

• BottomNavigationView
• Fragments
• Fragment transactions
• AndroidX libraries
• Modern Material Design components

---

What We Will Build

In this Android example:

• Create BottomNavigationView
• Add 3 navigation tabs
• Switch between Fragments
• Use FragmentManager
• Preserve selected tab during rotation

---

Why Use Bottom Navigation?

Bottom Navigation improves:

• User experience
• App navigation
• Accessibility
• Mobile usability

It is best suited for applications with:

• 3 to 5 primary sections
• Frequently accessed screens
• Simple navigation hierarchy

---

Step 1 — Add Material Dependency

Inside:

build.gradle

Add:

implementation
"com.google.android.material:material:1.11.0"

---

Step 2 — Create Menu Resource

Create:

res/menu/bottom_navigation.xml

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

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

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

    <item
        android:id="@+id/nav_favorites"
        android:icon="@drawable/ic_favorite"
        android:title="Favorites"/>

    <item
        android:id="@+id/nav_search"
        android:icon="@drawable/ic_search"
        android:title="Search"/>

</menu>

---

Step 3 — Create activity_main.xml

Create:

res/layout/activity_main.xml

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

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragment_container"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toTopOf=
        "@id/bottom_navigation"

        app:layout_constraintStart_toStartOf=
        "parent"

        app:layout_constraintEnd_toEndOf=
        "parent"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView

        android:id="@+id/bottom_navigation"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:background="?android:attr/windowBackground"

        app:menu="@menu/bottom_navigation"

        app:layout_constraintBottom_toBottomOf=
        "parent"

        app:layout_constraintStart_toStartOf=
        "parent"

        app:layout_constraintEnd_toEndOf=
        "parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

---

Step 4 — Create Home Fragment Layout

Create:

res/layout/fragment_home.xml

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background=
    "@android:color/holo_red_light">

    <TextView
        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Home Fragment"

        android:textSize="30sp"

        android:layout_centerInParent="true"/>

</RelativeLayout>

---

Step 5 — Create HomeFragment.java

package com.example.bottomnavigation;

import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment
        extends Fragment {

    @Nullable
    @Override
    public View onCreateView(
            @NonNull LayoutInflater inflater,
            @Nullable ViewGroup container,
            @Nullable Bundle savedInstanceState
    ) {

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

---

Step 6 — Create Favorites Fragment

Create:

fragment_favorites.xml
FavoritesFragment.java

Update text and background accordingly.

---

Step 7 — Create Search Fragment

Create:

fragment_search.xml
SearchFragment.java

Update text and background accordingly.

---

Step 8 — Create MainActivity.java

package com.example.bottomnavigation;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import android.os.Bundle;
import android.view.MenuItem;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity
        extends AppCompatActivity {

    @Override
    protected void onCreate(
            Bundle savedInstanceState
    ) {

        super.onCreate(savedInstanceState);

        setContentView(
                R.layout.activity_main
        );

        BottomNavigationView bottomNav =
                findViewById(
                        R.id.bottom_navigation
                );

        bottomNav.setOnItemSelectedListener(
                navListener
        );

        if (savedInstanceState == null) {

            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(
                            R.id.fragment_container,
                            new HomeFragment()
                    )
                    .commit();
        }
    }

    private final
    BottomNavigationView.OnItemSelectedListener
            navListener =
            new BottomNavigationView
                    .OnItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(
                @NonNull MenuItem item
        ) {

            Fragment selectedFragment =
                    null;

            int id = item.getItemId();

            if (id == R.id.nav_home) {

                selectedFragment =
                        new HomeFragment();

            } else if (
                    id == R.id.nav_favorites
            ) {

                selectedFragment =
                        new FavoritesFragment();

            } else if (
                    id == R.id.nav_search
            ) {

                selectedFragment =
                        new SearchFragment();
            }

            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(
                            R.id.fragment_container,
                            selectedFragment
                    )
                    .commit();

            return true;
        }
    };
}

---

How This Bottom Navigation Works

The workflow is:

1. User taps navigation item
2. Listener detects selected menu
3. Corresponding Fragment is created
4. FragmentTransaction replaces container
5. Selected screen becomes visible

---

Why Use Fragments with Bottom Navigation?

Fragments improve:

• Navigation flexibility
• Screen reusability
• Memory efficiency
• Large-screen support

---

Modern Android Recommendations

Modern Android applications now prefer:

• Navigation Component
• Jetpack Compose Navigation
• Single Activity Architecture
• ViewBinding
• MVVM Architecture

---

BottomNavigationView vs Navigation Component

Classic Fragment Navigation	Navigation Component
Manual fragment transactions	Automatic navigation handling
More boilerplate code	Cleaner architecture
Basic implementation	Modern recommended approach

---

Common Beginner Mistakes

1. Using Old Support Libraries

Always use:

androidx

instead of deprecated:

android.support

---

2. Recreating Fragments Repeatedly

Large applications should cache fragments for better performance.

---

3. Forgetting savedInstanceState Check

Without:

if (savedInstanceState == null)

Fragments may overlap during screen rotation.

---

Advanced Improvements

• Add badges
• Use animations
• Integrate ViewPager2
• Add deep linking
• Use Safe Args
• Implement shared ViewModel

---

FAQ

How many items should Bottom Navigation contain?

Material Design recommends 3 to 5 navigation items.

Should Bottom Navigation use Activities or Fragments?

Fragments are preferred for modern Android applications.

What is the modern recommended navigation system?

Navigation Component with Single Activity Architecture is recommended for scalable Android applications.

---

Conclusion

Bottom Navigation provides a clean and user-friendly navigation experience for Android applications.

Using BottomNavigationView with Fragments allows developers to build scalable multi-screen applications with smooth navigation.

Modern Android applications should combine Bottom Navigation with Navigation Component, lifecycle-aware architecture, and Material Design principles for production-grade navigation systems.

---

About the Author

Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.

CodeChain Dev — Build Modern Products. Solve Real Problems.