BMI Calculator – Navigation Component

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.

If you would like to know more about Navigation Component, then check out our basics tutorial.

Navigation Component


The starter project for this lecture is available on GitHub. Just download it using the below link.

GitHub – viewmodel_and_databinding

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.

If you would like to know more about data class, then check out our tutorial.

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.


      1. 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.
      2.  Then we gonna init the Data Binding with the layout of MainActivity.
      3. Next step is to find the Toolbar.
      4. Here we have to find the container for the navigation controller.
      5. 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.
      6. 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

The first step is to build up the navigation of the app by adding to it the directions (fragments).

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.

For this, click on the splashFragment in the desing view.

Now you should see a blue circle at the right side. Click on it, drag it and drop it on the bmisFragment.

The result is an action between these 2 fragments. An action contains the info for the navigation.

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.

name=“your_bmis”>Your BMIs

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.


The source code is available on GitHub under the branch bmi+navigationComponent, check out using the below link.

GitHub – branch bmi+navigationComponent


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 *