Bottom Navigation View using Navigation Component with Badge…

The bottom navigation is the most common usage in the android app for navigation.The best way to navigate to the desired screen/Activity can be accomplished using it.

To start, Goto a new project in the android studio and select the Empty activity.

Once the project is syncronized. Goto the (app level) build.gradle file

We gonna use the Material Theme Design for creating the bottom navigation.To implement, first add the dependencies in the build.gradle file

implementation 'com.google.android.material:material:1.5.0'

To use the navigation component add the following dependencies and sync it.

def navigation_version = "2.3.0"
implementation "androidx.navigation:navigation-fragment-ktx:$navigation_version"
implementation "androidx.navigation:navigation-ui-ktx:$navigation_version"

To use the bottom navigation in activity one need the container . a container to hold your fragment and layout. In android, FragmentContainerView is a advance type of container to hold the fragment and layout.

You can use the normal <fragment> which also work fine.

The Navigation Component provide the additional capacity to use the Navigation graph which is super easy to create and use it.

app:navGraph="@navigation/nav_host"

we need to create a navigation graph for the container. Firstly, create a simple fragment that need to display on the container. Then, in the res directory right click and select the Android Resource Directory and select the navigation as shown in the pic below.

Once the navigation is done create a file nav_host.xml in the navigation folderand insert the fragment that were create using the + plus icon in the view as show in the pic below.

and the code will look like this.

So far so good… we have successfully created the navigation graph. Now implement the bottom navigation in the activity_main.xml. add the following

app:menu="@menu/nav_menu"

Now, to access the graph we need to create a menu that will display in our Bottom Navigation View.To create a menu, goto the res folder right click and select the Android Resource Directory and create a menu folder

Now, create a file nav_menu.xml and paste the code.

<?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/homeFragment"
        android:enabled="true"
        android:icon="@drawable/ic_action_home"
        android:title="@string/home" />
    <item
        android:id="@+id/favoriteFragment"
        android:enabled="true"
        android:icon="@drawable/ic_action_favorite"
        android:title="@string/favorite" />
    <item
        android:id="@+id/settingFragment"
        android:enabled="true"
        android:icon="@drawable/ic_action_setting"
        android:title="@string/setting" />
</menu>

The important point here is the menu id should be same as nav_graph id or else it won’t work.

Now, our activity_main.xml will look like this.

Goto , the MainActivity file and add the following code.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupWithNavController
import kotlinx.android.synthetic.main.activity_main.*

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

        val fragmentContainer = supportFragmentManager.findFragmentById(R.id.nav_fragment_host) as NavHostFragment
        val navController =   fragmentContainer.navController
        bottom_navigation.setupWithNavController(navController)

    }

}

i am using the synthetic in kotlin which gives me bottom_navigation without using findviewbyid().

You can be enable using the kotlin-extension. to use kotlin-extension add the line in the build.gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
}

The FragmentContainerView uses the supportFragmentManager to host the fragment. If you are using the <fragment> tag you no need to use the it.

Now build the application and run it.

Output:

Now, To create a badge in bottom navigation is super easy using material design. just add this one line in your main activity after the setupcontroller and Tadaaa……

bottom_navigation.getOrCreateBadge(R.id.homeFragment)

To add the number badge like how much notification you received. add the following line.

val badge = bottom_navigation.getOrCreateBadge(R.id.homeFragment)
badge.number = 76

Now, the MainActivity file be like.

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

        val fragmentContainer = supportFragmentManager.findFragmentById(R.id.nav_fragment_host) as NavHostFragment
        val navController =   fragmentContainer.navController
        bottom_navigation.setupWithNavController(navController)
        val badge = bottom_navigation.getOrCreateBadge(R.id.homeFragment)
        badge.number = 76
    }
}

Thank you and Happy Coding….