Math App – Android Application

To understand from how to get text input from UI to display output by handling Button click event, let’s create an Android application to perform mathematical operations. For this purpose we have to do following task:

• Create GUI components with TextView, EditText, and Button, and
• Write Kotlin code for performing mathematical tasks.

In this application we will have functionality for addition, subtraction, division, multiplication, and modulus. We will be using ViewBinding to get UI reference. A little knowledge of Java/Kotlin or any OOP language will be helpful. You can follow the steps to create this application.

Create Project

In Android Studio create a project with following specifications.

Project Template	Empty Activity
Name	Math App
Package Name	com.pcsalt.example.mathapp
Language	Kotlin
Minimum SDK	API 21
Use Legacy android.support	Unchecked

Enable ViewBinding

ViewBinding provides easy access to the UI elements from XML. After this is enabled, a binding class is created for the layout files and it contains reference to the UI elements which can be referred in the class file. The ID provided in the XML will be used to name the element in view binding class. To enable ViewBinding put this line of code in android{} block of app level build.gradle

android{
    ...

    buildFeatures {
        viewBinding true
    }
}

Creating Layout: activity_main.xml

The layout will consist of 2 EditText for getting the number, 1 TextView for printing the output of the operations. 5 Buttons for operations viz. Add, Subtract, Multiply, Divide and Module.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:padding="8dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/et_num_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:autofillHints="@null"
        android:hint="Number 1"
        android:inputType="numberSigned"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/et_num_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:autofillHints="@null"
        android:hint="Number 2"
        android:inputType="numberSigned"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_num_1" />

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:height="30dp"
        android:gravity="center"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_num_2" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_add"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="8dp"
        android:text="+"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@id/btn_sub"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_result" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_sub"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="-"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/btn_add"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/btn_add"
        app:layout_constraintTop_toTopOf="@id/btn_add" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_mul"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:text="*"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@id/btn_div"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_add" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_div"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="/"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/btn_mul"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/btn_mul"
        app:layout_constraintTop_toTopOf="@id/btn_mul" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_module"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:text="%"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="@id/btn_div"
        app:layout_constraintStart_toStartOf="@id/btn_mul"
        app:layout_constraintTop_toBottomOf="@id/btn_mul" />

</androidx.constraintlayout.widget.ConstraintLayout>

If you run this app now you will have this view. Don’t worry about the warnings you are having in XML view. If you put all the text and hint in res/values/strings.xml then the warnings will go away.