Android BottomNavigationView Kotlin

Android BottomNavigationView Represents a standard bottom navigation bar for application. It is an implementation of  material design bottom navigation Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap.They should be used when an application has three to five top-level destinations .

While Creating New Project In Android Studio  File > New Project . Select a Project Template "Bottom Navigation Activity" 

1. MENU

The BottomNavigationView bar contents can be populated by specifying a menu resource file. Each menu item title,icon and enabled state will be used for displaying bottom navigation bar items. Menu items can also be used for pragmatically selecting which destination is currently active.  

 
file : 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/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

2. Drawable

Place Drawable inside res/drawable 

https://github.com/TutorialsBuzz/BottomNavMenu/tree/master/app/src/main/res/drawable 

3. XML Layout

Main layout contains BottomNavigationView and fragment .

1. The Above defined menu is set to BottomNavigationView .

2. Fragment is set to NavHostFragment  and mapped to below defined navigation graph  .

file : 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

XML Layout for each fragment .

https://github.com/TutorialsBuzz/BottomNavMenu/tree/master/app/src/main/res/layout

       

The below diagram is very explaintory how BottomNavigationView is mapped to menu with navigation graph .

4. NavigationGraph

•  NavHostFragment provides an area within your layout for self-contained navigation to occur .
•  NavHostFragment is intended to be used as the content area within a layout resource .
•  NavHostFragment has NavController  that defines valid navigation within Navigation host .

file : res/navigation/mobile_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation
    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:id="@+id/mobile_navigation"
    app:startDestination="@+id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.tutorialsbuzz.bottomnavexample.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.tutorialsbuzz.bottomnavexample.ui.dashboard.DashboardFragment"
        android:label="@string/title_dashboard"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.tutorialsbuzz.bottomnavexample.ui.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications" />
        
</navigation>

5. Activity

1. Get the reference of BottomNavigationView and call setupWithNavController by passing NavHostFragment instance .

val navController = findNavController(R.id.nav_host_fragment)
navView.setupWithNavController(navController)

2. Update ActionBar title when there is navigation , just call setupActionBarWithNavController by passing navController and appBarConfiguration instance. 

val appBarConfiguration = AppBarConfiguration(setOf(
	R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications))
setupActionBarWithNavController(navController, appBarConfiguration)

MainActivity Full code

file : MainActivity.kt

package com.tutorialsbuzz.bottomnavexample

import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        val navController = findNavController(R.id.nav_host_fragment)
        navView.setupWithNavController(navController)

        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        val appBarConfiguration = AppBarConfiguration(setOf(
            R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications))
        setupActionBarWithNavController(navController, appBarConfiguration)
    }
}

DOWNLOAD CODE