Guessing Game – Navigation Component

In this chapter of the Guessing Game tutorial we are going to implement the Jetpack Navigation Component library to navigate between the fragments.

In our case we have only 2 fragments. First, it will help us to show the GameFragment at startup. Then, when we want to set our username, it will open up the ChangePlayerDialogFragment also, which is inherited from the BottomSheetDialogFragment class.

Introduction

In the very last chapter (Guessing Game – Preparation) we have prepared our sample project.

We have

        • 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. 😎

Navigation Component

If you are not familiar with the Jetpack Navigation Component, then it is highly recommended to do our basic tutorial about the library. 

Navigation Component tutorial

GitHub

If you haven’t done the previous chapters, then from GitHub you can download the starter project for this chapter.

GitHub

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.

So, in the navigation_graph.xml file you should have 3 icons at the top right corner. There select the second one. This is the Split view. It means, thet we will have the design and the code view open in the same time.

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.


Host fragment

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.

GameFragment

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.


onCreateView()
ChangePlayerDialogFragment

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.


ChangePlayerDialogFragment ()

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.

Open

So first, open the GameFragment::class from the ui package.

Paste after the onCreateView() method the below function.


showDialog()

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.


showDialog()
Close

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.


dismiss()

Run the app

Finally run the app. Currently you won’t see any default value of the username, so the TextView gonna be empty. What we can test is the show dialog method. So, click on the pen icon and the bottom sheet dialog should be visible. You can dismiss it by clicking outside of the dialog or on the Close Button.

GitHub

The source code is available on GitHub.

GitHub – navigation_component branch

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Follow and like us:
Click to rate this post!
[Total: 0 Average: 0]

Leave a Reply

Your email address will not be published. Required fields are marked *