Using Navigation architecture component in Jetpack Android (Kotlin)

Tram Ho

1. Introduction

Android Jetpack is a collection of components and tools that help you quickly create Android applications. These components combine the Support Library and Architecture Components.

Android Jetpack can be classified into four main components:

  • Foumdation (Example: ktx, appcompat, multidex, test)
  • Architecture (Example: Data Binding, Lifecycles, ViewModel, Livedata, Room, Paging, Navigation, WorkManager)
  • Behavior (Example: Download manager, Media, Notifications, Permissions, Sharing, Slices)
  • UI (Example: Animations, Auto, Emoji, Fragment, Layout, Palette, TV, Wear OS)

Components of Android Jetpack.

In this article, we will learn about Navigation .

Navigation refers to interactions that allow users to navigate through, in and out of the different content sections of your application.

Navigation in Android Jetpack helps you deploy navigation, from simple Button clicks to more complex navigation components like the app bar and navigation drawer.

The Navigation component also ensures a consistent and predictable user experience by following established guidelines.

The Navigation component consists of three main parts described below:

  • Navigation graph: The XML file contains all information related to navigation in a centralized location. It includes all the individual content areas in your application, called destinations , as well as links that users can navigate through your application.
  • Navhost: An empty container that displays the destinations from your navigation graph . Navigation includes a default Navhost declaration, NavhostFragment, showing the destination fragments.
  • NavController: An application navigation management object in Navhost. NavControll coordinates conversion of destination content in Navhost as users move within your application.

2. Set up

You need Android Studio 3.2 RC or higher to use Android Jetpack including Navigation. Also, for the scope of this article, knowledge of Kotlin is required.

Step 1: Create a new Android project, add a blank activity.

Step 2: Add the following dependencies to the app / build.gradle file and sync project:

In addition, to support the transfer of values ​​between views in a navigation, we need to use the more typesafe plugin.

Add navigation-safe-args-gradle-plugin to the project’s build.gradle file as follows:

In app / build.gradle , we will add the following plugin:

Step 3:

To implement Navigation, Android introduces a new type of resource called Navigation. Right click on res => New => Android resource file. Select a title and select Navigation

File navigation after creation will be as follows:

Step 4: If you cannot create Navigation, select Enable Navigation Editor

Step 5:

In the graph navigation xml file, navigate to Design and click on the New Destination icon as follows:

We will create two fragments by clicking Create Blank Destination . Creating MainFragment and DestinationFragment When creating two fragments, the xml navigation file will look like this:

The design view will display the following:

3. Add Action

In order for the framework to understand where the destination comes from, you must specify an action. You must add action tag inside source / home fragment

4. Add Arguments

For example, you would pass a value of “name” from MainFragment to DestinationFragment, then you would display “Welcome $ name”. You can pass many such parameters.

In the xml navigation file, add the <argument /> tag to the destination fragment.

  1. android: name – Id of the parameter.
  2. app: argType – What is the data type. Currently supporting inferred, integer, string, reference
  3. android: defaultValue (optional) – The default value received by the fragment in case no source fragment is not passed into any value.

Once completed, the XML navigation file will look like this:

** welcome_nav_graph.xml **

5. Create XML layout


** fragment_destination.xml **


6. Coding

1. MainActivity


2. MainFragment


3. DestinationFragment


7. Conclusion

Run the app and we will get the following result:

Share the news now

Source : Viblo