Photo by Fahrul Azmi on Unsplash

In this article we will look into the Navigation component of Android Jetpack.

Jetpack is a set of libraries, tools and architectural guidance to help make it quick and easy to build great Android apps. It provides common infrastructure code so you can focus on what makes your app unique.

Using Navigation component makes it easy to implement the navigation behavior in our Android application. Below are the benefits

Handling fragment transactions

Handling up and back correctly by default

Provides defaults for animations and transitions

Deep linking is a first class operation

Navigation UI patterns like navigation drawers and bottom nav with little additional work

Type safety when passing information while navigating

Android Studio offers tooling for visualizing and editing the navigation flow of an app

To get started we need to first download the Android Studio 3.2 which is the preview version at the time of writing this article. This is because Android Studio 3.2 has a new GUI for navigation.

Android Studio 3.2

After downloading the 3.2 version of Android Studio go over to the experimental tab in the Settings screen and check Enable Navigation Editor and restart your Android Studio. This will enable the Navigation GUI.

Now create a basic Android application in Android Studio which consist mainly a MainActivity.kt and main_activity.xml file.

Before going into the details of implementation, lets understand few things about Navigation component.

Every screen is referred as a destination.

Group of destinations makes up a Navigation Graph

According to the Principles of Navigation, Activities behave as entry points for our app, which contains global navigation, such as the bottom navigation and navigation drawers, and fragments will be the ones which act like destinations.

After creating the application lets add the navigation component’s gradle dependency in build.gradle file.

Next lets change the main_activity.xml file to add NavHostFragment.

NavHostFragment will basically behave as a container to swap our fragments, aka destinations, in and out.

Most of the code above looks familiar but there are 3 mysterious lines (Line: 14,15,16)

android:name="androidx.navigation.fragment.NavHostFragment" and app:defaultNavHost="true" connects the system back button to the NavHostFragment

and connects the system back button to the app:navGraph="@navigation/mobile_navigation" associates the NavHostFragment with a navigation graph. This navigation graph specifies all the destinations the user can navigate to in this NavHostFragment .

Note: will create navigation/mobile_navigation later.

Next lets add a fragment to our project and name it as FirstFragment. FirstFragment.kt and fragment_first.xml files will be added to our project.

Lets change the first_fragment.xml file to show a TexView and a Button.

FirstFragment is basically a destination to which user may go to and we need to add this destination in our navigation graph. So lets create a navigation graph.

Right click of the res folder and select the option New->AndroidResourceFile. Enter the file name as “mobile_navigation” and select resource type as “Navigation” as shown below

Click finish and a new res directory by the name “navigation” will be created for you with mobile_navigation.xml file in it.

Open the mobile_navigation.xml file and click on the design tab and you should a screen like below

Click on the + button on the top and you should see fragment_first in its drop down list. Click on it and a destination will be added on the screen

Now if you hop over to the “text” tab you will see below code in xml

There are few things to notice

<navigation> is the root node of every navigation graph.

is the root node of every navigation graph. <navigation> contains one or more destinations, represented by <activity> or <fragment> elements.

contains one or more destinations, represented by or elements. app:startDestination is an attribute which controls what destination is launched by default when the user first opens the app. In our case it is FirstFragment.

At this point if you run your app you should see a screen with the text “This is First Fragment” and a Button below it

Lets understand how the linking happens.

In the main_activity.xml file we added a NavHostFragment, this fragment points to the mobile_navigation graph that we created. Inside of the mobile_navigation.xml file the attribute app:startDestination points to the firtsFragment. This is how the FirstFragment screen is shown on app startup as default page.

Note that we haven’t written any Kotlin/Java code till now for FragmentTransaction all this is handled by the Navigation component.

Now lets say we would like to go from FirstFragment to SecondFragment, to achieve this we will add SecondFragment as a destination to our navigation graph(mobile_navigation.xml)

Lets create a new fragment and give it a name “SecondFragment”. Now additional two files will be added to our project, fragment_second.xml and SecondFragment.kt

Lets update the fragment_second.xml file to show a text and button.

To add SecondFragment as a destination click on the + button and select fragment_second from the drop down list.

Below is the equivalent xml code.

Now in order to link the FirstFragment to the SecondFragment we can use action tag

There are two ways of adding action tag to a destination either by using the design tab or xml code. I will show you how to do in xml code.

You could also do it in design tab by clicking on FirstFragment and dragging it to SecondFragment.

The action tag has two attributes an id and a destination. The id we will use it in our code to reference it and the destination points to the fragment to which it needs to navigate to, in our case it is the SecondFragment.

Go to the FirstFragment.kt file and override the onViewCreated function and add click listener to the button and add the Navigation code inside it like shown below.

Here inside of onViewCreated function we are first taking a reference to NavigationController instance on line 24.

NavigationController is powerful because you'll call actions like navigate() or popBackStack() and it will translate that into the appropriate framework operations based on the type of destination you are navigating to or from.

Inside of the button onClickListener we call navigate() method of the NavigationController class and pass it the action id and null for Bundle.

Now clicking on the button in FirstFragment will navigate you to SecondFragment.

Similarly if we want to navigate to FirstFragment from SecondFragment we need to follow the same steps i.e

Add a action tag to SecondFragment and point it to FirstFragment

In the SecondFragment.kt get reference to NavigationController and call navigate() by passing in the action id and bundle.

Below is the complete mobile_navigation.xml file

This is how we implement navigation in our app using the Navigation Architecture Component.

You can find complete code here

Until next time happy coding!