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.

 


Make your first android app bmi calculator

 


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 it’s 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 don’t 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. 😉