How to Implement Android Bottom Navigation with Navigation Component

Andriod Navigation Component which comes with android Jetpack, simplifies implementing navigation, while also helping you visualize your app’s navigation flow. In today’s article I am going to discuss how to integrate bottom navigation with navigation component.

Before going to the implementation let’s discuss bit more about Andriod Navigation Component.

Benifits of using navigation component :

1. Handle the back stack by itself
2. Automate fragment transaction
3. Typesafe arguments passing with SafeArgs(a Gradle plugin that provides type safety when navigating and passing data between destinations)
4. Implementing navigation UI patterns like navigation drawers and bottom navigation
5. Handles transition animations
6. Simplified deep linking
7. Centralizes and visualizes navigation between destinations
8. Supports ViewModelin a way that can scope a ViewModel to a navigation graph to share UI-related data between the graph's destinations

Navigation Component has 3 main parts,

1. Navigation graph — An XML resource file that contains all navigation-related information in one centralized location. This includes all of the individual content areas within your app, called destinations, as well as the possible paths that a user can take through your app.
2. NavHostFragment — An empty container that displays destinations from your navigation graph. It displays fragment destinations in your navigation graph.
3. NavController — An object that manages app navigation within a NavHost. It orchestrates the swapping of destination content in the NavHost(NavHostFragment) as users move throughout your app.

Implementation

First create a new project with Empty Activity(MainActivity) and with language Kotlin(We’ll be using Kotlin throughout this implementation).Then add the bottom navigation component in activity_mail.xml as follows.

You need ‘com.google.android.material:material:<version>’ (I use 1.5.0)dependency in your gradle file which may be added automatically at the project creation.

Now we’ll create navigation graph. Click on Resource Manager (1) → Click on Navigation (2) → Click on + (3) in android studio.

Next click on Navigation Resource file from the dropdown.

Finally enter a file name for your navigation graph file and click ok.

Now you can find your navigation graph file in the path res → navigation → my_nav.xml in your project structure. You can create this folder(navigation) and file(my_nav.xml) using the old way, by right clicking on res folder also.

Now open the nav graph file and let’s add destinations(fragments) to the nav graph. Click on add destination icon(1) → click on Create new destination (2).After that create the fragment as the IDE guides you.

I created 3 fragments(destinations) simillar to below UI and changed the text and background color which you can find here.

Now my navigation graph looks like follows.

Next to create navHost, open activity_main.xml → search for navHostFragment(1) → Drag and drop navHostFragment to activity_main ui.

Then select your navigation graph file(my_nav.xml) from the window poping up.

Now your activity_main.xml should look like follows with necessary constraints and ids.

Next create the menu for bottom navigation.

Click on menu resource file after the 3rd step in above image and give a name(bottom_menu.xml) to menu file and click ok. Now the bottom_menu.xml file is created in res → menu folder. Next create 3 vector icons by clicking on Resource Manager → Drawable → + →Vector Asset

Next add fragment(destination) ids,icons and titles as in the following code.

Now add the reference of menu file under BottomNavigationView component in activity_main.xml file.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/black"
    app:backgroundTint="@color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_menu" />

Now to setup your bottom navigation with Navigation Controller add below code in MainActivity.kt

val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
val navController = findNavController(R.id.fragment)
bottomNav.setupWithNavController(navController)

If you want to change the action bar title when we switch between pages from bottom navigation, add following code also in MainActivity.kt

val appBarConfiguration = AppBarConfiguration(setOf(R.id.firstFragment,R.id.secondFragment,R.id.thirdFragment))
setupActionBarWithNavController(navController,appBarConfiguration)

Here you should pass ids of all the fragments in navigation graph to AppBarConfiguration.

Finally MainActivity.kt with all above configurations,

Final output

Final code can be found from this github repo. Hit on clap, share and comment to motivate me :)