Make a BMI Calculator App in Android Studio and Kotlin

in this tutorial, I will show you how to make a simple BMI app using Kotlin and Android Studio. A BMI calculator is an app that will calculate your body mass index and tells you if you are normal, overweight or underweight. it's a good project that a beginner should learn to make because it will teach you how to get XML component in Kotlin, how to add a click listener to a button and how to format float numbers and display them. so let's start.

The App Design

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/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"

        android:background="@drawable/edit_bg"

        />

    <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"

        android:background="@drawable/edit_bg"

        />

    <Button

        android:id="@+id/btn"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginHorizontal="50dp"

        android:text="Calculate"

        android:background="@drawable/button_bg"

        android:textColor="#fafafa"

        />

    <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="60sp"

        android:text="23"

        />

</LinearLayout>

in the drawable file: mouse right-click > new > drawable resource file> name it button_bg > paste the code bellow

button_bg.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="80dp"/>

    <solid android:color="@color/colorAccent"/>

</shape>

in the drawable file: mouse right-click > new > drawable resource file> name it edit_bg> paste the code bellow

edit_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="8dp"/>

    <stroke android:color="@color/colorAccent" 
            android:width="2dp"/>

</shape>

now let's add the main functionality of our app in the MainActivity

MainActivity.kt:

package tn.doctorcode.bmi

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        btn.setOnClickListener {

            val h = (height.text).toString().toFloat() /100

            val w = weight.text.toString().toFloat()

            val res = w/(h*h)

            result.text = "%.2f".format(res)

        }

    }

}

Thank you for your attention, as Always you can suggest us any kind of project and we will build it