A Trip to Android’s Future : Navigation Architecture Component

Overview

This time Google Developers have introduced many interesting concepts to make native Android development more efficient and faster. One of them is the Navigation Architecture Component, part of Android Jetpack and the new AndroidX package. It makes easy to implement the navigation in your Android app. It totally changes the scenario of navigation between fragments and also suggest to use of single-Activity architecture as the preferred architecture for Android Jetpack.

This architecture also has support for deep links and fragments, which will be create a cleaner, more user friendly experience.

What, Why, and How.
Three common questions arise in everyone’s mind.

What is Navigation Architecture Component?
Why is it invented ?
How can we implement it in our app?

1. The navigation architecture component is here to replace the tedious maintenance of transaction of activities and fragments.
2. It is invented because handling the activities and fragments via traditional way is critical and lengthy process.
3. For the answer of the third question we need to dive into to deep info.

Prerequisite for the trip

*Note :For now Navigation Architecture Components is limited to Android Studio 3.2 Canary 14 or higher.

First of all you need to add the navigation fragment and UI libraries to your project. They are available via the google() repository.

Implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha01'
implementation 'android.arch.navigation:navigation-ui:1.0.0-alpha01'

For Kotlin

Implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha01'
implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0-alpha01'

If you want to pass argument as bundle within fragments you need to include the safeargs navigation into build.gradle classpath. This plugin helps to generate code that allows type-safe access to properties used in argument bundles.

buildscript {
    ...
    repositories {
            google()
    }
    dependencies {
            ...
            classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha01'
    }
}

In your project build.gradle, now you are able to apply the Gradle plugin as you normally do.

apply plugin: 'androidx.navigation.safeargs'

Now it’s time to roll…!

1. First of all open project window then right-click on the resource(res) directory and select New from Android resource file.
2. Mention the name in File name field, such as “navigation_graph”.
3. Set Navigation from the Resource type drop-down list.
4. Tap OK. The following occurs:
   • A navigation resource directory will be added within the res directory.
   • A navigation_graph.xml file will be available within the navigation directory.
   • The navigation_graph.xml file will open in the Navigation Editor. This xml file fills your navigation graph.
5. Tap on Text tab to toggle to the XML text view. The XML for an empty navigation graph looks as shown below:
   

   <?xml version="1.0" encoding="utf-8"?>
   <navigation xmlns:android="http://schemas.android.com/apk/res/android">
   </navigation>

6. Tap on Design to get back to the Navigation Editor.

First Hold to look Navigational Editor

The Navigation Editor’s divisions are:

1. Destinations list – all destinations are available in the Graph Editor.
2. Graph Editor – contains visual design of your navigation graph.
3. Attributes Editor – contains attributes associated with destinations and actions in the navigation graph.

Identify destinations

The first step in creating a navigation graph is to identify the destinations in your app. You can create blank destinations or create destinations from fragments in an existing project.

Notice : The main activity “hosts” the navigation graph. In an app with multiple activity destinations, every other activity hosts its personal navigation graph.The Navigation Architecture Component is here for apps that have single main activity with more than one fragment destinations.

Connecting Fragments :

Transitions :

Provide the Fragment Transitions animations for four states

1. Enter -When entering into next fragment
2. Exit -When exiting from current fragment
3. Pop Enter -When entering to previous fragment from current fragment
4. Pop Exit – When exiting from current fragment to previous fragment

Androidx also provide 4 default animations

• nav_default_enter_anim
• nav_default_exit_anim
• nav_default_pop_enter_anim
• nav_default_pop_exit_anim

We can also add custom animation to anim folder in resources. It will automatically detect that particular animation into its transitions dropdown

Pop behaviour :

We can manage the backstack while transferring from one fragment to another fragment

Launch Option :

We can set the default launch option for fragment with this property

• Single Top
  Launch a navigation fragment as a Single Top. Using this, the system holds only one fragment on the top as like activity do.
  
• Document
  Launch a navigation fragment as a document. Doing this, the system stores fragment document entry for its own use and it will not create the document while transferring to that fragment again.
• Clear Task
  Launch a navigation fragment as a Clear Task. This will clear the backstack.When moving from one fragment to another fragment, the backstack will be cleared as shown below.

Here is xml view of navigation graph

<?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"
   app:startDestination="@id/firstFragment">

   <fragment
   android:id="@+id/displayFragment"
   android:name="com.example.yudizsolutions.navigationdemo.DisplayFragment"
   android:label="fragment_display"
   tools:layout="@layout/fragment_display" >

       <!--auto generated action when connecting fragments from design we can also add via xml coding-->
       <action
   android:id="@+id/action_displayFragment_to_loginFragment"
   app:destination="@id/loginFragment"
   app:enterAnim="@anim/nav_default_enter_anim"
   app:exitAnim="@anim/nav_default_exit_anim"
   app:launchSingleTop="true"
   app:popEnterAnim="@anim/nav_default_pop_enter_anim"
   app:popExitAnim="@anim/nav_default_pop_exit_anim"
   app:popUpTo="@+id/loginFragment"
   app:popUpToInclusive="true" />

       <!--argument can be also passed from xml-->
       <argument
           android:name="username"
           android:defaultValue="user"
           app:type="string" />

   </fragment>

</navigation>

Conclusion :-

The navigation library change the experience to decouple routing logic. The easy implementation actions and type-safe arguments are best additional functionality for robust API.