Blog

An In-Depth Guide to Navigation Architecture Components – Introduction & Implementation (Part 1 of 2)

09 April 2019

Today, almost 84.7 percent of smartphones comprise android based devices. Android isn't only on diverse smartphones and tablets these days, it's on your wrist, in your lounge room, and in your vehicle. Becoming an Android developer is simple; yet turning into an effective Android developer and emerging out from the rest isn't. So, in lieu of making Android app development much faster and efficient, Google developers have introduced many engaging concepts. The Navigation Architecture component is one of them.    

The primary goal of Navigation Architecture Component is to facilitate the execution of navigation in the Android app. If you want your application to be predictable and consistent without dealing with the back stack, or if you have a complicated navigation flow which you want to rearrange in your application, then we have got you covered. Here is a blog post which will help you understand the core functionalities of Navigation Architecture Component, the methods of implementation, and some major reasons to use it. Read on to know more about it…

Navigation Architecture Components    

Navigation Architecture Component is a part of Android JetPack (collection of tools, libraries, and architectural guidance) that streamline the implementation of navigation in an Android app by helping you visualize your app’s navigation flow. It was basically developed by taking a Single Activity App concept in mind and is defined by the following major components:

* Navigation Graph

* Navigation Destination

* Navigation Action

* Navigation Host

 

1. Navigation Graph

It is a graph that depicts the congregation of navigation goals and their associations. It is the best resource for all the navigation-related information in a single centralized location. It basically describes the relationship between fragments & activities and the methods of transition between them. 

2. Navigation Destination

It can be a fragment or any view in your application. It represents a screen which you can navigate to in your application. Apart from fragments, the Navigation Architecture also supports other destination types such as graphs & subgraphs, activities, and custom destination types.

3. Navigation Action   

It is a connection that associates one app destination to another. A Navigation Action knows which goals it is associating and the sort of data that will stream between them.

4. Navigation Host

It is a very crucial component that knows about all the destinations and activities in the Navigation Graph. Simply put, the Navigation Host is an empty container which contains app destinations that are swapped in and out by the user while he navigates through the app.

How to implement Navigation Architecture Component in your project?

1. To implement the Navigation Component in your application, you need to install Android Studio 3.2 or higher, which will provide you with the latest tools such as navigation editor for navigation implementation. Click here to install the latest version of Android Studio.

Now, follow the below-listed steps to enable the navigation editor:

  • From the Android Studio menu bar, click on “Android Studio
  • Then click on “Experimental” on the left side of the menu bar
  • Now, select the “Enable navigation editor” if it’s not already selected
  • Click “OK” and restart the Android Studio

                                                                     Image Source: https://bit.ly/2D25p3W

2.  Create a new project file as per your requirement, open its build Gradle file, and add navigation components dependencies as shown below:

dependencies {

    //Other Dependencies...

    implementation "android.arch.navigation:navigation-fragment:1.0.0-alpha01"

    implementation "android.arch.navigation:navigation-ui:1.0.0-alpha01"

}

3. Now, create a Navigation graph resource file to use the navigation components. Right-click from anywhere inside your app module and select New>Android Resource File. Give a specific name to your resource file and click on the Resource Type drop down to select the Navigation resource type. Press OK and navigation editor will be opened as shown below:   

 Image Source: https://bit.ly/2GajKgO

 

4. After creating the Navigation Graph resource file, add destinations to your graph. Start assembling your Navigation Graph by including different destinations in your application. To begin making the connections, select the goal destination where you need to start and drag a line connecting the ending destination. After doing all of this, your navigation graph will look like this:

 

Image Source: https://bit.ly/2GajKgO

5. Navigation Graph Hosting – Navigation host takes a Navigation Graph and provides methods to Navigate through the distinctive destinations utilizing a NavController. The Navigation Host will do all the hard work, for example, executing fragment transactions and various other things expected to perform navigation.

It doesn't make a difference whether you are creating another application or relocating a current one, your Activity format will probably be the same and will just contain the Navigation Host as mentioned below:

    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="navexample.app.dario.com.MainActivity">

   

        android:id="@+id/nav_host"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:name="androidx.navigation.fragment.NavHostFragment"

        app:navGraph="@navigation/main_nav"

        app:defaultNavHost="true"/>

 

The two things that you need to note from the above snippet are as follows:

app:navGraph: It characterizes which Navigation Graph will be related to the Navigation Host.

app:defaultNavHost: It is  a Boolean which will allow navigation host to intercept if set true, when the system back button is pressed.

6. Navigating between destinations – Navigation Host has a segment called NavController to navigate between destinations. The NavController segment is responsible for dealing with the entire procedure of Navigation inside a Navigation Host. To perform the Navigation inside the destinations, you need to get the NavController initially from the Navigation Host. You can get this done by utilizing the static technique for the NavHostFragment findNavController as shown below:

val navController = Navigaton.findNavController (fragment)

Once you get the navController, the navigation to the Event Details destination should be done like this:

navController.navigate(R.id.event_details_fragment)

If you want to navigate back to your previous destination, get the NavController and then call the navigateUp function as demonstrated below:

navController.navigateUp()

7. Passing information between destinations

Navigation between different destinations is a crucial thing, but most of the time you need to send data without going to another destination.

This can be done by utilizing Bundles in 2 distinctive ways:

  • A type-safe path by utilizing the Navigation Components Safe args Gradle module.
  • A non-type-safe path by building the Bundle yourself as you would normally do.

If you are using the second method to pass the data between the destinations, you need to make an object in the destination with a function named bundleArgs that will take whatever contentions the goal needs and return a Bundle.

/EventDetailsFragment.kt

sidekick object {

private const val ARG_EVENT = "occasion"

fun bundleArgs(event: Event): Bundle {

return Bundle().apply {

this.putParcelable(ARG_EVENT, occasion)

}

}

}

To navigate to this destination and pass the heap of data, you should utilize one of the overloads of the navigate technique that takes the action and arguments.

val args = EventDetailsFragment.bundleArgs(event)

navController.navigate(R.id.event_details_fragment, args)

These were some major steps that you need to follow to implement navigation components in your project. If you are working on a small project, then you can implement the navigation components using a single activity, but if you are migrating a large app, then you can do this by using multiple activities with their own navigation graph. 

That’s all for now!! We hope this blog post helped you understand the core functionalities of the Navigation Architecture Component and procedure for its successful implementation in your project. In our next post, we will shed some light on the principles of Navigation Architecture components along with some good reasons why you need to use it. So, stay tuned for that!

lakhwinder1519814222.png

Lakhwinder Singh Lead Developer - Mobility

Lead Mobile App Developer, covers wide range of technologies applied to the development of websites and business applications too. Enjoys doing creative things in Mobile and is passionate about developing unique Mobile Products.

Related Posts

Contact us for free app consultation

Project Inquiry

Send us your requirements and we will get back to you with a free quote!

How to Contact
https://github.com/bonecms/laravel-captcha