Jetpack Navigation

Updated 29 April 2022


The interactions that allow users to travel through, into, and out of the various pieces of content within your app are referred to as navigation. The component of Android Jetpack navigation assists you in implementing navigation.

Jetpack Navigation depends on –

The Jetpack Navigation component depends on the below-mentioned parts:

Navigation Graph: A navigation graph is an XML resource that contains all navigation-related information in one place. This includes all of your app’s individual content areas, known as destinations, as well as the various paths a user can take through your app.
NavHost: A container that is empty and displays destinations from your navigation graph. The Navigation component includes a NavHost implementation by default, NavHostFragment, which displays fragment destinations.
NavController: A NavHost object that manages app navigation. As users move through your app, the NavController orchestrates the swapping of destination content in the NavHost.

As you navigate through your app, you tell the NavController that you want to navigate either along a specific path in your navigation graph or directly to a specific destination. The NavController then shows the appropriate destination in the NavHost.


The Navigation part gives various different advantages, including the mentioned below:

Start the implementation

Step-1 Add the dependencies

In your build.gradle (module-level) file

In your build.gradle (app level) file OPTIONAL for safe_args

Also, add a plugin in your module-level build.gradle file for safe args

Step -2 Create a resource file

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

  1. In the Project window, right-click on the res directory and select New > Android Resource File. The New Resource File dialog appears.
  2. Type a name in the File name field, such as “nav_graph”.
  3. Select Navigation from the Resource type drop-down list, and then click OK.

When you add your first navigation graph, Android Studio creates a navigation resource directory within the res directory. This directory contains your navigation graph resource file (nav_graph.xml, for example).
for reference, check this screenshot

Step-3 Add Frgmant Container View

From the below code we will add a NavHostFragment

Step-4 Let’s start work on your navigation graph

For the demo, we have added 2 fragments Fragment A and Fragment B

Here you can check that we have added some action from fragment A to Frgament B with argumnets

Step-5 Now it’s time to navigate

Here, is our Fragment A

As a result, we move to fragment B with the passed arguments.
Here, is our Fragmet B

Here is our UserData data class

Note:- Please make your data class Serializable or Parcelable if you want to pass this as an argument

In the above example, you can see that we are passing some data from Fragment A to Fragment B
From btn1:- We are just passing a string value
For results check this screenshot

From btn2:- We are just passing User Details with a null string
For results check this screenshot
Note: Here you can see that “EMPTY” is visible for the string argument which we have passed as a default value in our navigation graph.

From btn3:- We are passing both string and User Details with this action
For results check this screenshot

For more details, please check this link

Hopefully, this blog will be helpful to you. If you have any queries, please write them in the comment section.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home