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:
- Go to File -> New -> New Project and you will get a window. Now under Phone and Tablet tab, select Empty Activity and click Next.
- Now give a Name and Package Name for your project and select the language as Kotlin.
- Ensure that the minimum API level is API 15 as it would work on almost every android device available. Click Finish to continue.
Step 2: Open the required files:
- On the leftmost side of the Android Studio, you would see Project tab.Click on it. A palette will appear.
- Go to app -> java -> “your package name” -> MainActivity and open this file.
- Similarly go to res-> layout -> activity_main -> activity_main.xml and open this file.
- For adding user defined colors, you need to open color.xml file which is under res -> values.
Step 3: Designing the User Interface:
We are going to design the interface of calculator similar to the one depicted below:
We can divide this interface into 3 parts:
- This section is designed using Plain text component.
- This section is similar to a table. Therefore, TableLayout is used with 4 TableRow with 4 Button each of same size.
- 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:-
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.
- 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.
- buOpEvent function is created to assigned the operation buttons to op variable which will then be used to make the calculations.
- Function named buEqualEvent is created to calculate the finalNumber using the oldNumber and newNumber. This function also displays the answer in the view box.
- 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.
- 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:-
- 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
- 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).
- 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….