How to Build a BMI (Body Mass Index) Calculator App For Android - Hive Programmer

Greetings to my favorite science community online, StemSocial.

It's @skyehi and I'm excited to be back to continue my series on Android App development tutorials for beginners.

These days, as our smartphones get smarter and more advanced, we're able to develop a lot of helpful Apps that we couldn't develop in the past. For today's tutorial we're going to be developing another calculator.

Original Image Source by Christina Morillo from Pexels

Now this is not your usual mathematical calculator of additions and multiplications but one that would help the user calculate their own BMI, Body Mass Index.

For those that may not be familiar with what BMI is, it's a numerical measure that's based on an individual's height and weight.

We mostly use this measure to figure out a person's body composition and categorize different people into different weight status.

So guys, people that are interested in knowing their BMI would definitely find BMI calculators very helpful which is what inspired this episode in my series.

I hope you're ready to build another awesome App, let's get started with today's work

Prerequisites

As usual, for the sake of newcomers to my series I'll just share the prerequisites with everyone.

Before you can go through with this tutorial and successfully build Android Apps, please ensure that you have Android Studio IDE installed on your PC because that's the platform we'll be using to build our Apps.

Also the logic or backend code of our BMI App will be written in Java programming language so please ensure that you've got Java Development Kit, JDK software properly installed on your PC.

I did a separate blog teaching this particular step so if you're having trouble with the installations, please let me know in the comments and I'll be of help.

At this point I'll assume my readers have successfully installed the required softwares.

Let's continue with our work

Setting up Our Android Project

Alright guys, let's create a new project by opening Android studio software on PC and clicking on "Create a new Android Project" .

As always we'll choose "Empty Activity" as the template of our App to avoid any complications in the design since this is still a beginner's tutorial.

Also choose a great and appropriate App name and package name of your App. Since it's Java programming language we'll be using, ensure that Java is the selected programming language and not Kotlin.

When you're through with the project configuration, click on the "finish" button, sit back and let Android Studio prepare your new project for you.

Designing our BMI User Interface

So guys, we're going to start with the user interface. Usually, as a developer it's recommended that you sit down with a piece of paper or maybe a drawing screen if you know how to use that, and create a sketch of how your app would work.

That sketch would always help you create the real thing. It would be more like a model of your App structure

For our BMI App we'll be making calculations using the user's height and weight so we definitely need to create editText elements to receive that input.

We also need a button the user can press to start the calculation after putting in the weight and height.

Finally we would need to create a TextView to display the results of the calculation.

Pretty simple and easy, but you are totally free to improve on this design and add new elements based on your preferences and your plan for how effective or feature rich the BMI App would be.

In future designs we can include name of user, a history of calculations and a way to share that information.

Here's how our basic BMI App design layout code should look like

(html comment removed:  MainActivity.xml )
<EditText
    android:id="@+id/editTextHeight"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter Height (cm)" />

<EditText
    android:id="@+id/editTextWeight"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter Weight (kg)" />

<Button
    android:id="@+id/btnCalculate"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Calculate BMI" />

<TextView
    android:id="@+id/textViewResult"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="BMI Result" />

Handling User Input

Alright guys it's time to start working on the backend. Based on the simplicity of our App, all the backend code would be written inside one Java file, the MainActivity.java file.

The first thing we want to do is to write a code to retrieve user input from EditText widgets in the MainActivity.java file.

So when the user adds their Height and Weight our App would retrieve that data to start the calculation.

So what we need to do is to Initialize the editText and Button elements using the findViewById method.

Here's how your code should look like

// MainActivity.java
EditText editTextHeight = findViewById(R.id.editTextHeight);
EditText editTextWeight = findViewById(R.id.editTextWeight);
Button btnCalculate = findViewById(R.id.btnCalculate);
TextView textViewResult = findViewById(R.id.textViewResult);

BMI Calculation Logic

After retrieving the data, we need to write the code that makes the actual BMI calculations. This would require that we use the BMI formula.

The formula in our algorithm would look something like this weight / Math.pow((height / 100), 2)

If you're familiar with BMI calculations, you'll totally get it but if you're not, don't worry guys just use the formula and also comment down below for more explanation if needed.

To implement the BMI formula in the MainActivity.java file we first create two Double variables that would represent the height and weight inputs and then use the formula to calculate our BMI.

Here's how the calculation code would look like.

// MainActivity.java
double height = Double.parseDouble(editTextHeight.getText().toString());
double weight = Double.parseDouble(editTextWeight.getText().toString());
double bmi = weight / Math.pow((height / 100), 2);

Displaying our Final Results

Now when the calculations are complete, we then have to display the results inside the textView layout we created.

We'll simply use the setText method to update the TextView dynamically to display the calculated BMI result.

This would also be written inside the MainActivity.java file.

It's a straightforward one line of code and would look like this;

// MainActivity.java
textViewResult.setText(String.format("Your BMI: %.2f", bmi));

Adding a Reset Button

Now guys to further improve our App we can add a reset button to reset input fields and clear the results as well.

Of course I didn't add that to the layout design so you can totally add that one. It's just another button like the calculate button. I intentionally left that part out so you can do it yourself and feel proud of your work.

Here's how the reset code should look like, so just create another button in layout and give it an id name - btnReset

// MainActivity.java
Button btnReset = findViewById(R.id.btnReset);
btnReset.setOnClickListener(v -> {
    editTextHeight.setText("");
    editTextWeight.setText("");
    textViewResult.setText("BMI Result");
});

Testing our BMI App

Congratulations guys, you've built your first BMI calculator App. You can now test the App either on an emulator or physical Android device.

When you run the BMI Calculator App and it launches, first enter your height and weight in the respective editText fields and press the "Calculate BMI" button and you should see your own Body Mass Index displayed.

You can click the reset button to clear everything and do it again.

---

Thank you so much for taking the time to read this blog. I hope you enjoyed today's tutorial. As you keep practicing and building different Apps, you're eventually going to get good at developing Apps.

Have a great day and catch you next time on StemSocial. Goodbye 👨‍💻

You Can Follow Me @skyehi For More Like This And Others