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:
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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