How To Make A Simple Calculator App In Android

Today,  I will tell how to make a simple calculator app in Android. Firstly if you a beginner in Android Language, then first learn What is Android and Architecture of Android. The first thing you need is an IDE on which you can create a project. I have Android Studio so in that I will create the project within Android Studio. You can use either Android Studio or Eclipse.

Simple Calculator App in Android

Step 1: Firstly create a new project and name it Calculator.

Step 2: Then open the file called content_main.xml from layout folder within res directory.

Step 3: Do following changes in content_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.aditya.calculator.MainActivity"
    >


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"

        android:id="@+id/editText"
        android:layout_alignParentTop="true"
        android:layout_marginTop="55dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/button"
        android:layout_above="@+id/button2"
        android:layout_toStartOf="@+id/button3" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/button2"
        android:layout_above="@+id/button7"
        android:layout_alignStart="@+id/button" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/button3"
        android:layout_above="@+id/button5"
        android:layout_toStartOf="@+id/button4" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/button4"
        android:layout_above="@+id/button6"
        android:layout_centerHorizontal="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/button5"
        android:layout_below="@+id/button"
        android:layout_alignStart="@+id/button3" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"
        android:clickable="true"
        android:id="@+id/button6"
        android:layout_alignBottom="@+id/button5"
        android:layout_toEndOf="@+id/button3" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        android:clickable="true"
        android:id="@+id/button7"
        android:layout_alignTop="@+id/button8"
        android:layout_toStartOf="@+id/button8" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        android:id="@+id/button8"
        android:layout_alignTop="@+id/button9"
        android:layout_toStartOf="@+id/button9" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        android:id="@+id/button9"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/button5" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="."
        android:id="@+id/button10"
        android:layout_above="@+id/button6"
        android:layout_toEndOf="@+id/button6" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="*"
        android:id="@+id/button11"
        android:layout_below="@+id/button4"
        android:layout_toEndOf="@+id/button6" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="/"
        android:id="@+id/button12"
        android:layout_alignBottom="@+id/button9"
        android:layout_toEndOf="@+id/button6" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="+"
        android:id="@+id/button13"
        android:layout_below="@+id/button7"
        android:layout_toEndOf="@+id/button7" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        android:id="@+id/button14"
        android:layout_below="@+id/button8"
        android:layout_toEndOf="@+id/button8" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Clear"
        android:id="@+id/button15"
        android:layout_below="@+id/button13"
        android:layout_alignEnd="@+id/button16"
        android:layout_alignStart="@+id/button17" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="="
        android:id="@+id/button16"
        android:layout_below="@+id/button12"
        android:layout_alignStart="@+id/button12" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:id="@+id/button17"
        android:layout_alignBottom="@+id/button13"
        android:layout_toStartOf="@+id/button13" />

</RelativeLayout>

In the above code, the design for the calculator has been made.

Step 4: Now open MainActivity.Class file and do following changes.

package com.example.aditya.calculator;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    Button b0,b1,b2,b3,b4,b5,b6,b7,b8,b9,badd,bsub,bmul,bdiv,bdot,beq,bclr;

    EditText editText;

    float val1,val2;

    boolean add, sub, div, mul;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        b0=(Button)findViewById(R.id.button17);
        b1=(Button)findViewById(R.id.button);
        b2=(Button)findViewById(R.id.button3);
        b3=(Button)findViewById(R.id.button4);
        b4=(Button)findViewById(R.id.button2);
        b5=(Button)findViewById(R.id.button5);
        b6=(Button)findViewById(R.id.button6);
        b7=(Button)findViewById(R.id.button7);
        b8=(Button)findViewById(R.id.button8);
        b9=(Button)findViewById(R.id.button9);
        badd=(Button)findViewById(R.id.button13);
        bsub=(Button)findViewById(R.id.button14);
        bmul=(Button)findViewById(R.id.button11);
        bdiv=(Button)findViewById(R.id.button12);
        beq=(Button)findViewById(R.id.button16);
        bclr=(Button) findViewById(R.id.button15);
        bdot=(Button) findViewById(R.id.button10);
        editText=(EditText)findViewById(R.id.editText);


b1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        editText.setText(editText.getText()+"1");

    }
});
        b2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText() + "2");

            }
        });

        b3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"3");

            }
        });

        b4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"4");

            }
        });

        b5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"5");

            }
        });

        b6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"6");

            }
        });

        b7.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"7");

            }
        });

        b8.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"8");

            }
        });

        b9.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"9");

            }
        });

        b0.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+"0");

            }
        });


        bclr.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText("");

            }
        });

        bdot.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText.setText(editText.getText()+".");

            }
        });

        badd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (editText == null){
                    editText.setText("");
                }else {
                    val1 = Float.parseFloat(editText.getText() + "");
                    add = true;
                    editText.setText(null);
                }

            }
        });

        bsub.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                val1 = Float.parseFloat(editText.getText() + "");
                sub = true ;
                editText.setText(null);

            }
        });

        bmul.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                val1 = Float.parseFloat(editText.getText() + "");
                mul = true ;
                editText.setText(null);

            }
        });

        bdiv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                val1 = Float.parseFloat(editText.getText()+"");
                div = true ;
                editText.setText(null);

            }
        });

        beq.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                val2 = Float.parseFloat(editText.getText() + "");

                if (add == true){

                    editText.setText(val1 + val2 +"");
                    add=false;
                }


                if (sub == true){
                    editText.setText(val1 - val2+"");
                    sub=false;
                }

                if (mul == true){
                    editText.setText(val1 * val2+"");
                    mul=false;
                }

                if (div == true){
                    editText.setText(val1 / val2+"");
                    div=false;
                }

            }
        });



    }

}

I will explain the above code one by one.

  1. First of all, all the buttons, textbox, floating and boolean variables are declared.
  2. Float variable is used to store the two values that the user will enter.
  3. Then, the id’s of all the buttons is found so as to use them in our code.
  4. After this, the value of buttons from 0-9 and dot(.) has been set to edit text, so whenever the user hits the button with a number from 0-9, its value will be set in the edit text using OnClickListener.
  5. Then comes the add, sub, div and mul buttons. Within these buttons, the value firstly entered by the user after hitting any of the above-mentioned buttons  will store in val1 variable and the edit text will be set to null so that the user can enter the second number.
  6. The add, sub, mul, div variables are set to true because we have to use these variables when we set equalto button using OnClickListener.
  7. Now when equalto button is set using OnClickListener, firstly I stored the number the user has entered after pressing equalto button in val2 variable.
  8. After this, the if condition is applied. In this, boolean variable add, sub, mul, and div are checked whether they are true or not.  That is the reason I set these variables to true within their appropriate buttons OnClickListner.
  9.  Now the condition will be checked for all the boolean values. If any of the conditions will be true, it appropriate statements will be executed, this means that the operation is performed on two variables i.e., val1 and val2.
  10. Then the operation is performed, the answer will be shown on the edit text using the setText method.

 

Layout_calculator

 

The application will look like the above image.

This is how we can make a simple calculator app in android.

2 Comments

  1. Kamal Thakur April 26, 2016
    • Aditya Mahajan April 26, 2016