How to Create Simple Calculator

Android App Using Android

Studio
Last Updated on August 20th, 2017 by   Kuldeep   21 comments

In my previous article I wrote detailed steps on How to create a simple android application. In
that particular app I also explained concepts of android button and basic concepts of android.

You can find all my other articles in Android section.

In this article we will create a  calculator android app . This is a simple calculator with
limited functionality.
Before we go forward it would be nice to go over complete HelloWorld Tutorial. Here is a link
again: My first HelloWorld Android App

 How to build a simple calculator app – full tutorial

 Building a Simple Calculator using Android Studio

 Android Development: Creating a Basic Calculator

 Create Simple Calculator Android App

 How to create a Calculator App for Android

Let’s get started with our calculator android

App:

Step-1

 Open your Android Studio

 Click on Start a New Android Studio Project.

 Give your Application Name  CrunchifyCalculator   and leave other fields blank as it

is, then click NEXT.

Step-2

 Select the Minimum SDK  API 15: Android 4.0.3(IceCreamSandwich) . I selected

API 15 (IceCreamSandwich) because it covers almost 94% device and it has almost all

the features. If you want to cover 100% device then you can select API 8: Android

2.2(Froyo).
Step-3

 Select the  Empty Activity  and click NEXT.

 Leave the activity name  MainActivity  as it is and leave everything as it is. Click

Finish.

Step-4

 After clicking Finish, it takes around around ~2 minutes to build Activity and files.

 Here is a final project structure for your application.

Step-5
  Now we have to add our Java code in our MainActivity.java file.
 So open you  MainActivity.java  file from left side of IDE (app  -> java ->

com.crunchify.tutorials.crunchifycalculator -> MainActivity.java)

You can find the explanation of highlighted line below the code.

package com.crunchify.tutorials.crunchifycalculator;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
 
public class MainActivity extends AppCompatActivity {
 
    Button button0, button1, button2, button3, button4, button5, button6,
            button7, button8, button9, buttonAdd, buttonSub, buttonDivision,
            buttonMul, button10, buttonC, buttonEqual;
    EditText crunchifyEditText;
 
    float mValueOne, mValueTwo;
 
    boolean crunchifyAddition, mSubtract, crunchifyMultiplication, crunchifyDivision;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        button0 = (Button) findViewById(R.id.button0);
        button1 = (Button) findViewById(R.id.button1);
        button2 = (Button) findViewById(R.id.button2);
        button3 = (Button) findViewById(R.id.button3);
        button4 = (Button) findViewById(R.id.button4);
        button5 = (Button) findViewById(R.id.button5);
        button6 = (Button) findViewById(R.id.button6);
        button7 = (Button) findViewById(R.id.button7);
        button8 = (Button) findViewById(R.id.button8);
        button9 = (Button) findViewById(R.id.button9);
        button10 = (Button) findViewById(R.id.button10);
        buttonAdd = (Button) findViewById(R.id.buttonadd);
        buttonSub = (Button) findViewById(R.id.buttonsub);
        buttonMul = (Button) findViewById(R.id.buttonmul);
        buttonDivision = (Button) findViewById(R.id.buttondiv);
        buttonC = (Button) findViewById(R.id.buttonC);
        buttonEqual = (Button) findViewById(R.id.buttoneql);
        crunchifyEditText = (EditText) findViewById(R.id.edt1);
 
 
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "1");
            }
        });
 
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "2");
            }
        });
 
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "3");
            }
        });
 
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "4");
            }
        });
 
        button5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "5");
            }
        });
 
        button6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "6");
            }
        });
 
        button7.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "7");
            }
        });
 
        button8.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "8");
            }
        });
 
        button9.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "9");
            }
        });
 
        button0.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + "0");
            }
        });
 
        buttonAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
 
                if (crunchifyEditText == null) {
                    crunchifyEditText.setText("");
                } else {
                    mValueOne = Float.parseFloat(crunchifyEditText.getText() + "");
                    crunchifyAddition = true;
                    crunchifyEditText.setText(null);
                }
            }
        });
 
        buttonSub.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mValueOne = Float.parseFloat(crunchifyEditText.getText() + "");
                mSubtract = true;
                crunchifyEditText.setText(null);
            }
        });
 
        buttonMul.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mValueOne = Float.parseFloat(crunchifyEditText.getText() + "");
                crunchifyMultiplication = true;
                crunchifyEditText.setText(null);
            }
        });
 
        buttonDivision.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mValueOne = Float.parseFloat(crunchifyEditText.getText() + "");
                crunchifyDivision = true;
                crunchifyEditText.setText(null);
            }
        });
 
        buttonEqual.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mValueTwo = Float.parseFloat(crunchifyEditText.getText() + "");
 
                if (crunchifyAddition == true) {
                    crunchifyEditText.setText(mValueOne + mValueTwo + "");
                    crunchifyAddition = false;
                }
 
                if (mSubtract == true) {
                    crunchifyEditText.setText(mValueOne - mValueTwo + "");
                    mSubtract = false;
                }
 
                if (crunchifyMultiplication == true) {
                    crunchifyEditText.setText(mValueOne * mValueTwo + "");
                    crunchifyMultiplication = false;
                }
 
                if (crunchifyDivision == true) {
                    crunchifyEditText.setText(mValueOne / mValueTwo + "");
                    crunchifyDivision = false;
                }
            }
        });
 
        buttonC.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText("");
            }
        });
 
        button10.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                crunchifyEditText.setText(crunchifyEditText.getText() + ".");
            }
        });
    }
}
Here we have 1 EditText. It defines the type of
content.
Let’s understand code little-bit more.

 Line 11 – 14: Here we created the reference of Buttons and EditText.

 Line 16: Here we created two float variable for as value1 and value2.

 Line 21: We override the method onCreate() which is the method of Activity class.

 Line 45 – 50: We set onClickListener on Button1. If we click on Button1, EditText will

