Build A Simple Calculator Application For Android Using Kotlin And Android Studio

In this article, we will create a simple calculator android application which would be able to perform simple arithmetic calculations like addition, subtraction, multiplication, division and percentage depending upon the user’s input. Hope you are excited :)

Kotlin is a prerequisite for this project. Also, you need to install Android Studio on your computer which is an open source software available for download from here: https://developer.android.com/studio.

Let’s get started with our calculator android app:

Step 1: Create a project:

1. Go to File -> New -> New Project and you will get a window. Now under Phone and Tablet tab, select Empty Activity and click Next.
2. Now give a Name and Package Name for your project and select the language as Kotlin.
3. Ensure that the minimum API level is API 15 as it would work on almost every android device available. Click Finish to continue.

Creating a new project for the application

Step 2: Open the required files:

1. On the leftmost side of the Android Studio, you would see Project tab.Click on it. A palette will appear.
2. Go to app -> java -> “your package name” -> MainActivity and open this file.
3. Similarly go to res-> layout -> activity_main -> activity_main.xml and open this file.
4. For adding user defined colors, you need to open color.xml file which is under res -> values.

Required files for app development

Step 3: Designing the User Interface:

We are going to design the interface of calculator similar to the one depicted below:

User Interface for our app

We can divide this interface into 3 parts:

1. This section is designed using Plain text component.
2. This section is similar to a table. Therefore, TableLayout is used with 4 TableRow with 4 Button each of same size.
3. This section comprises of a LinearLayout(horizontal) with 3 Button including 1 button with double size and 2 same sized buttons as above.

This design would be implemented on a LinearLayout(vertical) .

You can design this layout in activity_main.xml file by a simple drag and drop option and customizing the attributes accordingly in the Design mode or write a code in the Text mode. The code for this interface would be:-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:background="@color/gray"
        android:layout_gravity="fill"
        android:layout_margin="0pt"
        android:layout_weight="1"
        android:orientation="vertical">
    //----------------FOR PART 1------------------
    <EditText
            android:layout_width="match_parent"
            android:inputType="textPersonName"
            android:ems="10"
            android:background="@color/gray"
            android:id="@+id/etShowNumber"
            android:text="0"
            android:gravity="right|bottom"
            android:textColor="@color/white"
            android:textSize="36sp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
    //----------------FOR PART 2------------------
    <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|fill"
            android:gravity="bottom|start|fill">

        <TableRow android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_marginBottom="1pt">
            <Button
                    android:text="AC"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/buAC"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:layout_marginRight="1pt"
                    android:onClick="buCleanEvent"/>
            <Button
                    android:text="+/-"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/buPlusMinus"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="%"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/buPer"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:layout_marginRight="1pt"
                    android:onClick="buPercentEvent"/>
            <Button
                    android:text="÷"
                    android:background="@color/buop"
                    android:textColor="@color/white"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/buDiv"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buOpEvent"/>
        </TableRow>
        <TableRow android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_marginBottom="1pt">
            <Button
                    android:text="7"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu7"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="8"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu8"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="9"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu9"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="X"
                    android:background="@color/buop"
                    android:textColor="@color/white"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/buMul"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buOpEvent"/>
        </TableRow>
        <TableRow android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_marginBottom="1pt">
            <Button
                    android:text="4"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu4" 
                    android:layout_weight="1"
                    android:textSize="18sp" 
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="5"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu5"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="6"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu6"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="-"
                    android:background="@color/buop"
                    android:textColor="@color/white"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/buSub"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buOpEvent"/>
        </TableRow>
        <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="1pt">
            <Button
                    android:text="1"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu1"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="2"
                    android:background="@color/whiteback"
                    android:layout_width="30pt"
                    android:layout_height="30pt"
                    android:id="@+id/bu2"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="3"
                    android:background="@color/whiteback"
                    android:layout_width="74dp"
                    android:layout_height="30pt"
                    android:id="@+id/bu3"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buNumberEvent"
                    android:layout_marginRight="1pt"/>
            <Button
                    android:text="+"
                    android:background="@color/buop"
                    android:textColor="@color/white"
                    android:layout_width="72dp"
                    android:layout_height="30pt"
                    android:id="@+id/buSum"
                    android:layout_weight="1"
                    android:textSize="18sp"
                    android:onClick="buOpEvent"/>
        </TableRow>
    </TableLayout>
    //----------------FOR PART 3------------------
    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:baselineAligned="true">
        <Button
                android:text="0"
                android:background="@color/whiteback"
                android:layout_height="30pt"
                android:id="@+id/bu0"
                android:layout_width="60pt"
                android:layout_weight="3.7"
                android:textSize="18sp"
                android:onClick="buNumberEvent"
                android:layout_marginRight="1pt"/>
        <Button
                android:text="."
                android:background="@color/whiteback"
                android:layout_height="30pt"
                android:id="@+id/buDot"
                android:layout_width="30pt"
                android:layout_weight="1.9"
                android:textSize="18sp"
                android:onClick="buNumberEvent"
                android:layout_marginRight="1pt"/>
        <Button
                android:text="="
                android:background="@color/buop"
                android:textColor="@color/white"
                android:layout_height="30pt"
                android:id="@+id/buEq"
                android:layout_weight="1.9"
                android:layout_width="30pt"
                android:textSize="18sp"
                android:onClick="buEqualEvent"/>
    </LinearLayout>
