Site icon PCSalt

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:

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 TemplateEmpty Activity
NameMath App
Package Namecom.pcsalt.example.mathapp
LanguageKotlin
Minimum SDKAPI 21
Use Legacy android.supportUnchecked

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.

Exit mobile version