Create your first Android Calculator

Scenario

You are going to create your first Android Calculator.

1. Launch Android Studio.

2. Select “Create New Project”. In the next screen, select “Empty Activity” then click “Next”.

3. Fill up the application settings with below configurations;

• Name: First Calculator
• Package Name: com.example.firstcalculator (auto-generated)
• Save location: select your directory or leave to default settings
• Language: Kotlin
• Minimum SDK: leave to default selection

Then click “Finish” to proceed.

Wait a few seconds while Android Studio prepares your project. Once the process completed, you may begin with your development.

4. Update build.gradle (Module:First_Calculator) to add the kotlin android extensions. Your settings (first few lines) should look something like below.

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
}

Once saved, you need to sync the project.

5. Click on “activity_main.xml” to open the layout file.

You have two ways to update the activity layout: Code or Design tab (or both if your screen is big enough to open split view).

Update the Activity Layout

1. Update your activity_main.xml to look something like below screenshots.

Sample codes to produce the above layout.

<?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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="158dp"
        android:layout_marginLeft="158dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="158dp"
        android:layout_marginRight="158dp"
        android:text="@string/first_calculator"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtNumber1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="43dp"
        android:layout_marginLeft="43dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="310dp"
        android:layout_marginRight="310dp"
        android:layout_marginBottom="20dp"
        android:text="@string/enter_number_1"
        app:layout_constraintBottom_toTopOf="@+id/txtNumber2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtNumber2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="43dp"
        android:layout_marginLeft="43dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="310dp"
        android:layout_marginRight="310dp"
        android:text="@string/enter_number_2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.488"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtNumber1" />

    <EditText
        android:id="@+id/editNumber1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/txtNumber1"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <EditText
        android:id="@+id/editNumber2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.512"
        app:layout_constraintStart_toEndOf="@+id/txtNumber2"
        app:layout_constraintTop_toBottomOf="@+id/editNumber1" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:layout_marginBottom="700dp"
        android:orientation="horizontal"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editNumber2">

        <Button
            android:id="@+id/btnAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="+"
            android:textSize="24sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btnSub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="-"
            android:textSize="24sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btnMul"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="*"
            android:textSize="24sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btnDiv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="/"
            android:textSize="24sp"
            android:textStyle="bold" />
    </LinearLayout>

    <TextView
        android:id="@+id/txtResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="175dp"
        android:layout_marginLeft="175dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="178dp"
        android:layout_marginRight="178dp"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />


</androidx.constraintlayout.widget.ConstraintLayout>

Add the Application Codes

1. Now, we can move to the processing codes. To do that open MainActivity.kt
2. Add codes to retrieve references to EditText views.

// retrieve references to user input text
var num1 = editNumber1.text
var num2 = editNumber2.text

3. Next is to add onclick event listeners to each button.

// set onclick event listeners to each button
btnAdd.setOnClickListener {
    var result = num1.toString().toDouble() + num2.toString().toDouble()
    txtResult.text = result.toString()
}

btnSub.setOnClickListener {
    var result = num1.toString().toDouble() - num2.toString().toDouble()
    txtResult.text = result.toString()
}

btnMul.setOnClickListener {
    var result = num1.toString().toDouble() * num2.toString().toDouble()
    txtResult.text = result.toString()
}

btnDiv.setOnClickListener {
    var result = num1.toString().toDouble() / num2.toString().toDouble()
    txtResult.text = result.toString()
}

4. The completed codes should look like below.

package com.example.firstcalculator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

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

        // retrieve references to user input text
        var num1 = editNumber1.text
        var num2 = editNumber2.text

        // set onclick event listeners to each button
        btnAdd.setOnClickListener {
            var result = num1.toString().toDouble() + num2.toString().toDouble()
            txtResult.text = result.toString()
        }

        btnSub.setOnClickListener {
            var result = num1.toString().toDouble() - num2.toString().toDouble()
            txtResult.text = result.toString()
        }

        btnMul.setOnClickListener {
            var result = num1.toString().toDouble() * num2.toString().toDouble()
            txtResult.text = result.toString()
        }

        btnDiv.setOnClickListener {
            var result = num1.toString().toDouble() / num2.toString().toDouble()
            txtResult.text = result.toString()
        }
    }
}

Run the First Calculator App

Try run the app and test it with simple calculation.