Calculator app

How to Create Calculator App with Example in Android

Today, we will learn how to implement a simple calculator app in Android Studio. In this article, we will learn about the complete development of the project.

Build a simple calculator app that can perform basic arithmetic operations based on user input, such as addition, subtraction, multiplication, or division. We have attached a sample video to help you understand what we have done in this article.

We will implement this project in Kotlin language with data binding.

Implementation of calculator app:

  • Open Android Studio.
  • Start a New Android Studio Project by clicking the button File/New/New Project -> Empty Activity and Next.
  • After clicking next button giving your application the name Calculator App and leaving the other fields blank.
  • Select the Minimum SDK as per your requirement and click finish.

Preview: Simple Calculator Application

<– Simple Calculator Application

File: themes.xml

  • Add the code given below in your themes.xml file.
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ActionButtonStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@color/actionButton</item>
        <item name = "android:textSize">21sp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">0.5dp</item>

    </style>

    <style name="NumberButtonStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@color/numberActionButton</item>
        <item name = "android:textSize">21sp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">0.5dp</item>
    </style>

    <style name="EqualButtonStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@color/equalButton</item>
        <item name = "android:textSize">21sp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">0.5dp</item>
    </style>

    <style name="NumberActionButton2">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@color/numberActionButton2</item>
        <item name ="android:textSize">21sp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">0.5dp</item>
    </style>

</resources>

File: color.xml

  • Add the code given below in your color.xml file.
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>

    /////colors
    <color name="colorPrimary">#000000</color>
    <color name = "white">#ffffff</color>
    <color name="colorPrimaryDark">#cccccc</color>
    <color name="colorAccent">#FF4081</color>
    <color name = "actionButton">#808080</color>
    <color name = "equalButton">#FF0000</color>
    <color name="numberActionButton">#000000</color>
    <color name = "numberActionButton2">#373737</color>

</resources>

File: MainActivity.kt

  • Add the Kotlin code given below in your file MainActivity.kt
package com.sagar.calculator


import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.sagar.calculator.databinding.ActivityMainBinding
import net.objecthunter.exp4j.ExpressionBuilder

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)



        binding.One.setOnClickListener {
           Evaluate("1", clear = true)

        }
        binding.Two.setOnClickListener {
           Evaluate("2", clear = true)
        }

        binding.Three.setOnClickListener {
           Evaluate("3", clear = true)
        }
        binding.Four.setOnClickListener {
           Evaluate("4", clear = true)
        }

        binding.Five.setOnClickListener {
           Evaluate("5", clear = true)
        }

        binding.Six.setOnClickListener {
           Evaluate("6", clear = true)
        }

        binding.Seven.setOnClickListener {
           Evaluate("7", clear = true)
        }

        binding.Eight.setOnClickListener {
           Evaluate("8", clear = true)
        }

        binding.Nine.setOnClickListener {
           Evaluate("9", clear = true)
        }

        binding.Zero.setOnClickListener {
           Evaluate("0", clear = true)
        }

        /*Operators*/

        binding.Plus.setOnClickListener {
           Evaluate("+", clear = true)
        }

        binding.Minus.setOnClickListener {
           Evaluate("-", clear = true)
        }

        binding.Mul.setOnClickListener {
           Evaluate("*", clear = true)
        }

        binding.Divide.setOnClickListener {
           Evaluate("/", clear = true)
        }

        binding.Dot.setOnClickListener {
           Evaluate(".", clear = true)
        }

        binding.Clear.setOnClickListener {
            binding.Expression.text = ""
            binding.Result.text = ""
        }
        binding.Equals.setOnClickListener {
            val text = binding.Expression.text.toString()
            val expression = ExpressionBuilder(text).build()

            val result = expression.evaluate()
            val longResult = result.toLong()
            if (result == longResult.toDouble()) {
                binding.Result.text = longResult.toString()
            } else {
                binding.Result.text = result.toString()
            }
        }
        binding.Back.setOnClickListener {
            val text = binding.Expression.text.toString()
            if (text.isNotEmpty()) {
                binding.Expression.text = text.drop(1)
            } else {

                binding.Result.text = ""
            }
        }

    }

    private fun Evaluate(string: String, clear: Boolean) {

        if (clear) {
            binding.Result.text = ""
            binding.Expression.append(string)
        } else {
            binding.Expression.append(binding.Result.text)
            binding.Expression.append(string)
            binding.Result.text = ""
        }
    }
}

File: activity_main.xml

  • Add the xml code given below in your file activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:background="@android:color/black"
        android:orientation="vertical">

        <TextView
            android:id="@+id/Expression"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:textColor="@color/actionButton"
            android:layout_gravity="end"
            android:ellipsize="start"
            android:singleLine="true"
            android:textSize="40sp" />


        <TextView
            android:id="@+id/Result"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:textColor="@color/white"
            android:layout_gravity="end"
            android:ellipsize="end"
            android:singleLine="true"
            android:textSize="30sp" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/Clear"
                    style="@style/ActionButtonStyle"
                    android:text="CLEAR" />

                <TextView
                    android:id="@+id/Divide"
                    style="@style/ActionButtonStyle"
                    android:text="/" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/Seven"
                    style="@style/NumberButtonStyle"
                    android:text="7" />

                <TextView
                    android:id="@+id/Eight"
                    style="@style/NumberButtonStyle"
                    android:text="8" />

                <TextView
                    android:id="@+id/Nine"
                    style="@style/NumberButtonStyle"
                    android:text="9" />

                <TextView
                    android:id="@+id/Mul"
                    style="@style/NumberActionButton2"
                    android:text="*" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/Four"
                    style="@style/NumberButtonStyle"
                    android:text="4" />

                <TextView
                    android:id="@+id/Five"
                    style="@style/NumberButtonStyle"
                    android:text="5" />

                <TextView
                    android:id="@+id/Six"
                    style="@style/NumberButtonStyle"
                    android:text="6" />

                <TextView
                    android:id="@+id/Minus"
                    style="@style/NumberActionButton2"
                    android:text="-" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/One"
                    style="@style/NumberButtonStyle"
                    android:text="1" />

                <TextView
                    android:id="@+id/Two"
                    style="@style/NumberButtonStyle"
                    android:text="2" />

                <TextView
                    android:id="@+id/Three"
                    style="@style/NumberButtonStyle"
                    android:text="3" />

                <TextView
                    android:id="@+id/Plus"
                    style="@style/NumberActionButton2"
                    android:text="+" />


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/Dot"
                    style="@style/NumberButtonStyle"
                    android:text="." />

                <TextView
                    android:id="@+id/Zero"
                    style="@style/NumberButtonStyle"
                    android:text="0" />

                <TextView
                    android:id="@+id/Back"
                    style="@style/NumberButtonStyle"
                    android:text="DEL" />

                <TextView
                    android:id="@+id/Equals"
                    style="@style/EqualButtonStyle"
                    android:text="=" />


            </LinearLayout>

        </LinearLayout>


    </LinearLayout>
</layout>
  • We hope that this guide will assist you in quickly creating a simple WebView Android app. If you have any problems, please post them in the comments section and we will gladly assist you.

Creating a Flashlight Android Application

Complete Happy Birthday App in Android

This Post Has 4 Comments

Leave a Reply