In this chapter of the BMI Calculator application we are going to add the Navigation Component. It is part of the JetPack libraries from Google. Using this library we can navigate between the 4 fragments, what we have created in the very last chapter.
First of all, we are going to create a new xml file, which will contain the directions, the actions and the arguments. This navigation file will define the host fragment as well, which will be visible at the first time when we open up the app.
The starter project for this lecture is available on GitHub. Just download it using the below link.
After the download, extract the app from the .ZIP file and import it in Android Studio (File -> New -> Import Project…)
Step 1 - Create the BMI data class
Before starting the implementation of the Navigation Component, we have to create a new data class.
First, for our BMI data class we will create a new package, called “model”.
So, click on the main source set with the right mouse button, select the “New”, then the “Package” option. In the popup window name the new file as “BMI”.
Then paste into the new file the below code.
data class BMI
- @Percalize: This class has to be percalized when we pass it into the dialog fragment. This dialog fragment will popup when we just tap an item in the RecyclerView.
- fun bmi(): this function will provide us the calculated bmi value based on the height and the weight properties.
Step 2 - Insert the Toolbar
We have to do one more thing before we can start the implementation of the navigation. In this step we are going to define the Toolbar for our app, which will contain the label of the currently open fragment and the back button in case.
So, open up the activity_main.xml file from the res -> layout folders and replace there the code with the below one.
Notice the included layout. This layout contains the AppBarLayout, which has the Toolbar child. You have added this layout to the app, when you added the downloaded assets files.
The last element of the layout is the . It will be the host for the navigation, but currently the line of the navigation graph is red, because we haven’t created it yet.
Next, open the MainActivity.kt file.
Here we have to init the navigation controller and add the BmisFragment to the main navigation as the only top fragment.
First, copy and paste the below lines into the MainActivity::class.
- We have made 3 member variables. One for the Data Binding, then for the AppBarConfiguration and finally for the navgiation controller, which contains the directions.
- Then we gonna init the Data Binding with the layout of MainActivity.
- Next step is to find the Toolbar.
- Here we have to find the container for the navigation controller.
- In this step we will tell for the navigation controller which are the top fragments inside the app. In this app we gonna have only one, which will be defined in the navigation graph. That’s why is it in red.
- The last point is the setup of the navigation controller.
Step 3 - Create the navigation graph
In this step we are going to create the navigation graph for our app. In this graph we will have all of the directions, actions and arguments, what we gonna need for the navigation between the fragments.
Create new directory and resource file
First, we gonna create a new directory, which will be inside of the res folder. So, click on it with the right mouse button, select “New”, then the “Directory” option. In the popup window name it as “navigation”.
Then create in this new directory a new resource file in the same way, but now select in the “New” submenu the “Navigation resource file” option. Name the new file as “navigation_graph”.
Build up the navigation graph
We can do it by clicking on the “New destination” button at the top left corner of the graph.
So now, add the 4 fragments to the app. After thet the navigation graph should look like below.
Next we should define the actions between the fragments. We can do it by making connection between them.
After navigating to the BmisFragment we don’t want to allow for the users the possibility to navigate back to the SplashFragment. It means, we have to remove it from the backstack. We can achieve this by adding the below two lines to the action, what we created now.
Remove from backstack
Next, create actions between the below fragments:
- bmisFragment -> addBmiFragment
- addBmiFragment -> resultFragment
- resultFragment -> bmisFragment
- resultFragment -> addBmiFragment
After you finished it, your navigation graph should look like below.
The navigation graph
Ok, now we are almost finished the navigation graph. What is missing, is the argument of the resultFragment. We need it because we should pass the BMI with its value for the resultFragment. There we use the bmi() method to calculate it and show it on the screen.
So, add the below line to the resultFragment.
Argument of the resultFragment
Be careful! Change the package of the model. It should use the package of your project.
That’s all, we have just finished the navigation graph. 😎
Step 4 - Navigate from splash to bmis
After the finish of the navigation graph, we can start using the actions. The first what we are going to use is the action between the SplashScreen and the BmisFragment.
So, open up the SplashFragment::class from the “splash” package.
Hide the AppBar
First of all, we have to hide the Toolbar on the SplashFragment. So, paste the below onStart() method before the onCreateView() method.
Hide the toolbar
Currently, to show for a longer time the splash page for the user, we are going to define a delay when the view is already visible.
We can do it by using coroutines. So, copy and paste the below member variable before the onStart() method.
private val coroutineScope = CoroutineScope(Dispatchers.Main)
Next, in the onViewCreated() method we will define scope with the delay, which will be 2 seconds.
Thenafter comes the navigation using the id of the aciton.
So, paste the onViewCreated() method after the onCreateView() method.
Navigate to the BmisFragment
Step 5 - Navigate from bmis to add new bmi
The next step is the navigation between the BmisFragment and the AddNewBmiFragment.
So, open the BmisFragment from the bmis package and paste there the below methods.
Navigate to the addNewBmiFragment
Here we defined the navigation a bit differently, because first we created an instance about the navigation’s action using the fragment’s directions class. This is automaticcaly generated by the Navigation Componenet. To navigate to the next fragment we should just pass it for the navigation() method instead of finding the id of the aciton.
Step 6 - Navigate from the add new bmi to the result fragment
On this screen, when we click on the “Calculate BMI” button, then we should pass the created BMI for the ResultFragment, but we gonna do this only in the next lecture.
Now we will just open up the next fragment.
So, again copy and paste the below lines into the AddNewBmiFragment.
Navigate to the result fragment
Step 7 - Navigate from the result fragment
In the last step we are going to add 2 actions. One for the recalculation and one for the save bmi action.
Navigate of the result fragment
Run the app
Finally run the app and if the navigation works properly, then you can navigate through the app.
Step 8 - Show the Toolbar
When you ran the app you could see that the Toolbar is invisible, albeit we need it hidden only on the splash screen. So, what we can do now is to show it again, when the BmisFragment is visible on the screen.
Open the BmisFragment.kt file from the bmis package, and paste the below line before teh onCreateView() method.
Show the Toolbar
Step 9 - Update the screens' title
During the test maybe you saw it that the titles of the screens aren’t too userfriendly.
In this step we are going to define some new strings. So, open the strings.xml file from the res->values folders. At the end of the file paste the below line.
The rest strings are already defined in this file.
Next, open the navigation_grpsh.xml file from the res->navigation folder. There go to the bmisFragment and change the value of the label attribute to “@string/your_bmis”
Thenafter change the label of the addNewBmiFragment to “@string/add_bmi”.
Finally, the new lable for the resultFragment: “@string/your_result”
Run the app
Now run again the app and check how the titles of the screens have changed.
I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂
[Total: 0 Average: 0]