Build Your First Mobile App With Android Studio
Build Your First Mobile App With Android Studio
Build Your First Mobile App With Android Studio
Build Your First Mobile App With Android Studio
Build Your First Mobile App With Android Studio

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,

Programming Hero

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,

Programming Hero

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.

Programming Hero

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,

Programming Hero

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

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.

related post

I am taking all the examples from the Python learning app called Programming Hero: Coding Just Got Fun