Hey there ! Welcome to my blog on implementing BottomNavigationView with Navigation component in android app.

Implementing Material Design BottomNavigationView is pretty simple 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.

Screenshot preview for bottom navigation view app.
Android BottomNavigationView

1. Make a project and add dependencies

Start with new android studio project choosing Empty Activity.
Give project and package name and select language Kotlin and finish.
Add Dependencies for BottomNavigationView in the build.gradle (Module: app) directory.

Dependencies

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

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

Sync your project for gradle to import all required classes.

2. Creating navigation graph

We need a xml resource file to add all fragment destinations at one place, so let’s create one.

Right click on res --> New --> Android Resource File
In the dialog section:
File name --> nav_graph
Resource type --> Navigation and then click Ok.
Later we will add fragments to this graph.

3. Setting up navigation controller

Let’s make our MainActivity class as default navigation host for all fragments by attaching our navigation graph. Setting up navigation controller in layout file i.e, 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"
        tools:ignore="FragmentTagUsage" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt:

With findViewById refer the fragment id in MainActivity class inside onCreate( ).

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

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

4. Create new fragments as destinations

Create fragments with names as follows :
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.

Once you add all 3 fragments, we need to keep track of fragment destination ID’s. You can compare your xml with below reference.

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

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

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

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

</navigation>

5. Create menu and match destination id’s

Create new menu file and add 3 menu items to it because we have 3 fragments to locate.
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 activity

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.

val navView: BottomNavigationView = findViewById(R.id.bottom_nav_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)
        val navView: BottomNavigationView = findViewById(R.id.bottom_nav_view)
        navView.setupWithNavController(navController)
    }
}

Run the app in your android device and you will be able to navigate between different fragments.
If not 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.

Rohini

Student pursuing her Bachelor of Technology in Computer science and Engineering. She is interested in Python, Java, UI/UX Design and Android Development and always love to learn and explore New things.


Connect with me


Here We Go Again : (

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.