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 the next button gives your application the name Calculator App and leave 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.
How to add Firebase to Android App | 2 Ways of Adding
Pingback: Media Player | Tutorial - Developers Dome
Pingback: Webview Example Tutorial in Android Studio - Developers Dome
Pingback: Video Player in Android Studio with Example - Developers Dome
Pingback: Eye Detecting Video Player in Android Studio - Developers Dome