Getting Started with Android Navigation Component

Navigation refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within your app. Android Jetpack’s Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer.

Source: developer.android.com

The navigation component provides a flexible solution to handle the fragments and maintain the backstack.

Features

  • Easy to implement.
  • Handling Up and Back actions correctly by default.
  • Handling fragment transactions.
  • Safe Args – a Gradle plugin that provides type safety when navigating and passing data between destinations.
  • ViewModel support – you can scope a ViewModel to a navigation graph to share UI-related data between the graph’s destinations.

Implementation

Add to build.gradle(project)

classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.1.0"

apply the plugin to app-level build.gradle

apply plugin: "androidx.navigation.safeargs.kotlin"

Add dependencies

dependencies {
  def nav_version = "2.1.0"

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

Navigation without Arguments

Create 2 fragments MainFragment and BasicFragment.

We will navigate to BasicFragment from MainFragment

Create nav_basic.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_basic"
    app:startDestination="@id/mainFragment">

    <fragment
        android:id="@+id/mainFragment"
        tools:layout="@layout/fragment_main"
        android:name="com.techpaliyal.androidnavigationcomponent.MainFragment">
        <action android:id="@+id/startBasicFragment"
            app:destination="@id/basicFragment">

        </action>

    </fragment>

    <fragment
        android:id="@+id/basicFragment"
        tools:layout="@layout/fragment_basic"
        android:name="com.techpaliyal.androidnavigationcomponent.BasicFragment"/>

</navigation>

app:startDestination=”@id/mainFragment” this will be the entry point.

action this is used for navigation from mainFragment to basicFragment

Add Navigation fragment to MainActivity

<fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_basic" />

Navigate from mainFragment to basicFragment using action id

inside MainFragment.kt on button click

findNavController().navigate(R.id.basicFragment)

findNavController() will give reference to the controller in which the fragment is attached.

Navigation with Arguments

Define arguments in nav_basic.xml

 <fragment
        android:id="@+id/argumentedFragment"
        tools:layout="@layout/fragment_argumented"
        android:name="com.techpaliyal.androidnavigationcomponent.ArgumentedFragment">
        <argument
            android:name="first_name"
            app:argType="string" />
    </fragment>

Send argument from BasicFragment to ArgumentedFragment

val action = MainFragmentDirections.startArgumentedFragment("Yogesh")
            findNavController().navigate(action)

Get arguments in ArgumentedFragment

val params : ArgumentedFragmentArgs by navArgs()

You can check the full code on Github.

Comment for suggestions and issues.

Leave a Reply