Make Your First Android App- BMI

Calculator

Fugo Of FormGet

In this blog, we will make our First Android applications by using text views, button
and image view for background. You can learn about Views in Android from our
previous blog.

BMI Android Application will take weight and height from the users to calculate Body
Mass Index (BMI) with the information, whether user is underweight, normal or
overweight.

In previous blogs we have already learned how to make an android application project
and basic designing using views in XML that you can refer first before moving forward
in this post.
Download script LIVE DEMO & GET WP THEME

Designing First Android Application (BMI Calculator)

For making an application we have to design the content using XML that how will it
look at application screen.

For designing BMI application:

Choose any layout on which application is to be designed (Eg: Linear Layout

etc.).

Get any desired background; copy paste your desired image in Drawable folder
then access it from @drawable/image_name.

Text views To display content like BMI Calculator, weight, height and final
result.

Edit texts To get the input values for height and weight.

Button To get the result when its clicked.

After you have done the proper designing, then to implement the desired features in the
application you need to it using java, that we have explained later in this blog.

Running of application:
Download the code from the link provided above and follow the steps given in
install.txt file to run the project on your PC.

There is a .apk file given in the live demo section. You can also download that file
to run it on your Android devices (Mobile Phones).

Working:

In PC:
Right click on your project, select Run as and then select your desired device. Then
enter your height and weight, you will get your BMI below the Calculate button.

In Android Devices:

Download .apk file and install it. The app icon will start showing up on your menus
section. Run the app and follow the steps as given above.

This app will tell you that your BMI is normal or you are underweight or overweight. If
you dont enter any value in height and weight columns it will automatically ask to
input it.

XML coding
Now we will see XML coding of this application which is used for designing front view
of application.

Activity_main.xml

XML file provide basic environment or design for your android application. By using
different views and layouts you can design application of your choice. For this you just
have to know the basic XML Tags for designing interface.

<!-- Linear layout start here -->

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/green_back"
android:fadingEdge="horizontal"
android:orientation="vertical" >

<!-- Text view for BMI Text -->

<TextView
android:id="@+id/tv1"
android:layout_width="124dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="15dp"
android:paddingTop="40dp"
android:shadowColor="@android:color/black"
android:shadowDx="4"
android:shadowDy="4"
android:text="BMI"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@android:color/white"
android:textSize="50sp"
android:typeface="serif" />

<!-- Textview for calculator text -->

<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Calculator"
android:textColor="@android:color/white"
android:textSize="20dp"
android:textStyle="bold" />

<!-- Textview for WEIGHT(KG) text -->

<TextView
android:id="@+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="30dp"
android:text="WEIGHT (KG)"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/white"
android:textStyle="bold|italic"
android:typeface="serif" />

<!-- Edit text for entering weight with hint in kgs -->
<EditText
android:id="@+id/et1"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="IN KGs"
android:ems="10"
android:fadingEdgeLength="10dp"
android:inputType="numberDecimal"
android:textAlignment="center" >
<requestFocus />
</EditText>

<!-- Text view for HEIGHT(CM)text -->

<TextView
android:id="@+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="30dp"
android:text="HEIGHT (CM)"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/white"
android:textStyle="bold|italic"
android:typeface="serif" />

<!-- Edit text for entering height with hint in cm -->

<EditText
android:id="@+id/et2"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="IN CMs"
android:ems="10"
android:inputType="numberDecimal" >
</EditText>
<!-- Button for calculating the formula, when pressed, with calculate
written over it -->
<Button
android:id="@+id/ib1"
android:layout_width="158dp"
android:layout_height="51dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:fadingEdge="vertical"
android:longClickable="true"
android:nextFocusRight="@color/black"
android:text="Calculate"
android:visibility="visible" />

<!-- Text view for showing result -->

<TextView
android:id="@+id/tv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="20dp"
android:text=""
android:textSize="20dp"
android:textStyle="bold"
android:textColor="@android:color/holo_orange_dark"/>

</LinearLayout>
<!-- Linear layout ends here -->

Java codes
While we create our project at that time an XML file and a java file is created
separately. MainActivity.java is the file where we do coding for java to implement logic
and functionality in the app.

MainActivity.java

After you have designed your application using XML coding, you have to use the
JAVA code so that when Calculate button is clicked, it calculates the value and show
you the desired result. This is done after designing the user interface. Java file can be
found in your project in src folder.

//Import necessary package and file

package com.magnetbrains;

import com.magnetbrains.R;

import android.os.Bundle;
import android.app.Activity;
import android.text.TextUtils;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
//Main activity class start here
public class MainActivity extends Activity {

//Define layout
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Get the references to the widgets

final EditText e1 = (EditText) findViewById(R.id.et1);
final EditText e2 = (EditText) findViewById(R.id.et2);
final TextView tv4 = (TextView) findViewById(R.id.tv4);

findViewById(R.id.ib1).setOnClickListener(new View.OnClickListener() {

// Logic for validation, input can't be empty

@Override
public void onClick(View v) {

String str1 = e1.getText().toString();

String str2 = e2.getText().toString();

if(TextUtils.isEmpty(str1)){
e1.setError("Please enter your weight");
e1.requestFocus();
return;
}

if(TextUtils.isEmpty(str2)){
e2.setError("Please enter your height");
e2.requestFocus();
return;
}

//Get the user values from the widget reference

float weight = Float.parseFloat(str1);
float height = Float.parseFloat(str2)/100;

//Calculate BMI value

float bmiValue = calculateBMI(weight, height);

//Define the meaning of the bmi value

String bmiInterpretation = interpretBMI(bmiValue);

tv4.setText(String.valueOf(bmiValue + "-" + bmiInterpretation));

}
});

//Calculate BMI
private float calculateBMI (float weight, float height) {
return (float) (weight / (height * height));
}

// Interpret what BMI means

private String interpretBMI(float bmiValue) {
if (bmiValue < 16) {
return "Severely underweight";
} else if (bmiValue < 18.5) {

return "Underweight";
} else if (bmiValue < 25) {

return "Normal";
} else if (bmiValue < 30) {

return "Overweight";
} else {
return "Obese";
}
}
}

Conclusion
Hope you had fun developing this app and seeing it running on your virtual device or
phone. This is just our first android application. Hope you explore more and develop
more android apps.For more updates and to learn more appliaction keep visiting our

website.

Make Your First Android App- BMI Calculator