Android Jetpack: Navigation Architecture Component

If you have been developing Android applications for some time you know that providing proper navigation between Activities and Fragments can be a time extensive and complex task. The recently released Android Jetpack Navigation Architecture Component makes this task much easier by providing many building tools needed to handle in-app navigation while also helping us visualize our app’s navigation flow.

The Navigation Component consists of three key building blocks:

1. Navigation Graph which is an XML resource that contains all navigation-related information like all off our app’s destinations or fragments and all of the possible paths our users could navigate through our app.

2. NavHostFragment which is special widget we can add to our app layout that will Host all of the destinations or fragments from our navigation graph.

3. NavController is a Kotlin object that keeps track of the user’s current position within the navigation graph and orchestrates the exchange of destination content in the NavHostFragment as our users move through the destinations in our navigation graph.

In order to illustrate how easy it is to use the Navigation Architecture Component, lets go ahead and create a new project in Android Studio.

I will name this project NavDemo.

Next we need to declare the Navigation Component’s dependencies to our app level build.gradle file. The current dependencies can be found at https://developer.android.com/jetpack/androidx/releases/navigation

If we want to be able to pass data between fragments or destinations in our app we need to use Safe Args. In order to use Safe Args in our project we need to declare some dependencies to our project level build.gladle file.

We also need to add a plugin to our app level build.gradle file.

For this project we are also going to use the Android Jetpack Data Binding Library. We don’t need to use Data Binding in this project and the Navigation Component does not rely on it but is recommended as we begin to work on larger real-world projects. In order to enable data binding we just need to set dataBinding to true in the buildFeatures block of the app level build.gradle file.

In order to properly use data binding in our project we need to set layout tags to be the outermost tags in our layout xml files.

Now let create a Data Binding object in the MainActivity.

Now that we have set up our project to use Data Binding and Navigation we can move forward and begin building our Navigation Graph.

First, we will create a file that will contain our navigation graph. To create this file you can right click on your app folder which will prompt a menu to pop up. Select New. Then select Android Resource File.

A new window will pop up. Choose Navigation as the Resource Type. I will name this file nav_graph.

Now that the file has been created you can see that android created a new folder named navigation in within the res folder. Inside the navigation folder we will find our nav_graph file.

To host the navigation graph we need a NavHostFragment. The navigation graph connects to the other parts of the app through the NaVHostFragment. If we switch to the Design View we will see a notification that says “No NavHostFragments found”.

In order to add a NavHostFragment we nee to open our activity_main.xml file and remove the TextView.

We then want to switch to Design Mode and seach for NavHostFragment.

We can select the NavHostFragment and drag it into the layout prompting a pop-up to appear.

In this pop-up we can see that we can select the nav_graph we created earlier. Select the nav_graph option and press the OK button. Then press of the Infer Constraints button. Now we have set the activity_main as NavHostFragment.

If we go back to our navigation graph we can see that the activity_main is set as the NavHostFragment.

Next we have to create our Navigation Destinations. I will create a destination by clicking on the green plus button.

A pop-up will appear with different types of fragments available. I will choose Fragment (Blank).

I will name this fragment HomeFragment. After clicking the Finish button, the fragment will appear in my navigation graph.

Our layout folder now has an additional file for the homeFragment. Let’s open this file and make some small changes to the design.

I will simply remove the TextView, add an EditText and a Button. Since we are using data binding we also need to add layout tags as the outer most tags in the xml and set up our binding object in our HomeFragment Class.

Now that we have set up our Home Fragment we need to add additional destinations to our Navigation Graph by repeating the process. I will name this additional destination SecondFragment. However, this fragment will only contain a single TextView.

If you look at our Navigation Graph you will see that we now have two desinations, the homeFragment and the secondFragment.

If you run this app you will see the homeFragment is displayed, but it you click on the Submit button nothing will happen. This is because we have not set any Navigation Actions.

To add a Navigation action from the homeFragment to the secondFragment all we have to do is click on the circular icon on the right side of the homeFragment and drag the line that appears into the secondFragment. If successful an arrow will appear that points from the homeFragment to the secondFragment.

The same can be done if you want to create a Navigation Action from the secondFragment to the homeFragment. Android Studio automatically gives the navigation actions an id but you can change the id if you want. The id can be found in the attributes inspector.

If you switch to the Text Mode in the navigation graph you will see that our navigation graph contains two fragments, the homeFragment and the secondFragment. The startDestination in our navigation is set to homeFragment. The homeFragment contains an action with a destination of secondFragment.

Now we can open our HomeFragment file and set an onClickListener on our submitButton. Within this block we need to find the Navigation Controller and Navigate to our destination using the Navigation action id : action_homeFragment_toSecondFragment.

If we run out app and press the submit button you will see that our users can now move from the homeFragment to the secondFragment. However, if you type something in the EditText and then press the submit button, you will still move from one screen to the next but the information you typed in the EditText does not get transferred to the second screen. To accomplish this we need to get the user input as a bundle and set this bundle as the second argument of the navigate function.

It is important to note that the best practice of passing data between destination is using a ViewModels but for this tutorial we will use a bundle as it is the Android Navigation Component allows us to use bundles to pass data.

In our secondFragment we need to receive the data from the arguments. Then we can display the data in our TextView.

If we run out app you will see that if you type something in the EditText and press the submit button the app will navigate to the secondFragment and display the information in the TextView.

This was a simple example on how to use the Android Jetpack Navigation Component. There is much more you can do with it like set animations as you move from one destination to another and so much more. If you want to learn more about the Navigation Component I invite you to visit Android’s official documentation here: https://developer.android.com/guide/navigation/navigation-getting-started