display.

 We have implemented the same logic for every button.

 Line 115 – 127: Here we have set the click listener on Add button.

 Here we put the condition as, if we EditText is Null then we set EditText as empty value.

Else we add the two value which are clicked before add button clicked and after add

button clicked.
 We also set the  crunchifyAddition  Boolean value to True. This true represent that add

button is clicked and this will be used when user click “=” button.

 We implement the same logic for other buttons also like buttonSub, ButtonMul,

buttonDivision.

 Line 156 – 183: Here we set clickListener on “=” button. Here we put condition like if
user click Add button the  crunchifyAddition  value is set True on the click listener of

Add button.

 According to that, corresponding action will be performed respective to button clicked.

if (crunchifyAddition == true) {
      crunchifyEditText.setText(mValueOne + mValueTwo + "");
      crunchifyAddition = false;
}

if Add button is clicked before the “=” button then Add action will be performed as you can see
above.

 After the action performed, we set the  crunchifyAddition  value to false, so that we

can perform Add action again.

Below is the layout file, with help to design front end for the calculator:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relative1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <EditText
        android:id="@+id/edt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
 
    <Button
        android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/button4"
        android:layout_alignRight="@+id/button4"
        android:layout_below="@+id/edt1"
        android:layout_marginTop="94dp"
        android:text="1" />
 
    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/button1"
        android:layout_toLeftOf="@+id/button3"
        android:layout_toStartOf="@+id/button3"
        android:text="2" />
 
    <Button
        android:id="@+id/button3"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/button2"
        android:layout_centerHorizontal="true"
        android:text="3" />
 
    <Button
        android:id="@+id/button4"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_toLeftOf="@+id/button2"
        android:text="4" />
 
    <Button
        android:id="@+id/button5"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button4"
        android:layout_alignLeft="@+id/button2"
        android:layout_alignStart="@+id/button2"
        android:text="5" />
 
    <Button
        android:id="@+id/button6"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button3"
        android:layout_alignStart="@+id/button3"
        android:layout_below="@+id/button3"
        android:text="6" />
 
    <Button
        android:id="@+id/button7"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button4"
        android:layout_toLeftOf="@+id/button2"
        android:text="7" />
 
    <Button
        android:id="@+id/button8"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button5"
        android:layout_alignStart="@+id/button5"
        android:layout_below="@+id/button5"
        android:text="8" />
 
    <Button
        android:id="@+id/button9"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button6"
        android:layout_alignStart="@+id/button6"
        android:layout_below="@+id/button6"
        android:text="9" />
 
    <Button
        android:id="@+id/buttonadd"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/edt1"
        android:layout_alignRight="@+id/edt1"
        android:layout_alignTop="@+id/button3"
        android:layout_marginLeft="46dp"
        android:layout_marginStart="46dp"
        android:layout_toRightOf="@+id/button3"
        android:text="+" />
 
    <Button
        android:id="@+id/buttonsub"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/buttonadd"
        android:layout_alignLeft="@+id/buttonadd"
        android:layout_alignRight="@+id/buttonadd"
        android:layout_alignStart="@+id/buttonadd"
        android:layout_below="@+id/buttonadd"
        android:text="-" />
 
    <Button
        android:id="@+id/buttonmul"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/buttonsub"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignStart="@+id/buttonsub"
        android:layout_below="@+id/buttonsub"
        android:text="*" />
 
    <Button
        android:id="@+id/button10"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button7"
        android:layout_toLeftOf="@+id/button2"
        android:text="." />
 
    <Button
        android:id="@+id/button0"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button8"
        android:layout_alignStart="@+id/button8"
        android:layout_below="@+id/button8"
        android:text="0" />
 
    <Button
        android:id="@+id/buttonC"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button9"
        android:layout_alignStart="@+id/button9"
        android:layout_below="@+id/button9"
        android:text="C" />
 
    <Button
        android:id="@+id/buttondiv"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/buttonmul"
        android:layout_alignLeft="@+id/buttonmul"
        android:layout_alignRight="@+id/buttonmul"
        android:layout_alignStart="@+id/buttonmul"
        android:layout_below="@+id/buttonmul"
        android:text="/" />
 
    <Button
        android:id="@+id/buttoneql"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/buttondiv"
        android:layout_alignLeft="@+id/button10"
        android:layout_alignRight="@+id/buttondiv"
        android:layout_alignStart="@+id/button10"
        android:layout_below="@+id/button0"
        android:layout_marginTop="37dp"
        android:text="=" />
 
</RelativeLayout>
Now, all things should works fine and we are ready to run our calculator android app. To run our
app I used my mobile, you can use emulator or your device.

Running our Calculator Android App

 Click on Android device manager. After selecting your custom device in  Android

device manager  window, click  START .

 Click on Run button.

  Choose Your device or emulator and click OK.

 Now you can see calculator android app running as this screenshot.

Congratulations!! If you have followed all steps and reach this point means you have followed
all the steps correctly and your Calculator android app is up and running fine.