Android JetPack - Navigation Architecture With Examples

In this tutorial, we’ll be discussing the Navigation Architecture that is a part of the JetPack.

JetPack is a set of components and libraries introduced at Google I/O 2018 to build better applications.

Android Jetpack consists of the following components:

android-jetpack-components (1)

Android JetPack Navigation Architecture Component

The Navigation Architecture component is a part of the new AndroidX package that’s introduced since Android SDK 28.

This component consists of new guidelines to structure your application, especially navigation between Fragments.

Google recommends the Single Activity Architecture moving forward when using JetPack.
Navigation Architecture gets ride of the complex FragmentTranscation by providing its own set of classes to navigate between fragments. Let’s first look into the guidelines for Navigation Architecture.

Principles of Navigation

  • The app should have a fixed starting destination.
  • A stack is used to represent the navigation state of an app.
  • The Navigation Up function never exits your app.
  • Up and Back should function identical in all the other cases.
  • Deep linking to a destination or navigating to the same destination should yield the same stack.

Getting Started

Create a new Android Studio Project. Add the following classpath inside the root build.gradle file:

Inside the app’s build.gradle add the following:

Add the following plugin inside app’s build.gradle:

Project Structure

android-jetpack-navigation-project-structure (1)

Our project consists of a single activity and two fragments. Let’s see how we arrived at this.

Navigation Graph

A Navigation Graph is the core layer of the Navigation Architecture. It lays out all the fragments/activities and adds all the connections between them.

Within this graph, we address different parts using a few key terms:

Navigation Graph XML – This is an XML defined which is created inside the res folder. Right click on the res directory and choose New -> Android resource file. Set the title for the file and choose Navigation from the Resource type dropdown as shown below:

android-jetpack-navigation-project-structure (1)

This creates a navigation folder inside the res with the relevant file name.

Navigation Host Fragment
Inside the Activity layout, we define a Navigation Host Fragment. In our project, we’ve set the navigation host fragment inside the activity_main.xml layout as shown below:

  • app:navGraph: defines which Navigation Graph will be associated with the Navigation Host
  • app:defaultNavHost="true": ensures that the Navigation Host intercepts the system back button when pressed.

Destination – A Destination is any fragment or activity where the user can go.

We can add destinations inside the Navigation Graph Design file as:

android-navigation-graph-destinations (1)

  • On the left, we have the Destinations
  • In the middle, we have the Navigation Graph
  • On the right, we have the Attributes editor. Inside the attributes editor, we can add actions, pass arguments

Notice the circular icon on the FirstFragment when it is highlighted. These are Actions.

Actions – These are defined to navigate from one fragment/activity to another. We can define them by dragging or in the XML.

android jetpack navigation actions

An action is created with an id specified. You can choose the transition animations as well from a dropdown list of built-in ones or create your own and specify it.
The XML code gets auto-generated:

The above code can be written directly without the need of the Design Editor.
We’ve added an animation on the action.

Inside the Navigation Graph XML tag, you must specify the startDestination. The application gets launched there.

The layouts for the First and Second Fragment are:



Now that the layouts are ready, let’s see how to navigate from one Fragment to the other via the actions.
NavController manages app navigation within the NavHost.

The code for the class is:

We pass the action id inside the createNavigateOnClickListener method. There are a few alternative ways to navigate as well:

Alternative Way 1
We can navigate using the following code as well:

Alternative Way 2

Passing Arguments

The navigation architecture comes with a built-in way to pass type-safe arguments from one Fragment to the other.

You can define them in the Navigation Graph design editor as:

android-navigation-graph-destinations (1)

and/or in XML:

app:argType should be used in place of app:type. app:type is deprecated.

Now when we navigate these args get automatically passed.
We can also pass more arguments programmatically.

Our onViewCreated method of the FirstFragment now becomes:

The code for the class is:

The arguments passed in the Navigation Graph have auto-generated getters when you re-build the project.

FirstFragmentArgs.fromBundle(getArguments()).getTestString() is used to retrieve the argument passed from the FirstFragment.
navigateUp() is used to return to the previous fragment.
addOnNavigatedListener is called when the navigation is completed.

The output of the application in action is:

android jetpack navigation output

This brings an end to this tutorial. You can download the project from the link below:

By admin

Leave a Reply

%d bloggers like this: