Bottom navigation bar in Android Kotlin

Introduction

A bottom navigation bar helps users switch between main sections of an app quickly. It stays at the bottom of the screen for easy access.

When your app has 3 to 5 main sections or pages.

When you want users to switch between sections without going back.

When you want a simple and clear way to navigate on small screens.

When you want to keep navigation visible but not take much space.

When you want to follow common mobile design patterns for easy use.

Syntax

Android Kotlin

val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigationView.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.home -> {
            // Handle home click
            true
        }
        R.id.search -> {
            // Handle search click
            true
        }
        else -> false
    }
}

Use BottomNavigationView from the Material Components library.

Set an OnItemSelectedListener to respond when users tap items.

Examples

Basic listener to switch between two sections: home and profile.

Android Kotlin

bottomNavigationView.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.home -> {
            // Show home screen
            true
        }
        R.id.profile -> {
            // Show profile screen
            true
        }
        else -> false
    }
}

XML layout for the bottom navigation bar linking to a menu resource.

Android Kotlin

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

Sample App

This app shows a bottom navigation bar with three items. When you tap an item, a small message appears at the bottom.

Android Kotlin

package com.example.bottomnav

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomnavigation.BottomNavigationView
import android.widget.Toast

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

        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation)

        bottomNavigationView.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.home -> {
                    Toast.makeText(this, "Home selected", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.dashboard -> {
                    Toast.makeText(this, "Dashboard selected", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.notifications -> {
                    Toast.makeText(this, "Notifications selected", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> false
            }
        }
    }
}

Important Notes

Make sure to add the Material Components library in your build.gradle file.

Define your menu items in a separate XML file under res/menu for easy management.

Use icons and labels that clearly describe each section for better user experience.

Summary

Bottom navigation bars help users switch between main app sections easily.

Use BottomNavigationView with a menu resource and set a listener for item taps.

Keep the number of items between 3 and 5 for best usability.