Build Your First Mobile App With Android Studio
Do you know the basics of Java? And ever wished to develop your own apps? Then this article is for you! Just with your basic knowledge of java, we will be creating a simple android app that will be a BMI Calculator.
So, before we move ahead,
What is BMI?
Body Mass Index (BMI) is a measurement of a person’s weight with respect to his or her height. It is more of an indicator than a direct measurement of a person’s total body fat.
BMI, more often than not, correlates with total body fat. This means that as the BMI score increases, so does a person’s total body fat.
So we will create a simple BMI Calculator app that would look like below,
But, What is a CMS(Content Management System)?
A content management system (CMS) is a software platform that enables users to add, publish, modify, and manage website content without requiring users to have specialized programming knowledge.
Prerequisites are,
- Basics of Java
- Access to Android Studio
- The formula of BMI, BMI = weight / (height) 2
We will be following the below BMI Index,
So, we will follow the above chart to calculate BMI and determine results. So let’s get started.
Fire up your android studio and create a new project and name it as “BMI Calculator”
Step 1: Creating the user interface
I assume you have a basic exposure to Android Studio. Thus, we know, we use XML files to create the user interface of our apps.
Thus, looking at the above UI we can see we will need the first two TextViews to hold the heading “BIM Calculator” and “Your Height in Cm”.
Next, we will need an EditText followed by Textview and EditText again!
Also, We will need a Button that will later have an Event Listener so that on click of the button, BMI gets calculated.
Finally, we will need three text views, one will hold the heading “Your result” and another two will act as a container where we will later show the BMI result and description of the BMI result.
Thus, below is our XML code, We will be using Linear Layout to position all the views linearly one of the other.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BMI Calculator"
android:textAllCaps="true"
android:textSize="26sp"
android:layout_marginVertical="25dp"
android:textColor="#212121"
/>
<TextView
android:layout_width="match_parent"
android:layout_marginHorizontal="50dp"
android:layout_height="wrap_content"
android:text="Your Height in Cm"
android:textColor="#000"
/>
<EditText
android:id="@+id/height"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="50dp"
android:layout_marginVertical="10dp"
android:paddingHorizontal="15dp"
android:paddingVertical="12dp"
android:inputType="numberDecimal"
/>
<TextView
android:layout_width="match_parent"
android:layout_marginHorizontal="50dp"
android:layout_height="wrap_content"
android:text="Your Weight in kg "
android:textColor="#000"
/>
<EditText
android:id="@+id/weight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="50dp"
android:layout_marginVertical="10dp"
android:paddingHorizontal="15dp"
android:paddingVertical="12dp"
android:inputType="numberDecimal"
/>
<Button
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="50dp"
android:text="Calculate"
android:textColor="#fafafa"
android:textSize="28sp"
android:background="#0984e3"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_marginHorizontal="50dp"
android:text="Your Result"
android:textAllCaps="true"
android:textSize="26sp"
android:layout_marginVertical="15dp"
/>
<TextView
android:id="@+id/result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=""
/>
<TextView
android:id="@+id/bmiCat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=""
/>
</LinearLayout>
TIP: Give meaning full names to the id’s of each view in XML.
Step 2: Developing the functional logic using Java
We will create a method called “myButtonListenerMethod()” that will hold the main logic and we will make a call to this method in our onCreate() method.
In myButtonListenerMethod(), we will add an event listener to our button, and then we will grab all the views using the findViewById() method.
Once done, we will get the value entered by the user using the getText() method. Since this value will be in the string form, we will convert it into Double. Once we get the height and weight entered by the user, simply we will calculate the BMI, and later we will use Decimal Format to format the decimal up to 2 single points.
Once we have the BMI, we will set it to the result Textview and use the above chart to get the description using simple if-else.
Below is our java code,
MainActivity.java
package com.easeprogramming.bmicalculator;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import java.text.DecimalFormat;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myButtonListenerMethod();
}
public void myButtonListenerMethod() {
Button button = findViewById(R.id.btn);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final EditText heightText = findViewById(R.id.height);
String heightStr = heightText.getText().toString();
double height = Double.parseDouble(heightStr);
double heightM = height/100;
final EditText weightText = findViewById(R.id.weight);
String weightStr = weightText.getText().toString();
double weight = Double.parseDouble(weightStr);
double BMI = (weight) / (heightM * heightM);
DecimalFormat df = new DecimalFormat("#.#");
double BMI_trimmed = Double.parseDouble(df.format(BMI));
final TextView BMIResult = findViewById(R.id.result);
BMIResult.setText(Double.toString(BMI_trimmed));
String BMI_Cat;
if (BMI < 15){
BMI_Cat = "Very severely underweight";
}
else if (BMI >= 15 && BMI < 16){
BMI_Cat = "Severely underweight";
}
else if (BMI >=16 && BMI < 18.5){
BMI_Cat = "Underweight";
}
else if (BMI >=18.5 && BMI < 25){
BMI_Cat = "Normal";
}
else if (BMI >= 25 && BMI < 30){
BMI_Cat = "Overweight";
}
else if (BMI>=30 && BMI < 35 ){
BMI_Cat = "Obese Class 1 - Moderately Obese";
}
else if (BMI>= 35 && BMI < 40){
BMI_Cat = "Obese Class 2 - Severely Obese";
}
else {
BMI_Cat = "Obese Class 3 - Very Severely Obese";
}
final TextView BMICategory = findViewById(R.id.bmiCat);
BMICategory.setText(BMI_Cat);
}
});
}
}
Get Set Go! We are ready now! Just hit the run button and your app will be ready, it will look like below once run and is ready to use,
Congratulations! You just created an amazing yet simple BMI app!
Want to learn Android Development? And create much more amazing apps, Try Programming Hero to master Android and learn programming in a fun way!
Related Post
If you spend 3–4 hours daily for 7 days, you will become a Junior Python Developer. I am providing this guideline using this android app called: Programming Hero.
I am taking all the examples from the Python learning app called Programming Hero: Coding Just Got Fun