How to Use Bottom Navigation in Android: Simple Guide

To use BottomNavigationView in Android, add it to your layout XML and connect it with a NavController to handle navigation between fragments. Use the Navigation Component library for easy setup and smooth transitions.

Syntax

The BottomNavigationView is a UI component from Material Design that shows navigation items at the bottom of the screen. You define it in your layout XML and link it with a NavController to switch between different screens.

Key parts:

• BottomNavigationView: The bar with icons and labels.
• menu: XML file defining navigation items.
• NavController: Manages navigation actions.
• Navigation Graph: XML defining app destinations.

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

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/nav_graph"
        app:defaultNavHost="true" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu" />

</RelativeLayout>

Output

A screen with a fragment container filling most of the screen and a bottom navigation bar with menu items at the bottom.

Example

This example shows a simple Android activity with BottomNavigationView linked to a NavController. It switches between three fragments when you tap the bottom icons.

kotlin + xml

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

        val navController = findNavController(R.id.nav_host_fragment)
        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_navigation)

        bottomNav.setupWithNavController(navController)
    }
}

// bottom_nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/dashboardFragment"
        android:icon="@drawable/ic_dashboard"
        android:title="Dashboard" />
    <item
        android:id="@+id/notificationsFragment"
        android:icon="@drawable/ic_notifications"
        android:title="Notifications" />
</menu>

Output

App screen with bottom navigation bar showing Home, Dashboard, and Notifications icons; tapping each changes the displayed fragment.

Common Pitfalls

Common mistakes when using bottom navigation include:

• Not setting app:defaultNavHost="true" on the NavHostFragment, causing back button issues.
• Forgetting to call setupWithNavController(), so taps don't navigate.
• Using too many items (more than 5), which breaks Material Design guidelines.
• Not providing unique IDs in the menu XML, causing navigation conflicts.

xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Wrong: Missing defaultNavHost -->
<fragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph" />

<!-- Right: Add defaultNavHost to handle back button -->
<fragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

Quick Reference

Tips for using Bottom Navigation in Android:

• Use 3-5 menu items for clarity.
• Use Navigation Component for easy fragment management.
• Set app:defaultNavHost="true" on NavHostFragment.
• Call setupWithNavController() to link navigation.
• Use Material icons for consistent look.

Key Takeaways

Use BottomNavigationView with Navigation Component for smooth screen switching.

Always set app:defaultNavHost="true" on NavHostFragment to handle back navigation.

Keep bottom navigation menu items between 3 and 5 for best user experience.

Call setupWithNavController() to connect BottomNavigationView with NavController.

Define unique IDs and icons in menu XML for each navigation item.