Android Navigation Component

Navigation component is part of android jetpack library. it is used to navigate fragments in apps in fraction less manner. Basically three main part of navigation component

NavigationGraph
NavHostFragment
NavController

Project SetUp

add dependency to you app.gradle

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

def nav_version = "2.3.0-alpha05"
  // Kotlin
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

Addeding classpath in project.gradle

 buildscript {
ext.kotlin_version = '1.3.72'
ext.nav_version = "2.3.0-alpha05"
repositories {
   google()
   jcenter()
   
}
dependencies {
   classpath 'com.android.tools.build:gradle:3.6.3'
   classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
   classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"

   // NOTE: Do not place your application dependencies here; they belong
   // in the individual module build.gradle files
   }
}
allprojects {
repositories {
   google()
   jcenter()
 }
}

You can also:

Add dataBinding to your project by simply adding dataBinding section inside android block of app.gradle
```
android {
 dataBinding{
    enabled=true
  }
 }
```

Steps

Adding Navigation graph file in project resource

Project -> cretaed new android resource file -> file name nav_graph resource type Navigation

nav_graph.xmlfile created in app/res/navigation. Its looks like

<?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" android:id="@+id/nav_graph">

</navigation>

Add NavHostFragment

To add NavHostFragment go to activity_main.xml file. just go to containers and drag and drop NavHostFragment to your activity_main.xml.
This will add a fragment in xml file with some added properties . its looks like

   <fragment
       android:id="@+id/fragment"
       android:name="androidx.navigation.fragment.NavHostFragment"
       android:layout_width="0dp"
       android:layout_height="0dp"
       android:layout_marginStart="1dp"
       android:layout_marginLeft="1dp"
       android:layout_marginTop="1dp"
       android:layout_marginEnd="1dp"
       android:layout_marginRight="1dp"
       android:layout_marginBottom="1dp"
       app:defaultNavHost="true"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:navGraph="@navigation/nav_graph" />

Adding Navigation Destinations
- Go to nav_graph.xml file and add new destination. click on + icon to add new destination or create new one .
- After adding destination just reopen nav_graph.xml file and now you can see some properties are added.

Adding Navigation Actions

After adding two frgment i.e HomeFragment and SecondFragment we are now set Navigation action on HomeFragmnt to SecondFragment. Just sect destination in nav_graph.xml file and now can see the updates in same file.

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

 <fragment
  android:id="@+id/homeFragment"
  android:name="com.example.android_navigation_componenet.HomeFragment"
  android:label="fragment_home"
  tools:layout="@layout/fragment_home" >
  <action
      android:id="@+id/action_homeFragment_to_secondFragment"
      app:destination="@id/secondFragment" />
 </fragment>
 <fragment
  android:id="@+id/secondFragment"
  android:name="com.example.android_navigation_componenet.SecondFragment"
  android:label="fragment_second"
  tools:layout="@layout/fragment_second" />
 </navigation>

Here <action>tag will set the action that have idand destination

Setup action in kotlin code . open homeFragment.kt and set action on button click

 button.setOnClickListener {
 // it as View 
 // findNavController() // use to find the nav Controller 
 // navigate(actionID) 
         it.findNavController().navigate(R.id.action_homeFragment_to_secondFragment)
     }

Pass data between Fragments using budle in HomeFragment

button.setOnClickListener {
// it as View 
// findNavController() // use to find the nav Controller 
// navigate(actionID) 
      val bundle= bundleOf(USER_INPUT  to homeBinding.editText.text.toString())
      it.findNavController().navigate(R.id.action_homeFragment_to_secondFragment,bundle)
  }

Get data in SecondFragments using budle in HomeFragment

     val inputData=arguments?.getString(USER_INPUT)

Adding Andmations for Actions in Navigation Component

Animation basically use
ENTER -> when new fragment enter on new fragment
EXIT -> when previous fragment exit
POP ENTER -> When press back button on fragment , previous fragment appears.

POP EXIT -> When press back button current fragment disapprear with this animation

//added animation res file in `<action>`tag in silde nav_graph
      <action
       android:id="@+id/action_homeFragment_to_secondFragment"
       app:destination="@id/secondFragment"
       app:enterAnim="@anim/slide_in_left"
       app:exitAnim="@anim/slide_in_right"
       app:popEnterAnim="@anim/slide_out_left"
       app:popExitAnim="@anim/slide_out_right" />

Special thanks to @Anushka Madusanka, He explain everthing in simple way so everybody can understand.

AmandeepTomar/Android-Navigation-Component

Android Navigation Component

Project SetUp

Steps