How to Create a Calculator App in Android Studio – Easy 6 Steps Only!
Table of Contents
Calculator
We have created a simple calculator app in android studio which is entirely beginner friendly. It performs basic operations such as addition, subtraction, multiplication, division, and percentage.
It consists of numbers and commonly used buttons such as dot, clear, and switch-off buttons.
We have set onClickListener on each button and assigned them a particular task according to their functionality while the equals button will perform all the calculations. For that, we have created a different method called allCalculations() which will work on the if condition for all the operations.
With the help of the below steps, you can easily create a calculator app in android studio. The calculator app in the android studio is not advanced but well equipped for a beginner to use or present as a college project.
Step-by-Step Implementation
Step 1: Open Android Studio, Create New Project, Choose Empty Activity, and Click Finish.
Step 2: Add Color in the colors.xml file.
Add our brand color or any other color of your choice, we have used #8692f7 lavender color as our primary color.
Go to res -> values -> colors.xml and add the below line:
<color name="lavender">#8692f7</color>
Step 3: Change the theme colors.
We want to keep a constant color so we will change our theme color as well.
Go to res -> themes.xml and change two colors, colorPrimary, and colorPrimaryVariant. These two will change the action bar color and we also want to change the status bar color.
But, it will automatically get changed because the status bar color is already set to colorPrimaryVariant.
Let’s see the code:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Calculator" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/lavender</item>
<item name="colorPrimaryVariant">@color/lavender</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
Step 4: Create buttons_layout.xml.
We will create a different XML file for the button layout so that the code does not become congested in activity_main.xml then later we will include the layout file in our activity_main.xml seamlessly.
Right-click on res -> layout and click New -> Layout Resource File then name the file buttons_layout.xml.
Type the below code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rowCount="5"
android:columnCount="4">
<com.google.android.material.button.MaterialButton
android:id="@+id/off"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="OFF"
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_margin="3dp"
android:layout_row="0"
android:layout_column="0"
android:layout_columnWeight="1"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/clear"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="C"
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_margin="3dp"
android:layout_row="0"
android:layout_column="1"
android:layout_columnWeight="1"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/percent"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="%"
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_margin="3dp"
android:layout_row="0"
android:layout_column="2"
android:layout_columnWeight="1"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/division"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="÷"
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_margin="3dp"
android:layout_row="0"
android:layout_column="3"
android:layout_columnWeight="1"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn7"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="1"
android:layout_column="0"
android:layout_columnWeight="1"
android:text="7"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn8"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:text="8"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn9"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="1"
android:layout_column="2"
android:layout_columnWeight="1"
android:text="9"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/multiply"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="x"
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_marginLeft="3dp"
android:layout_row="1"
android:layout_column="3"
android:layout_columnWeight="1"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="2"
android:layout_column="0"
android:layout_columnWeight="1"
android:text="4"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="2"
android:layout_column="1"
android:layout_columnWeight="1"
android:text="5"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="2"
android:layout_column="2"
android:layout_columnWeight="1"
android:text="6"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/subtract"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="-"
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_marginLeft="3dp"
android:layout_row="2"
android:layout_column="3"
android:layout_columnWeight="1"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="3"
android:layout_column="0"
android:layout_columnWeight="1"
android:text="1"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="3"
android:layout_column="1"
android:layout_columnWeight="1"
android:text="2"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="3"
android:layout_column="2"
android:layout_columnWeight="1"
android:text="3"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="+"
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_marginLeft="3dp"
android:layout_row="3"
android:layout_column="3"
android:layout_columnWeight="1"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btn0"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="4"
android:layout_column="0"
android:layout_columnWeight="1"
android:text="0"
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/btnPoint"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_row="4"
android:layout_column="1"
android:layout_columnWeight="1"
android:text="."
android:textSize="25sp"
android:textColor="@color/lavender"
android:backgroundTint="@color/white"
app:strokeColor="@color/lavender"
app:strokeWidth="3dp"/>
<com.google.android.material.button.MaterialButton
android:id="@+id/equal"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="="
android:textColor="@color/white"
android:backgroundTint="@color/lavender"
android:textSize="25sp"
android:layout_marginLeft="3dp"
android:layout_row="4"
android:layout_column="2"
android:layout_columnSpan="2"
android:layout_columnWeight="1"/>
</GridLayout>
</RelativeLayout>
Step 5: Go to activity_main.xml.
In this activity, we will create an input and output display where our numbers and result will be displayed
For that, we will use two TextView one for input and another one for output.
We will also make sure to include the button layout in our activity.
Type the below code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="40sp"
android:textColor="@color/lavender"
android:padding="10dp"
android:layout_gravity="end"
android:id="@+id/input"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="60sp"
android:textColor="@color/lavender"
android:padding="10dp"
android:layout_gravity="end"
android:id="@+id/output"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="@color/white"
android:gravity="bottom">
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/buttons_layout"/>
</RelativeLayout>
</LinearLayout>
Step 6: Go to MainActivity.java.
In this activity, create all the variables for the buttons and then initialize all of them with their respective id.
Add on click listener to each and every button and perform operations in it.
We have created one method called as allCalculations() which calculates the results and displays them in the output display field.
Type the below code:
package com.example.calculator;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import com.google.android.material.button.MaterialButton;
import java.text.DecimalFormat;
public class MainActivity extends AppCompatActivity {
private static final char ADDITION = '+';
private static final char SUBTRACTION = '-';
private static final char MULTIPLICATION = '*';
private static final char DIVISION = '/';
private static final char PERCENT = '%';
private char currentSymbol;
private double firstValue = Double.NaN;
private double secondValue;
private TextView inputDisplay, outputDisplay;
private DecimalFormat decimalFormat;
private MaterialButton button0, button1, button2, button3, button4, button5, button6, button7, button8, button9,
buttonDot, buttonAdd, buttonSub, buttonMultiply, buttonDivide, buttonPercent, buttonClear, buttonOFF, buttonEqual;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
decimalFormat = new DecimalFormat("#.##########");
inputDisplay = findViewById(R.id.input);
outputDisplay = findViewById(R.id.output);
button0 = findViewById(R.id.btn0);
button1 = findViewById(R.id.btn1);
button2 = findViewById(R.id.btn2);
button3 = findViewById(R.id.btn3);
button4 = findViewById(R.id.btn4);
button5 = findViewById(R.id.btn5);
button6 = findViewById(R.id.btn6);
button7 = findViewById(R.id.btn7);
button8 = findViewById(R.id.btn8);
button9 = findViewById(R.id.btn9);
buttonAdd = findViewById(R.id.add);
buttonSub = findViewById(R.id.subtract);
buttonDivide = findViewById(R.id.division);
buttonDot = findViewById(R.id.btnPoint);
buttonMultiply = findViewById(R.id.multiply);
buttonClear = findViewById(R.id.clear);
buttonOFF = findViewById(R.id.off);
buttonEqual = findViewById(R.id.equal);
buttonPercent = findViewById(R.id.percent);
button0.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "0");
}
});
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "1");
}
});
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "2");
}
});
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "3");
}
});
button4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "4");
}
});
button5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "5");
}
});
button6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "6");
}
});
button7.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "7");
}
});
button8.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "8");
}
});
button9.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + "9");
}
});
buttonAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
allCalculations();
currentSymbol = ADDITION;
outputDisplay.setText(decimalFormat.format(firstValue) + "+");
inputDisplay.setText(null);
}
});
buttonSub.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
allCalculations();
currentSymbol = SUBTRACTION;
outputDisplay.setText(decimalFormat.format(firstValue) + "-");
inputDisplay.setText(null);
}
});
buttonMultiply.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
allCalculations();
currentSymbol = MULTIPLICATION;
outputDisplay.setText(decimalFormat.format(firstValue) + "x");
inputDisplay.setText(null);
}
});
buttonDivide.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
allCalculations();
currentSymbol = DIVISION;
outputDisplay.setText(decimalFormat.format(firstValue) + "/");
inputDisplay.setText(null);
}
});
buttonPercent.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
allCalculations();
currentSymbol = PERCENT;
outputDisplay.setText(decimalFormat.format(firstValue) + "%");
inputDisplay.setText(null);
}
});
buttonDot.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
inputDisplay.setText(inputDisplay.getText() + ".");
}
});
buttonClear.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (inputDisplay.getText().length() > 0) {
CharSequence currentText = inputDisplay.getText();
inputDisplay.setText(currentText.subSequence(0, currentText.length() - 1));
} else {
firstValue = Double.NaN;
secondValue = Double.NaN;
inputDisplay.setText("");
outputDisplay.setText("");
}
}
});
buttonOFF.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
});
buttonEqual.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
allCalculations();
outputDisplay.setText(decimalFormat.format(firstValue));
firstValue = Double.NaN;
currentSymbol = '0';
}
});
}
private void allCalculations(){
if (!Double.isNaN(firstValue)) {
secondValue = Double.parseDouble(inputDisplay.getText().toString());
inputDisplay.setText(null);
if (currentSymbol == ADDITION)
firstValue = this.firstValue + secondValue;
else if (currentSymbol == SUBTRACTION)
firstValue = this.firstValue - secondValue;
else if (currentSymbol == MULTIPLICATION)
firstValue = this.firstValue * secondValue;
else if (currentSymbol == DIVISION)
firstValue = this.firstValue / secondValue;
else if (currentSymbol == PERCENT)
firstValue = this.firstValue % secondValue;
} else {
try {
firstValue = Double.parseDouble(inputDisplay.getText().toString());
} catch (Exception e) {
}
}
}
}
Output
AK Bonus Point:
If you have any queries or errors, please feel free to comment below 🙂
Check our Previous Post: How to Create Login Page in Android Studio.
Check the Detailed YouTube Video: How to Create a Calculator App in Android Studio.
Please subscribe to my YouTube Channel 🙂
Thank you!😊🙌