In this chapter of the Guessing Game tutorial we are going to implement the Jetpack Navigation Component library to navigate between the fragments.
In the very last chapter (Guessing Game – Preparation) we have prepared our sample project.
- added the needed dependencies
- enabled the Data Binding library
- created the fragments and their layouts.
First in this chapter, we are going to create the navigation graph, then we gonna define the only action of the app. Finally, using the action, we gonna open the bottom sheet dialog by clicking on the TextView of the username, or the pen icon.
So, let’s start coding. 😎
If you are not familiar with the Jetpack Navigation Component, then it is highly recommended to do our basic tutorial about the library.
If you haven’t done the previous chapters, then from GitHub you can download the starter project for this chapter.
Step 1 – Create the navigation folder
The first step in this chapter will be to create the navigation folder for the navigation graph.
So, from the left side of Android Studio, open the Project tab, then in Android view expand the app folder. Then, with the right mouse button click on the res folder. From the quick menu select New, then the Directory option. In the popup window, name the folder as “navigation”.
Step 2 – Create the navigation graph
Next, we will create the navigation graph for our project. It means, we are going to create a new XML file inside of the newly created navigation folder.
So, click on it with the right mouse button, then form the New option select Navigation Resource file.
In the popup window, name the new file as “navigation_graph”, then click on the OK button.
Step 3 – Create destination
In this step, we are going to add the Activity and the Fragments to the navigation graph.
For this, click on the New Destination icon at the top left corner in the newly created navigation graph.
From the quick menu add all of the destinations.
As soon as you add the destinations, this is how the navigation graph looks like.
You can position the destinations using your mouse by dragging and dropping them inside of the graph.
Step 4 – Create the action
As we have talked about, we will have only one action in our app. This action will be between the gameFragment and the changePlayerDialogFragment.
In the design part of this view, select the gameFragment. In selection mode a blue border will be visible with a blue circle in the center of the right side. Click on it with the left mouse button, then hold the button and drag it, then drop it on the changePlayerDialogFragment. The result will be a new action between these 2 fragments.
We are going to use this action in the GameFragment class. For this, the Navigation Component library gonna generate some code. Using this code we can have the actions inside our Activities and Fragments.
To let the Navigation Component library generate this codes, click from the top menuline on the Build menu, then at the bottom select the Rebuild Project option.
Step 5 – Add the fragment view
Maybe you have already recognized, thet we have an error in the navigation graph. It is there, because we haven’t defineded the host fragment of this naviagation graph.
In our case, the host fragment will be in the MainActivity. So, from the res->layout folders, open the activity_main.xml file.
There we have currently a TextView. Replace it with the below <frgment> view.
Note in the XML code the arguments of defaultNavHost and navGraph. These 2 arguments tell for the navigation graph, thet this is the host fragment.
If you go back to the navigation graph, then the error shouldn’t be there anymore.
Step 6 – Start using Data Binding
Before we can implement the click listener to show the bottom sheet dialog, we have to change our classes to a Data Binding class.
So, open the the GameFragment::class from the ui package. Then define the next member variable at the beginning of this class:
private lateinit var binding: FragmentGameBinding
Note the FragmentGameBinding. This class has been automatically generated by the Data Binding library, when we have rebuilt the project.
Then, we are going to change the onCreateView() method. Here, we are going to start using Data Binding and init the above mentioned binding class.
So, replace the onCreateView() method with the below code.
Next, we are going to modify the ChangePlayerDialogFragment class to use Data Binding also. We are going to change the class in the same way as we did it in the previous point. So, just copy and paste the below lines into the ChangePlayerDialogFragment::class and replace with it the current body of the class.
Step 7 – Open and close the dialog
This gonna be the last step in this chapter, which is to open and close the bottom sheet dialog.
So first, open the GameFragment::class from the ui package.
Paste after the onCreateView() method the below function.
As you can see, we will use the findNavController() function, which find a NavController given the id of a View and its containing Activity/Fragment. This is a convenience wrapper around findNavController(View).
This method will locate the NavController associated with this view. This is automatically populated for the id of a NavHost and its children.
Next is to define the click listeners for the TextView of the username and the ImageView of the pen icon.
Copy and paste the below lines into the onCreateView() method.
You can close the dialog by clicking outside of it. But, to improve the user experience, we are going to implement a Close Button also.
So, now open the ChangePlayerDialogFragment class, and paste the below few lines into the onCreateView() method, before its return.
Run the app
The source code is available on GitHub.
I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