Getting Started with Android Navigation Component
Published: 2021-09-07 06:02:20

---
title: Getting Started with Android Navigation Component
published: true
date: 2020-01-15 15:13:22 UTC
tags: 
canonical_url: 
---

> 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](https://developer.android.com/guide/navigation)

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)

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

```

apply the plugin to app-level build.gradle

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

```

Add dependencies

```groovy
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
<?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**

```xml
<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

```kotlin
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**

```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**

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

```

Get arguments in **ArgumentedFragment**

```kotlin
val params : ArgumentedFragmentArgs by navArgs()

```

You can check the full code on **Github**.

Comment for suggestions and issues.

[Source Code on Github](https://github.com/yogeshpaliyal/Android-Navigation-Component)

The post [Getting Started with Android Navigation Component](https://techpaliyal.com/getting-started-with-android-navigation-component/) appeared first on [TechPaliyal](https://techpaliyal.com).