How to build a Simple calculator app in Android Studio using Kotlin

5 min readMar 14, 2020

In this tutorial we are going to be developing a Simple calculator application in android studio using kotlin.

Prerequisite

To get started with this tutorial you must have the following:

Basic understanding of kotlin /android programming
Know your way around android studio
Understand basic Object Oriented Programming rules.

I would also be adding links to some tutorials and lessons for those who are actual beginners so we can all learn from this tutorial. so lets get started.

The final app would look like this

Getting Started

Firstly, we need to setup our project so we are able to start building our application, to do that we start by creating an Empty activity in android studio

After selecting the Empty Activity click on the the Next button which takes you to the other page where we name our application and configure the project.

You can name your project whatever name you want, but in this tutorial we would be using SimpleCalculatorApp. We would be developing for the minimum sdk of API 19. and whoola! we are done creating our project.

Creating our Views

Now we head over to our activity_main.xml file which is located in the res folder in our project, so we need to customize our view.

activity_main.xml

So in the above xml code we made use of some other files while designing our UI, now lets work through that. For the TextView we have a background called text_bg, text_bg is not a part of android resource drawable but it is accessible because we created ours.

To create a drawable resource right click on the drawable folder and you would see Create new drawable resource, which then displays a pop up which allows you create a drawable resource. If you have issues creating a resource drawable click here

Our text_bg layout gives our textview a background color of #E7EBEE and also gives it rounded corner so it looks a little bit fancy.

Same for our button we gave it a color same as our textView and also the size of 50dp and height of 50dp.

MainActivity Code

The MainActivity holds all the functions that makes our application to function.

We would be making use of StringBuilder to display both our result and also append numbers onto our screen. StringBuilder is a mutable sequence of character which means you can append String, Double and Integer values into the StringBuilder to actually form a String value which you then cast to whatever type you want.

Explanation of the code

So firstly we append the 0 to our TextView which is the starting point to any simple numerical calculation (Sometimes it might be invisible), then we initialize our Buttons in the initializeButtons() function which also initalizes all of our other button like the functional buttons and operational button

We take our numericalButtons() function, this function appends the numbers on a specific button into our stringbuilder which then allows us to create a value that we display to the user and also use for our mathematical operation.

We have another function appendToDigitOnScreen() which takes a string parameter. The function helps add our button value into the screen builder and then display it directly to the screen

Now we move to the operationalButtons() function, the operational function consist of our math operators like addition, subtraction, division and multiplication

when you click on the math operators on the view passes the operator type into the selectionOperation() function

we have a global variable of type Char called operations, so whenever the user select an operation we assign the character type been passed to the global variable which would be later used in our calculation. After that we assign the current text in our stringbuilder to the lefthandside variable and clear our stringbuilder and start all over.

Before we move to the functionalButtons() function, we need some helper functions that help us with our calculation so we created an helper class called OperationsHelper

This helper class hold all our functions we would be using in our MainActivity later on.

Now our functionalButtons(), the functional button simply initializes the button on our view and instruct them to perform specific functions

The clear_everything_btn simply clears all the digit on the screen and returns the textview back to zero.

The clear button deletes the last digit on our screen same as the backspace.

The equalTo button performs our actual Mathematical Operation

so if we could recall when user selected an operator we named the value in our stringbuilder then as leftHandSide and cleared the stringbuilder, now that we have the leftHandSide we need our rightHandSide because you need leftHandSide + rightHandSide to give you a result (If you are doing addition). so now before the click on the equalTo button we must have entered some digit into the stringBuilder, now those digits are our rightHandSide.

So we create a when statement in kotlin which is like a switch case statement in java. so if the operator matches the operator been selected we perform our operation and append the solution to the screen so the user can see.