Complete Guide to Implementing Bottom Navigation Bar with Android BottomNavigationView

Introduction

With the widespread adoption of Material Design language, bottom navigation bars have become a standard navigation pattern in modern Android applications. Google officially introduced the BottomNavigationView component in Android Support Library v25, providing developers with an official implementation of bottom navigation solutions. This article will delve into the complete usage process of BottomNavigationView, from basic configuration to advanced features.

Dependency Configuration

Before using BottomNavigationView, ensure that the project has correctly added relevant dependencies. For traditional Support Library projects, add the following to the build.gradle file:

compile 'com.android.support:design:25.0.0'

For modern projects using AndroidX, use:

implementation 'com.google.android.material:material:1.2.0-alpha01'

After updating dependencies, you can use the BottomNavigationView component in layout files.

Layout Design

The XML layout configuration for BottomNavigationView is relatively simple, but attention should be paid to its position and style attributes. Here is a typical layout example:

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

    <!-- Main content container -->

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Key attribute explanations:

• app:menu: Specifies the menu resource for bottom navigation
• app:itemIconTint: Sets the color state selector for icons
• app:itemTextColor: Sets the color state selector for text
• app:itemBackground: Sets the background color for items

Menu Resource Creation

Bottom navigation menu items are defined through XML menu resource files, typically placed in the res/menu directory:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

Each menu item includes an icon, title, and unique identifier. app:showAsAction="ifRoom" ensures that titles are displayed when there is sufficient space.

State Selector Implementation

To provide good visual feedback, color selectors need to be defined for different states of navigation items. Create a color selector resource file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:state_checked="true"
      android:color="@color/colorPrimary" />
  <item
      android:state_checked="false"
      android:color="@color/grey" />
</selector>

This selector defines different colors for selected and unselected states, using the primary color when selected and gray when unselected.

Event Handling

Handling click events for bottom navigation in the Activity is core to implementing navigation functionality:

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

bottomNavigationView.setOnNavigationItemSelectedListener(
    new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.action_favorites:
                    // Handle favorites click event
                    showFavoritesFragment();
                    break;
                case R.id.action_schedules:
                    // Handle schedules click event
                    showSchedulesFragment();
                    break;
                case R.id.action_music:
                    // Handle music click event
                    showMusicFragment();
                    break;
            }
            return true; // Return true to indicate event is handled
        }
});

By setting OnNavigationItemSelectedListener, you can capture user navigation selections and execute corresponding interface switching logic.

AndroidX Migration

For projects using AndroidX, the package name and some APIs of BottomNavigationView have changed:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_gravity="bottom"
            app:menu="@menu/bottom_navigation_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</FrameLayout>

The main change is that the component class name has changed from android.support.design.widget.BottomNavigationView to com.google.android.material.bottomnavigation.BottomNavigationView.

Best Practices

When using BottomNavigationView, it is recommended to follow these best practices:

• Limit the number of navigation items to 3-5 to avoid overcrowding the interface
• Provide clear icons and labels for each navigation item
• Use Fragments to manage content for different navigation pages
• Consider layout adaptation in landscape mode
• Test display effects on different screen sizes

Conclusion

BottomNavigationView provides Android developers with a standardized implementation of bottom navigation that follows Material Design guidelines. Through reasonable configuration and usage, you can create navigation interfaces that are both aesthetically pleasing and practical. As the Android ecosystem continues to evolve, it is recommended that new projects directly adopt the AndroidX version of Material Components library to obtain better compatibility and richer feature sets.