</LinearLayout>

For the user defined color scheme used in the above code, you need to make changes in the color.xml file:-

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    #user defined colors
    <color name="gray">#6B6B6D</color>
    <color name="whiteback">#D6D6D6</color>
    <color name="buop">#F79261</color>
    <color name="white">#FFFFFF</color>
</resources>

After these changes you would be able to see the interface for your simple calculator application:-

Designed UI for the calculator application

Step 3: Working with the Kotlin file to make a working application:

Till now, we have designed the interface for our simple application. Now is the crucial time! We need to code so that our application can actually work like a real calculator. So let’s get started.

1. For all the the numerical values, dot and +/- operator a function named buNumberEvent is created. This function will be responsible to display the numbers in the view box by clicking the corresponding buttons on the application. In case of a decimal number, it will also ensure that one can’t enter more than one dot in a number.
2. buOpEvent function is created to assigned the operation buttons to op variable which will then be used to make the calculations.
3. Function named buEqualEvent is created to calculate the finalNumber using the oldNumber and newNumber. This function also displays the answer in the view box.
4. For calculating the percentage buPercentEvent function is used which divides the value in the view box with 100 to find the percentage value and displays it.
5. At last, for cleaning the screen buCleanEvent is created which deletes all the data in the view box for new calculations.

Note:- Remember to set onClick attribute for each button to the name of corresponding functions listed above.

Code for these operations is done in MainActivity.kt file:-

package com.ravi.calculator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
var isNewOp=true
var dot=false
    fun buNumberEvent(view: View)
    {
        if(isNewOp)
        {
            etShowNumber.setText("")
        }
        isNewOp=false
        val buSelect= view as Button
        var buClickValue:String=etShowNumber.text.toString()
        when(buSelect.id)
        {
            bu0.id->
            {
                buClickValue+="0"
            }
            bu1.id->
            {
                buClickValue+="1"
            }
            bu2.id->
            {
                buClickValue+="2"
            }
            bu3.id->
            {
                buClickValue+="3"
            }
            bu4.id->
            {
                buClickValue+="4"
            }
            bu5.id->
            {
                buClickValue+="5"
            }
            bu6.id->
            {
                buClickValue+="6"
            }
            bu7.id->
            {
                buClickValue+="7"
            }
            bu8.id->
            {
                buClickValue+="8"
            }
            bu9.id->
            {
                buClickValue+="9"
            }
            buDot.id->
            {
                if(dot==false)
                {
                    buClickValue += "."
                }
                dot=true
            }
            buPlusMinus.id->
            {
                buClickValue="-" + buClickValue
            }
        }
        etShowNumber.setText(buClickValue)
    }
var op="X"
var oldNumber=""

    fun buOpEvent(view: View) 
    {
        val buSelect= view as Button
        when(buSelect.id)
        {
            buMul.id->
            {
                op="X"
            }
            buDiv.id->
            {
                op="÷"
            }
            buSub.id->
            {
                op="-"
            }
            buSum.id->
            {
                op="+"
            }
        }
        oldNumber=etShowNumber.text.toString()
        isNewOp=true
        dot=false
    }

    fun buEqualEvent(view: View)
    {
        val newNumber=etShowNumber.text.toString()
        var finalNumber:Double?=null
        when(op)
        {
            "X"->
            {
             finalNumber=oldNumber.toDouble() * newNumber.toDouble()
            }
            "÷"->
            {
             finalNumber=oldNumber.toDouble() / newNumber.toDouble()
            }
            "-"->
            {
             finalNumber=oldNumber.toDouble() - newNumber.toDouble()
            }
            "+"->
            {
             finalNumber=oldNumber.toDouble() + newNumber.toDouble()
            }
        }
        etShowNumber.setText(finalNumber.toString())
        isNewOp=true
    }

    fun buPercentEvent(view: View)
    {
        val number=(etShowNumber.text.toString().toDouble())/100
        etShowNumber.setText(number.toString())
        isNewOp=true
    }

    fun buCleanEvent(view: View)
    {
        etShowNumber.setText("")
        isNewOp=true
        dot=false
    }
}

Step 4: Running the Application:

Now you must be keen to run it on a real android smartphone. To do this you must follow these instructions:-

1. On your smartphone, go to Settings -> About Phone -> Software Information -> Build number. Click on this repeatedly until it you become a developer. Then go back to Settings and click on Developers option is set USB debugging as ON
2. Connect your android smartphone with your computer and from your phone, set the option for use USB for to MIDI (for some devices it may work on another mode).
3. Click on RUN (Shift+F10 on keyboard). Then select your connected device and click OK. It will take some time to build and install the apk. You can also create a virtual device to run on the emulator.

HURRAY !! We have developed an android application capable of performing simple calculations on our android smartphone :) I hope you enjoyed making this application and would love to see more in the future….