Basic Calculator with Kotlin and Android Studio

basic calculator kotlin android-312018

In this tutorial, I will make a tutorial about basic calculator using Kotlin and Android Studio, about the basic calculator only basic mathematical operations such as Addition, Subtraction, Multiplication, and Division. I will make 2 EditView as input form, 2 TextView as label, 1 TextView as result calculator form and 4 Button as basic mathematical operations, design interface can be seen as the picture below.

design interface basic calculator using android studio
Design interface calculator

To make this basic calculator, follow step by step as below:
1. Create new project in Android Studio, don’t forget to checkbox Kotlin
2. Design interface with edit file activity_main.xml

<TextView
    android:id="@+id/text1"
    android:layout_width="207dp"
    android:layout_height="19dp"
    android:text="Number 2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.09"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.217" />

<TextView
    android:id="@+id/text2"
    android:layout_width="207dp"
    android:layout_height="21dp"
    android:text="Number 1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.09"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.032" />

<TextView
    android:id="@+id/text3"
    android:layout_width="207dp"
    android:layout_height="63dp"
    android:text="Result: !!!"
    android:textSize="45sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.09"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.58" />

<EditText
    android:id="@+id/edit1"
    android:layout_width="217dp"
    android:layout_height="47dp"
    android:ems="10"
    android:inputType="number"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.094"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.1" />

<EditText
    android:id="@+id/edit2"
    android:layout_width="217dp"
    android:layout_height="44dp"
    android:ems="10"
    android:inputType="number"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.095"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.293" />

<Button
    android:id="@+id/but1"
    android:layout_width="57dp"
    android:layout_height="49dp"
    android:text="+"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.054"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.419" />

<Button
    android:id="@+id/but2"
    android:layout_width="61dp"
    android:layout_height="49dp"
    android:text="-"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.256"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.419" />

<Button
    android:id="@+id/but3"
    android:layout_width="55dp"
    android:layout_height="48dp"
    android:text="x"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.465"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.419" />

<Button
    android:id="@+id/but4"
    android:layout_width="55dp"
    android:layout_height="48dp"
    android:text="/"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.653"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.419" />

3. Call id from xml to kotlin file

val text1 = findViewById<TextView>(R.id.text1) as TextView
val text2 = findViewById<TextView>(R.id.text2) as TextView
val text3 = findViewById<TextView>(R.id.text3) as TextView
text1.text = "Input number one"
text2.text = "Input number two"

val edit1 = findViewById<EditText>(R.id.edit1) as EditText
val edit2 = findViewById<EditText>(R.id.edit2) as EditText

val but1 = findViewById<Button>(R.id.but1) as Button
val but2 = findViewById<Button>(R.id.but2) as Button
val but3 = findViewById<Button>(R.id.but3) as Button
val but4 = findViewById<Button>(R.id.but4) as Button

3. Create action behavior for buttons basic mathematical operations
3.1 Addition

but1.setOnClickListener {
    val result: Int = edit1.text.toString().toInt() + edit2.text.toString().toInt()
    text3.text = result.toString()
}

3.2 Subtraction

but2.setOnClickListener {
    val result: Int  = edit1.text.toString().toInt() - edit2.text.toString().toInt()
    text3.text = result.toString()
}

3.3 Multiplication

but3.setOnClickListener {
    val result: Int  = edit1.text.toString().toInt() * edit2.text.toString().toInt()
    text3.text = result.toString()
}

3.4 Division

but4.setOnClickListener {
    val result: Int  = edit1.text.toString().toInt() / edit2.text.toString().toInt()
    text3.text = result.toString()
}

4. Done!

Full source code as below:

MainActivity.kt

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val text1 = findViewById<TextView>(R.id.text1) as TextView
        val text2 = findViewById<TextView>(R.id.text2) as TextView
        val text3 = findViewById<TextView>(R.id.text3) as TextView
        text1.text = "Input number one"
        text2.text = "Input number two"

        val edit1 = findViewById<EditText>(R.id.edit1) as EditText
        val edit2 = findViewById<EditText>(R.id.edit2) as EditText

        val but1 = findViewById<Button>(R.id.but1) as Button
        val but2 = findViewById<Button>(R.id.but2) as Button
        val but3 = findViewById<Button>(R.id.but3) as Button
        val but4 = findViewById<Button>(R.id.but4) as Button

        but1.setOnClickListener {
            val result: Int = edit1.text.toString().toInt() + edit2.text.toString().toInt()
            text3.text = result.toString()
        }
        but2.setOnClickListener {
            val result: Int  = edit1.text.toString().toInt() - edit2.text.toString().toInt()
            text3.text = result.toString()
        }
        but3.setOnClickListener {
            val result: Int  = edit1.text.toString().toInt() * edit2.text.toString().toInt()
            text3.text = result.toString()
        }
        but4.setOnClickListener {
            val result: Int  = edit1.text.toString().toInt() / edit2.text.toString().toInt()
            text3.text = result.toString()
        }

    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context="com.kautube.test.simplecalculator.MainActivity">

    <TextView
        android:id="@+id/text1"
        android:layout_width="207dp"
        android:layout_height="19dp"
        android:text="Number 2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.09"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.217" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="207dp"
        android:layout_height="21dp"
        android:text="Number 1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.09"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.032" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="207dp"
        android:layout_height="63dp"
        android:text="Result: !!!"
        android:textSize="45sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.09"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58" />

    <EditText
        android:id="@+id/edit1"
        android:layout_width="217dp"
        android:layout_height="47dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.094"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />

    <EditText
        android:id="@+id/edit2"
        android:layout_width="217dp"
        android:layout_height="44dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.095"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.293" />

    <Button
        android:id="@+id/but1"
        android:layout_width="57dp"
        android:layout_height="49dp"
        android:text="+"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.054"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.419" />

    <Button
        android:id="@+id/but2"
        android:layout_width="61dp"
        android:layout_height="49dp"
        android:text="-"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.256"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.419" />

    <Button
        android:id="@+id/but3"
        android:layout_width="55dp"
        android:layout_height="48dp"
        android:text="x"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.465"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.419" />

    <Button
        android:id="@+id/but4"
        android:layout_width="55dp"
        android:layout_height="48dp"
        android:text="/"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.653"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.419" />

</android.support.constraint.ConstraintLayout>

Screenshot basic calculator as the picture below:

basic calculator kotlin android-312018