BottomNavigationView with navigation in Android

Hey there ! Welcome to my blog.

Implementing BottomNavigationView is pretty simple with Navigation component which allows users to Navigate to multiple screens by simply clicking on the bottom icons. Let’s start and I’ll guide you through each steps with an outline below.

This is what we are going to build, although not RecyclerView but you can get all code from GitHub repository which is linked at bottom of page.

1. Dependencies

Add Dependencies for BottomNavigationView and Navigation component in the build.gradle (Module: app) directory.

Dependencies :

// Material Design Components
implementation 'com.google.android.material:material:1.6.1'

// Navigation component
implementation 'androidx.navigation:navigation-fragment-ktx:2.5.1'
implementation 'androidx.navigation:navigation-ui-ktx:2.5.1'

Sync your project for gradle to import all required classes.

2. Create navigation graph

Fragments are called destinations in navigation. Let’s create a navigation graph for our app, which has all fragment destinations.

In your project under res folder right click and select New Android Resource File. On dialog box enter
file name : nav_graph with Resource type: Navigation.
Notice that file will auto generate a id for this graph, we need this later.

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

</navigation>

We will get back to graph once we have new destinations(fragments) to add, right now file will be empty.

3. Setup navigation

NavHost has default fragment which is NavHostFragment. We hook this into activity, so let’s add it to activity_main.xml.

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <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:navGraph="@navigation/nav_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

• android:id=”@+id/nav_host_fragment”
  We declare attribute id to hook NavigationController with MainActivity.java class
• android:name=”androidx.navigation.fragment.NavHostFragment”
  Attribute name will change behavior of simple fragment to act as NavHostFragment.
• app:defaultNavHost=”true”
  Setting value true to this attribute will make this fragment to behave default NavHostFragment.
• app:navGraph=”@navigation/nav_graph”
  Attach our app navigation graph to this NavHostFragment.

MainActivity.kt:

Find reference to NavHostFragment with findNavController and id in activity class inside onCreate( ).

val navController = this.findNavController(R.id.nav_host_fragment)

Now we need empty fragments to show, let’s create three.

4. Add destinations to graph

Since we have 3 bottom menu items in navigation we will add 3 different fragments, so let’s create them and add to graph.

AlbumsFragment.kt with fragment_albums.xml
FavoritesFragment.kt with fragment_favourites.xml
AccountFragment.kt with fragment_account.xml

Let’s add these fragments to graph.
Open nav_graph.xml file that you have created earlier, in that file from the toolbar go to Design section.
Click the New Destination icon to see available destinations to add.

nav_graph.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/nav_graph"
    app:startDestination="@id/favouritesFragment">

    <fragment
        android:id="@+id/accountFragment"
        android:name="com.developersbreach.bottomnavigationview.destinations.account.AccountFragment"
        android:label="Account"
        tools:layout="@layout/fragment_account" />

    <fragment
        android:id="@+id/favouritesFragment"
        android:name="com.developersbreach.bottomnavigationview.destinations.favourites.FavouritesFragment"
        android:label="Favourites"
        tools:layout="@layout/fragment_favourites" />

    <fragment
        android:id="@+id/albumsFragment"
        android:name="com.developersbreach.bottomnavigationview.destinations.albums.AlbumsFragment"
        android:label="Albums"
        tools:layout="@layout/fragment_albums" />

</navigation>

Once you add all 3 fragments.
Each fragment has an id, name and label to to access or show that destination.
You can change those values for your convenience, take the below reference.

5. Create menu and match destination id’s

Create new menu file and add 3 menu items to it because we have 3 fragments.
We need to make sure the ID of menu item matches with ID of fragment in graph.

1. Album --> albumsFragment
2. Favourites --> favoritesFragment
3. Account --> accountFragment

menu_bottom_nav.xml :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@id/albumsFragment"
        android:icon="@drawable/ic_baseline_album_24"
        android:title="Albums" />

    <item
        android:id="@id/favouritesFragment"
        android:icon="@drawable/ic_baseline_favorite_24"
        android:title="Favourites" />

    <item
        android:id="@id/accountFragment"
        android:icon="@drawable/ic_baseline_account_circle_24"
        android:title="Account" />
</menu>

Now finally let’s link our menu, navigation controller, bottom navigation view with activity.

6. Setup BottomNavigationView with Navigation

Let’s add widget for showing BottomNavigationView in activity layout to the bottom of the screen.

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <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:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/menu_bottom_nav" />

</androidx.constraintlayout.widget.ConstraintLayout>

Let’s refer to the ID and setup navigation view with navigation controller.

// Find reference to bottom navigation view
val navView: BottomNavigationView = findViewById(R.id.bottom_nav_view)
// Hook your navigation controller to bottom navigation view
navView.setupWithNavController(navController)

Below is complete code for MainActivity after making all the changes.

ActivityMain.kt :

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

class MainActivity : AppCompatActivity() {

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

        val navController = this.findNavController(R.id.nav_host_fragment)
        // Find reference to bottom navigation view
        val navView: BottomNavigationView = findViewById(R.id.bottom_nav_view)
        // Hook your navigation controller to bottom navigation view
        navView.setupWithNavController(navController)
    }
}

Run the app in your android device and you will be able to navigate between different fragments.
If it’s not working as expected take reference from source code below I have shared.

7. Project resources

That’s it people I hope you found this information useful, thanks for reading and do connect with me through LinkedIn from below.

Here We Go Again : (

if (article == helpful) {
    println("Like and subscribe to blog newsletter.")
} else {
    println("Let me know what i should blog on.")
}