DEV Community

Yogesh Choudhary Paliyal
Yogesh Choudhary Paliyal

Posted on • Originally published at yogeshpaliyal.com on

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"

Enter fullscreen mode Exit fullscreen mode

apply the plugin to app-level build.gradle

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

Enter fullscreen mode Exit fullscreen mode

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"
}

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Navigate from mainFragment to basicFragment using action id

inside MainFragment.kt on button click

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

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Send argument from BasicFragment to ArgumentedFragment

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

Enter fullscreen mode Exit fullscreen mode

Get arguments in ArgumentedFragment

val params : ArgumentedFragmentArgs by navArgs()

Enter fullscreen mode Exit fullscreen mode

You can check the full code on Github.

Comment for suggestions and issues.

Source Code on Github

The post Getting Started with Android Navigation Component appeared first on TechPaliyal.

Top comments (0)