BMI Calculator – The user interface

In the first lecture of the BMI Calculator sample application tutorial we are going to create a new project, then add the needed dependencies (still without the test libraries), and the last big step will be the creation of the user interface of the views. You can see them below.

Step 1 – Create new project

Our first step is to create a whole new project. For this, launch Android Studio. If you see the “Welcome page”, then click on the “Start a new Android Studio project”. If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.

Here select the “Empty Activity” option. In the next window, we should provide some information about the newly created app.

This tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language.

From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.

If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉

When the build has been finished, then you should see the open MainActivity::class and next to this the activity_main.xml files.

Step 2 – Add the needed dependencies

The next step is to define the dependencies, what we are going to use in our application.

As a good practice in Android development… and also programming at all, we won’t use any third party libraries, only which comes from Google. In our case we will use some libraries from the Google Jetpack libraries.

So, to add them to the project, go to the top left corner of Android Studio. There will be the tab called “Project”. Click on it and change the view to Android. Then open the Gradle Scripts menu and double click on the build.gradle (Module: app) file.

Set the target JVM

Frist of all, we are going to tell Android Studio which Java version we would like to use in our project.

So, scroll down to the android{} section and paste there the below lines.


We need to use JVM 1.8, otherwise we can’t use the Navigation Componenets library.

Enable Data Binding

Also here, after the JVM lines, paste the below lines also. These will enable in the project Data Binding.


Dependencies

Next is to add the dependencies. They are going to the dependencies {} section of the build.gradle (Module: app) file.

Copy and paste the below lines at the end of the dependencies.


Safe args and kapt

In this application we are going to use Room to store the data locally and safe args to pass the BMI data to the details popup bottom fragment.

For them, we have to add the Kotlin Annotation Processing Tool and the safe args from Navigation Component.

The first one is risponsible for the annotations of classes and functions. The second one will help us to pass the BMI model to the next fragment. We gonna define this BMI data class in the later chapters.

So, scroll to the top of the build.gradle (Module: app) file. There you will find some lines, which are starting with the “apply” keyword. Paste the below lines after them.


The versions

The last step before we can synchronize the app is to define the versions of the above mentioned dependencies. We are going to do it in one place, which is located in the build.gradle (Project: app) file. You can find it next to the build.gradle (Module: app) file.

At the top of the file, inside of the buildscript{} section you should have the version of Kotlin.

After it paste the needed versions. Then the versions should look like below.


Safe Args

Before we can sync the project, we have to add one more line to the build.gradle (Project: app) file.

Inside of the dependencies{} section paste the below line after the similar “classpath” lines.


Sync the project

Finally, it is time to finish this step. So, click on the “Sync Now” text, what you can find at the top right corner of Android Studio.
Depending on your computer, it can take some minutes, so be patient. 😊

Step 3 - Download the assets

In our app we are going to use some icons, values, strings, dimens and a layout file for the application toolbar.

We have prepared them for you. So, what you should do, is only to download them using the below link.

Download Assets

Next, extract it into the res folder of your Android Studio project.

app->src->main->res

Step 4 – Add the fragments

In this step we are going to add the 4 fragments, what about we talked at the beginning of this chapter.

      • SplashFragment: This fragment will contain only the logo of the app and this screen will be visible for the user only for 2 seconds. Basically during the visibility of the splash screen the apps used to fetch and update the data locally.
      • BmisFragment: On this screen we are going to see the saved BMIs in a RecyclerView.
      • AddBmiFragment: To calculate the BMI we have to provide our height and weight. We can do this on this screen.
      • ResultFragment: On the result screen will be visible the result of the BMI’s calculation and some information about the value.

SplashScreen

We are going to separate the views by creating for them one-by-one their own packages.

The first package will get the name of “splash”. So, click with the right mouse button on the main source set (the name of the package) in the left Project panel.

From the popup menu select the “New”, then the “Package” option. Finally extend the package in the popup window as “splash”.

Thenafter, inside of this new package create a Fragment as well. The process is similar. Click with the right mouse button on the “splash” package, select “New”, but now select the “Fragment” submenu then the “Fragment (Blank)” option. In the popped up window name it as “SplashFragment”.

The layout

Frist of all, we will enable Data Binding for this fragment. We can do this inside of the xml layout file. So, if it is closed after creation, then open it from the res->layout folders: fragment_splash.xml.

After opening you will see only the design mode. We need the code view as well.

So, from the top right corner select the first Code or the second Split option.

Then, repleace the current root viewgroup from <FrameLayout> to <ConstraintLayout>.

Now, move your cursor to <ConstraintLayout> and press there on you keyboard the Alt+Enter hot keys on Windows or Control/Option+Enter on Mac. This will open up a quick menu, the Show Context Actions menu. There, select the first option, which is “Convert to data binding layout”.

Finally, the layout should look like below.


Next, change the background color of the  by adding the below attribute to it.

android:background=“@color/colorPrimary”

Next, replace the TextView by the ImageView.
Now, it should look like below.


fragment_splash.xml

The SplashFragment::class

The next step is to remove the unnecessary code from the SplashFragment::class and start using there Data Binding.

So, open it from the splash package and replace the code with the below one.


SplashFragment

Looks a bit shorter, right? 😊

Next, we are going to start using Data Binding. We can do it by replacing the current layoutinflater.

So, add the below member variable to the class.

lateinit var binding: FragmentSplashBinding

Then initialize it inside of the onCreateView() method.


Binding

Finally, change the return value of the onCreateView() method.

return binding.root

That’s all for now, the layout is finished for the SplashScreen. 😎

Bmis' screen

The next screen, what we are going to build up, is the screen of the saved BMIs.

So, as we’ve done in case of the SplashScreen, create a new package next to the splash package, and name it as “bmis”.

Then, create there a new Fragment, but in this case select from the Fragment submenu the Fragment (with ViewModel) option. This will create the ViewModel for the Fragment as well. Name the new Fragment as “BmisFragment”.

Again, replace the <FrameLayout> by <ConstraintLayout> and convert the layout into a Data Binding layout.

Next, replace the TextView by the RecyclerView and the FloatingActionButton.

Finally, the layout should look like below.


Layout of the BmisScreen

Next, we are going to update the BmisFragment::class as well, because there we have again some lines, what we won’t need.

Note, that here we have a ViewModel as well. There we gonna store some data for the app. Currently it is initialized in the onActivityCreated() method, but we gonna use the AndroidX library to init it, which will happen under the hood after the call of onAttach() method.

The Data Binding will be the same as before.

After the changes the class looks like below.


BmisFragment

Add new BMI screen

The next screen is where we can provide our height and weigth and let the app calculate the BMI.

This case will be very similar to the BMIs’ screen, so we won’t go into the details of the creation.

Just create a new package called “addnewbmi”, then create there a new Fragment with ViewModel, with the name of “AddNewBmiFragment”.

Now, copy and paste the below lines into its layout xml file.


Layout for the add new BMI screen

Thenafter comes the Kotlin code for the AddNewBmiFragment::class.


AddNewBmiFragment::class

The result screen

Finally the last screen. On this screen, as you saw at the beginning of this lecture, the layout will contain

      • the value of the result,
      • some texts evaluation
      • and the range of points for a healthy value.

Again, create a new package with the name of “result”, then there we need a Fragment with ViewModel. The name of the Fragment:ResultFragment

… and the code of the layout file.


Layout of the result screen

And finally the source code of the ResultFragment::class.


Source code of ResultFragment::class

GitHub

The source code is available on GitHub.

BmiCalculator

Questions

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

See you in the next lecture.


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 *