Navigation Component In Android

Abhishek Rathore

28 February 2022

In this blog, we will learn how to integrate or work with Navigation Component In Android. Before starting our topic, we will discuss Navigation in brief.

Navigation refers to the interaction section of the application, that allows users to navigate from one page to another page throughout the application. With the help of Android’s JetPack, we can create Navigation from simple UI (Buttons) to complex UI (Bottom Navigation, Navigation Drawer).

In this blog, we will demonstrate the Navigation Component by creating Bottom Navigation in-app and will see how the navigation component works.

1. Adding dependecies

In this step, we will add all the dependencies related to the Navigation component in our “build.gradle” file. Here, we have added only the Kotlin related dependencies, if you are working on Java, then can add Java-related dependencies. You can take references of the Developer console

val nav_version = "2.4.1"

  // Kotlin
  implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")
  implementation("androidx.navigation:navigation-ui-ktx:$nav_version")


  // Jetpack Compose Integration
  implementation("androidx.navigation:navigation-compose:$nav_version")

val nav_version = "2.4.1"

// Kotlin

implementation("androidx.navigation:navigation-fragment-ktx:$nav_version")

implementation("androidx.navigation:navigation-ui-ktx:$nav_version")

// Jetpack Compose Integration

implementation("androidx.navigation:navigation-compose:$nav_version")

2. Adding the Navigation Graph & Menus

We can create the Navigation Graph class under the resource folder and select the Navigation under the Resource type drop-down list.
We can add the action to each fragment, so their click event works accordingly, we can see the graph related to the Navigation XML file in the Android studio in the design section.

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

    <fragment
        android:id="@+id/fragment1"
        android:name="com.example.demoapp.Fragment1"
        android:label="fragment_fragment1"
        tools:layout="@layout/fragment_fragment1" >

        <action
            android:id="@+id/action_fragment1_to_fragment2"
            app:destination="@id/fragment2" />


    </fragment>


    <fragment
        android:id="@+id/fragment2"
        android:name="com.example.demoapp.Fragment2"
        android:label="fragment_fragment2"
        tools:layout="@layout/fragment_fragment2" >

        <action
            android:id="@+id/action_fragment2_to_fragment3"
            app:destination="@id/fragment3" />

    </fragment>


    <fragment
        android:id="@+id/fragment3"
        android:name="com.example.demoapp.Fragment3"
        android:label="fragment_fragment3"
        tools:layout="@layout/fragment_fragment3" >

        <action
            android:id="@+id/action_fragment3_to_fragment1"
            app:destination="@id/fragment1" />

    </fragment>
</navigation>

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

<fragment

android:id="@+id/fragment1"

android:name="com.example.demoapp.Fragment1"

android:label="fragment_fragment1"

tools:layout="@layout/fragment_fragment1" >

<action

android:id="@+id/action_fragment1_to_fragment2"

app:destination="@id/fragment2" />

</fragment>

<fragment

android:id="@+id/fragment2"

android:name="com.example.demoapp.Fragment2"

android:label="fragment_fragment2"

tools:layout="@layout/fragment_fragment2" >

<action

android:id="@+id/action_fragment2_to_fragment3"

app:destination="@id/fragment3" />

</fragment>

<fragment

android:id="@+id/fragment3"

android:name="com.example.demoapp.Fragment3"

android:label="fragment_fragment3"

tools:layout="@layout/fragment_fragment3" >

<action

android:id="@+id/action_fragment3_to_fragment1"

app:destination="@id/fragment1" />

</fragment>

</navigation>

Adding the Menus file for Bottom Navigation

We have added only 3 fragments for test purposes, you can add multiple as per your need.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/screen_1"
        android:icon="@android:drawable/ic_menu_compass"
        android:title="Screen 1" />
    <item
        android:id="@+id/screen_2"
        android:icon="@android:drawable/ic_menu_compass"
        android:title="Screen 2" />

    <item
        android:id="@+id/screen_3"
        android:icon="@android:drawable/ic_menu_compass"
        android:title="Screen 3" />

</menu>

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/screen_1"

android:icon="@android:drawable/ic_menu_compass"

android:title="Screen 1" />

<item

android:id="@+id/screen_2"

android:icon="@android:drawable/ic_menu_compass"

android:title="Screen 2" />

<item

android:id="@+id/screen_3"

android:icon="@android:drawable/ic_menu_compass"

android:title="Screen 3" />

</menu>

3. Adding the click events and setting the Controllers

In this step, we will set up the final click events and controller with Navigation Component.

<?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/activity_main"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/activity_main_bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

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

android:name="androidx.navigation.fragment.NavHostFragment"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:defaultNavHost="true"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:navGraph="@navigation/nav_graph" />

<com.google.android.material.bottomnavigation.BottomNavigationView

android:id="@+id/activity_main_bottom_navigation_view"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:menu="@menu/navigation_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

We will add following line of code to set the controller in main activity. Navigation component interanally deal with click events on the basis of the pages declared in the navigation Graph

 val navController = findNavController(this, R.id.activity_main)
 val bottomNavigationView = findViewById<BottomNavigationView>(R.id.activity_main)
 setupWithNavController(bottomNavigationView, navController)

val navController = findNavController(this, R.id.activity_main)

val bottomNavigationView = findViewById<BottomNavigationView>(R.id.activity_main)

setupWithNavController(bottomNavigationView, navController)

Conclusion:

In this blog, you have learned about the Navigation Component In Android.

You can check the mentioned link for more information about Navigation Component