Navigation Component Android and Designing the Navigation Graph

Demonstrate Simple behaviour of Navigation Graph of Android Navigation Architecture Component

Android Jetpack Components

Navigation helps you in understanding how your app moves across different components in your Application.

Android JetPack Navigation helps in implementing your high level navigation in a go easy approach(especially removes all your redundant activity and helps in the navigation of fragments .

Recently Android introduced Jetpack Components in that Navigation Graph specially you need to look for , this one thing makes your all tedious fragment navigation much more easier for your fragments maintaining all the stacks.

Let me start with a simple example of implementing a news paper app

Problem: I want to develop a simple new paper app which shows list of new in the first page and clicking on each news it should take me to a page where I want complete details about the news.

I can design this app easily with 2 fragments correct ?

1. New List Fragment.
2. News Detail Fragment.

Basically a Skeleton will look like this:

Step1: you need to do is create a new Project as Always.

The XML example below shows a NavHostFragment as part of an app's main activity:

• The android:name attribute contains the class name of your NavHost implementation.
• The app:navGraph attribute associates the NavHostFragment with a navigation graph. The navigation graph specifies all of the destinations in this NavHostFragment to which users can navigate.

By default we use Android NavHostFragment if u want more customization the you can define your own class and extend NavHostFragment

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

    <androidx.appcompat.widget.Toolbar
        .../>

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

    

</androidx.constraintlayout.widget.ConstraintLayout>

To include Navigation support in your project, add the following dependencies to your app’s build.gradle(Referred from Android Developer official Site)

dependencies {
  def nav_version = "2.3.0-rc01"

  // Java language implementation
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"

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

  // Dynamic Feature Module Support
  implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

  // Testing Navigation
  androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"
}

• In your App res folder add navigation folder.
• Right click on the navigation folder and click on New -> Navigation Resource File , Enter the file name(name it nav_graph)

If you have created new Project from android studio console and in Select a project template if you have clicked for Basic Activity then you don’t need to do the above step.

Step 2 : Creating our Fragments

• click on the nav_graph file, the middle section is the Graph Editor
• Click ok new Destination Icon

Create new Destination (Basically you are telling your Android studio create me a new Fragment and place it under my navigation graph)

It will ask for the name of the fragment (name it NewsListFragment)and all the respected component of the fragment will be created(the layout file and the fragment file).

In your nav_graph.xml file by default it will add NewsListFragment as the launch fragment.

Lets create another fragment our second fragment NewsDetailFragment(follow the same step as above ie Step 2).

Step 3: Connecting Fragments and telling nav_graph.xml relationship between our fragment and how to navigate between them.

As you can see on clicking on the fragment layout it gets highlighted and you need to click on the dot and drag it towards fragment you need to navigate from the current fragment(basically you connecting the fragments to say how your fragment navigation happens in your application)Like in our app it will be

• NewsFragment -> NewsDetailFragment

at the end of this step your nav_graph.xml will look like this.

<?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/newsListFragment">
    <fragment
        android:id="@+id/newsListFragment"
        android:name="com.example.news.NewsListFragment"
        android:label="fragment_news_list_list"
        tools:layout="@layout/fragment_news_list_list" >
        <action
            android:id="@+id/action_newsListFragment_to_newsDetailFragment"
            app:destination="@id/newsDetailFragment" />
    </fragment>
    <fragment
        android:id="@+id/newsDetailFragment"
        android:name="com.example.news.NewsDetailFragment"
        android:label="news_detail_fragment"
        tools:layout="@layout/news_detail_fragment" />
</navigation>

Here its list of the fragments which are there in your app and

<action> tag represents the navigation for each fragment

eg:

android:id="@+id/action_newsListFragment_to_newsDetailFragment"
            app:destination="@id/newsDetailFragment" />

action_newsListFragment_to_newsDetailFragment is the ID for navigation from NewListFragment to NewsDetailFragment. which we will later refer in the code

app:destination = “@id/newDetailFragment” represents the fragment to which we are navigating.

In our fragments will discuss about NewsListFragment and NewsDetailFragment

Step4 :Last step the code you need to write to navigate from NewsListFragment to NewsDetailFragment

//bundle is to pass news object for the NewsDetailFragment
val bundle = bundleOf("newsItem" to item)
//the id we get from our nav_graph (thats it)
findNavController().navigate(R.id.action_newsListFragment_to_newsDetailFragment, bundle)

This Navigation Graph made our task so easier. NavHostFragment is the main guy who is responsible for the maintaining fragment stack , also handling navigation between the fragments. Isn’t it easy ?

Soon I will come up with more details regarding passing arguments between the fragments. also nested navigation.

Attaching github link for the project which I referred above.