Navigation Architecture: Android Jetpack

Hi Folks,

In this tutorial, we will take a look at Android’s Navigation architecture component. The purpose of this component is to simplify the implementation of navigation in our android apps. The navigation component forms part of a larger group of libraries called Jetpack.

Let’s get started!!

Why Navigation Architecture?

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.

Navigating via Fragments simplifies the lifecycle greatly as you don’t have to deal with the complexity of interaction between Activity and Fragment lifecycles.

The Navigation component provides a number of other benefits, including the following:

• Handling fragment transactions.
• Handling Up and Back actions correctly by default.
• Providing standardized resources for animations and transitions.
• Implementing and handling deep linking.
• Including Navigation UI patterns, such as navigation drawers and bottom navigation, with minimal additional work.
• 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.

To include Navigation support in your project, add the following dependencies to your app's build.gradle file:

Navigation Components:

The Navigation component consists of three key parts that are described below:

1. Navigation graph: An XML resource that contains all navigation-related information in one centralized location. This includes all of the individual content areas within your app, called destinations, as well as the possible paths that a user can take through your app.
2. NavHost: An empty container that displays destinations from your navigation graph. The Navigation component contains a default NavHost implementation, NavHostFragment, that displays fragment destinations.
3. NavController: An object that manages app navigation within a NavHost. The NavController orchestrates the swapping of destination content in the NavHost as users move throughout your app.

Let’s Understand these three pillars of Navigation Components.

1. Navigation Graph:

What is Navigation Graph?

A navigation graph is a resource file that contains all of your destinations and actions. The graph represents all of your app's navigation paths.

How to create a Navigation Graph?

To add a navigation graph to your project, do the following:

In the Project window, right-click on the res directory and select New > Android Resource File. The New Resource File dialog appears.

Type a name in the File name field, such as "nav_graph".

Select Navigation from the Resource type drop-down list, and then click OK.

In the nav_graph.xml file, you will see.

The <navigation> element is the root element of a navigation graph. As you add destinations and connecting actions to your graph, you can see the corresponding <destination> and <action> elements here as child elements. If you have nested graphs, they appear as child <navigation> elements.

Destination and Action:

1. Destination 2. Action

1. Destination: It is just the screen or fragment/activity you are using to show your app’s content.
2. Action: Here Action is nothing but a logical connection between the destinations(screens) that shows a path that users take from one screen to another screen for navigation.

Navigation flow of multiple destinations with one main host fragment.

2. Nav (Navigation) Host:

What is Nav Host?

The navigation host is an empty container where destinations are swapped in and out as a user navigates through your app.

A host is a single context or container for navigation via a NavController.

Here the one important thing is that The Navigation component is designed for apps that have one main activity with multiple fragment destinations. Where The main activity is associated with a navigation graph and contains a NavHostFragment that is responsible for swapping destinations as needed.

Note: In an app with multiple activity destinations, each activity has its own navigation graph.

NavHostFragment?

NavHostFragment provides an area within your layout for self-contained navigation to occur.

Each NavHostFragment has a NavController that defines valid navigation within the navigation host. This includes the navigation graph as well as navigation states such as the current location and back stack that will be saved and restored along with the NavHostFragment itself.

Now guys please wait, wait, wait… here Just read the above line once again.

Yes, this NavHostFragment is a person who fulfills the benefits of Navigation Architecture that we have already discussed in the beginning.

NavHostFragments register their navigation controller at the root of their view subtree such that any descendant can obtain the controller instance through the Navigation helper class's methods such as Navigation.findNavController(View).

Here our Main Activity XML layout shows the NavHostFragment as below.

Note the following:

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.

The app:defaultNavHost=" true" attribute ensures that your NavHostFragment intercepts the system Back button. Note that only one NavHost can be the default. If you have multiple hosts in the same layout (two-pane layouts, for example), be sure to specify only one default NavHost.

You can also use the Layout Editor to add a NavHostFragment to activity by doing the following:

How to add a destination to the navigation graph?

You can create a destination from an existing fragment or activity.

To add a new destination using the Navigation Editor, do the following:

In the Navigation Editor, click the New Destination icon, and then click Create a new destination.

Click on a destination to select it, and note the following attributes in the Attributes panel:

The Type field indicates whether the destination is implemented as a fragment, activity, or other custom class in your source code.

The Label field contains the name of the destination’s XML layout file.

The ID field contains the ID of the destination which is used to refer to the destination in code.

The Class dropdown shows the name of the class that is associated with the destination. You can click this dropdown to change the associated class to another destination type.

Designate a screen as start destination:

The start destination is the first screen users see when opening your app, and it's the last screen users see when exiting your app. The Navigation editor uses a house icon to indicate the start destination.

Once you have all of your destinations in place, you can choose a start destination by doing the following:

Click the Assign start destination button.

Alternatively, you can right-click on the destination and click Set as Start Destination.

Connection Destination:

An action is a logical connection between destinations. Actions are represented in the navigation graph as arrows. Actions usually connect one destination to another.

You can use the Navigation Editor to connect two destinations by doing the following:

So, guys, we have done a connection between the multiple screens using the nav_graph.

I hope now you have clear clarity about what the Navigation Architecture is.

In the next blog, we will learn how to control all this added fragment using NavController, send the data from one screen to another screen and animation between these fragments while entering and exit.

Please get the link from here of Android Navigation Architecture Part2.

Navigation Architecture: Android Jetpack (Part 2)

Thank you !!

Nikhil Singh (Android Developer)