Android Navigation Component

Android navigation component

Android navigation component, which is one of the architecture components, can be used to implement navigation in android applications. Using the navigation component, you can separate navigation flow logic from the other parts of the task code. This way navigation flow can be easily modified without having to make many changes in the code. It also eliminates the need to write boilerplate code to link fragments or activities in applications.

Android navigation component

In this tutorial, you can learn about navigation component and how to implement navigation using the navigation component with an example.

How Navigation Component Works

A task or a feature in an app usually consists of several screens where data is viewed, selected or entered. In the android app, each screen is implemented as a Fragment or an Activity.

When the user starts a task, screens or destination in the flow to complete the task are shown one after another. Usually, a button click or an item selection handler starts next fragment or activity (destination) in the flow.

 

With Navigation component framework, all the destinations of a flow are defined in the XML, which includes the definition for linking of destinations. All that needs to be done in the code to show the next screen in the flow in response to an event on a UI widget of current screen is to use Navigation component class and passing next screen destination ID defined in the XML to it.

The XML which contains navigation info needs to be created in navigation resource folder. To define destinations and links in XML, you can directly add corresponding XML elements to it in text view or it can be created using the navigation editor which can be accessed by opening the navigation XML file and clicking the design tab.

android navigation component navigation graph design

Following the navigation graph, XML contains two fragment destinations. Starting destination can be defined by assigning a destination id to start destination attribute of navigation root element. In the below example searchFlights destination is the starting destination. The destination searchFlights is linked to the flightsList destination by adding action element to searchlights destination and assigning flightsList destination id to destination attribute of the action element.

 

After navigation XML is defined, navigation definition needs to be added to the activity which manages the flow of the task. This is done by defining a fragment in the activity layout using NavHostFragment class provided by navigation framework as a fragment and adding the navigation graph to it by setting the navGraph attribute to point to resource id of navigation XML.

 

After the navigation XML is tied to an activity, destinations defined in the XML needs to be linked to UI widgets starting from the start destination so that next screens are shown in response to the events of the widgets on previous pages. This can be done using the NavController class. You need to call the navigate method on NavController bypassing the destination id in the widget event handler, for example, button click handler.

 

That is how destinations are defined and connected to enable navigation in android apps using a navigation component.

Setup

You need to add following navigation component dependencies to your module’s build.gradle file.

 

To use navigation component editor, which helps you in creating navigation graph, you need to install android studio 3.2 or later versions and enable navigation editor by going to settings, experimental and checking Enable Navigation Editor option.

android

Following example shows how to use the navigation component. It uses shopping and checkout tasks and defines two navigation graphs for each task. Navigation graph contains fragment and activity destinations. Shopping flow contains products list fragment destination and product details fragment destination. Checkout flow contains address fragment and payment activity.

Menu options to access these two tasks are provided as options menu on the app bar.

android navigation component fragment to fragment and fragment to action navigation example

Navigation graph (shopping_nav_graph)

Here is the navigation graph for shopping flow.

ProductsListFragment

Navigation graph (checkout_nav_graph)

AddressFragment

Payment Activity

Main activity

The main activity inflates the options menu which provides options for the user to start either shopping flow or checkout flow. Launcher activity layout contains frame layout which works as a placeholder for fragment destinations of the selected flow. The fragment (NavHostFragment) defined in the activity layout points to shopping flow navigation graph, so the starting screen will be product list fragment.

Main activity layout(shopping_activity)

Menu (shop_menu)

Destinations defined in the navigation graph can be tied to menu items of a bottom navigation view. To do that, the menu item is should match to the ids of destinations defined in the navigation graph. In the code, you need to use navigation class to integrate menu items and destinations.

Let’s see how to integrate BottomNavigationView and navigation component with an example. In this example, shopping and checkout flow destinations are defined in one navigation graph and two menu items defined for the bottom navigation view connect to the start destination of each flow.android navigation component bottom navigation view example

Activity

Activity Layout

Menu

Ids of the menu items are the same as the ids of destinations. Menu item shop points to starting destination of shopping flow and checks out menu item points to starting destination of checkout flow.

Like bottom navigation view is used with navigation component, navigation component can be integrated with navigation drawer in the same way.

android navigation component navigation drawer example

Activity

Layout

Passing Data between Destinations

Data can be passed between destinations. For that, in navigation graph, you need to define arguments in the definition of the fragment which receives the data from the source destination.

In the following example, MovieDetailsFragment can receive an argument.

In the source fragment, where navigation to the next destination happens, you need to create a bundle and add the argument to it and pass it to navigate method of NavController.

In the destination fragment, get the data sent from the source fragment.

 

Transitions between Destinations

You can apply animations to the transitions between destinations. You can add animation to the action in the nav graph using enter Anim and exitAnim attributes of the action element.

You can find complete code here

android component examples

696 total views, 3 views today

(Visited 298 times, 1 visits today)

You May Also Like

About the Author: Android Developer

This is Mohammad I am Android Application Developer. I am the founder of Android Tutorial Online blog. I am programming lover and professional blogger from India. I spend most of my time doing programming and helping other programmers. This Android tutorial online blog for learning and share Android code.
My Chatbot
Powered by Replace Me