How To Create Calculator App In Android Studio: Step By Step Guide

Do you use calculator? Of Course you do in your regular life…

So why not create your own basic Calculator Android App in Android Studio and use it for doing those operations.

If you don’t know how to built then you are for treat as we are going to share how the App is created in Android. This is the one of simplest App you can create to understand Android basics.

Calculator App UI In Android Studio

In this Calculator App tutorial we are going use of multiple Android UI components to design and step by step developing a Basic Calculator application in Android Studio.

Topics Used For Creating Calculator App – Before following the below steps it is recommended you check out EditText, TextView, ButtonLinear Layout topics. Also go through JAVA OOPS concept once.


How To Create Calculator App In Android Studio:

Below you can download code, see final output and step by step explanation of Calculator App in Android Studio.

Download-Code
One More Step To Download Code...

SignUp! To Download Calculator App Code
Free Download Code Now >>
100% tested, easy instant download and import in Android Studio
close-link

Calculator App In Android Studio

Step 1: Firstly get the android studio downloaded in your system, then open it.

Step 2: Create a new project and name it Calculator.

Step 3: Open res -> layout -> activity_main.xml (or) main.xml. Here we are going to create the application interface like add layouts, Button , TextView and EditText.

i of Step 3 – Create a Linearlayout vertical, add a textview followed by two textfields Number(decimal) for writing numbers in it. Starting code of activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="abhiandroid.com.calculater.MainActivity"
    android:orientation="vertical"
    android:gravity="top"
    android:textAlignment="center"
    android:background="@android:color/holo_blue_bright"
    android:weightSum="1">

    <TextView
        android:text="@string/enter_two_numbers"
        android:layout_width="match_parent"
        android:id="@+id/textView"
        android:layout_height="30dp"
        android:gravity="center_horizontal"
        android:textColorLink="?android:attr/editTextColor"
        tools:textStyle="bold|italic"
        android:textStyle="bold|italic"
        android:fontFamily="serif"
        android:visibility="visible"
        android:textSize="24sp"
        android:layout_weight="0.07" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/editOp1"
        android:textSize="18sp"
        android:gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:visibility="visible" />
    
   <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/editOp2"
        android:textSize="18sp"
        android:gravity="center_horizontal"
        android:elevation="1dp" />
</LinearLayout>

The UI will currently look like this:

Calculator App Input Number UI In Android Studio
ii of Step 3 – Then before closing the above layout define another layout as Linearlayout horizontal, add five button ( +, -, *, / and Clear) define their properties like id , width, height etc. in it and close the linearlayout.
Linear Layout Horizontal In Android Studio

Following code of activity_main.xml . This code will be inserted in main layout:

   <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:text="+"
            android:layout_width="78dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnadd"
            android:layout_weight="0.03" />

        <Button
            android:text="-"
            android:layout_width="78dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnsub"
            android:layout_weight="0.03" />

        <Button
            android:text="*"
            android:layout_width="78dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnmul"
            android:layout_weight="0.03"/>

        <Button
            android:text="/"
            android:layout_height="wrap_content"
            android:id="@+id/btndiv"
            android:layout_width="78dp"
            android:layout_weight="0.03" />

        <Button
            android:text="Clear"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnclr"
            android:layout_weight="0.03" />
</LinearLayout>

The UI will now look like this:

Calculator App Button UI In Android Studio
iii of Step 3 – Further in continuation with previous linearlayout add a textview, textfield(Number) for displaying result which makes the interface complete.

The complete interface code of activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="abhiandroid.com.calculater.MainActivity"
    android:orientation="vertical"
    android:gravity="top"
    android:textAlignment="center"
    android:background="@android:color/holo_blue_bright"
    android:weightSum="1">

    <TextView
        android:text="@string/enter_two_numbers"
        android:layout_width="match_parent"
        android:id="@+id/textView"
        android:layout_height="30dp"
        android:gravity="center_horizontal"
        android:textColorLink="?android:attr/editTextColor"
        tools:textStyle="bold|italic"
        android:textStyle="bold|italic"
        android:fontFamily="serif"
        android:visibility="visible"
        android:textSize="24sp"
        android:layout_weight="0.07" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/editOp1"
        android:textSize="18sp"
        android:gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:visibility="visible" />
  
   <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/editOp2"
        android:textSize="18sp"
        android:gravity="center_horizontal"
        android:elevation="1dp" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:text="+"
            android:layout_width="78dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnadd"
            android:layout_weight="0.03" />

        <Button
            android:text="-"
            android:layout_width="78dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnsub"
            android:layout_weight="0.03" />

        <Button
            android:text="*"
            android:layout_width="78dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnmul"
            android:layout_weight="0.03"/>

        <Button
            android:text="/"
            android:layout_height="wrap_content"
            android:id="@+id/btndiv"
            android:layout_width="78dp"
            android:layout_weight="0.03" />

        <Button
            android:text="Clear"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnclr"
            android:layout_weight="0.03" />
    </LinearLayout>

    <TextView
        android:text="@string/result"
        android:layout_width="332dp"
        android:id="@+id/textView1"
        android:layout_marginTop="10dp"
        android:layout_height="50dp"
        android:gravity="center_horizontal"
        android:textColorLink="?android:attr/editTextColor"
        tools:textStyle="bold|italic"
        android:textStyle="bold|italic"
        android:fontFamily="serif"
        android:visibility="visible"
        android:textSize="30sp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/result"
        android:textSize="18sp"
        android:text="0.00"
        android:gravity="center_horizontal" />
</LinearLayout>

So now we have designed the complete UI of the Calculator App.

Calculator App UI In Android Studio
Step 4: Open src -> package -> MainActivity.java. The interface part of the application is over, let’s focus on adding functionality to the application. This calculator app basically perform five operations i.e addition, subtraction, multiplication, division and reset. So for that we need to define these operation over button click. For that we use setOnClickListener() function.

parseDouble() is used to convert String value to double. By default the value is String and we need to convert it into Double to perform operation over it.

If person doesn’t enter the value and directly click on the any button then a Toast message will appear on the screen telling user to enter the required numbers.

package abhiandroid.com.calculater;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private EditText opr1;
    private EditText opr2;
    private Button btnadd;
    private  Button btnsub;
    private  Button btnmul;
    private Button btndiv;
    private Button btnclr;
    private TextView txtresult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        opr1 = (EditText) findViewById(R.id.editOp1);
        opr2 = (EditText) findViewById(R.id.editOp2);
        btnadd = (Button) findViewById(R.id.btnadd);
        btnsub = (Button) findViewById(R.id.btnsub);
        btnmul = (Button) findViewById(R.id.btnmul);
        btndiv = (Button) findViewById(R.id.btndiv);
        btnclr = (Button) findViewById(R.id.btnclr);
        txtresult= (TextView) findViewById(R.id.result);
 // Addition 
        btnadd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if((opr1.getText().length()>0) && (opr2.getText().length()>0))
                {
                    double oper1 = Double.parseDouble(opr1.getText().toString());
                    double oper2 = Double.parseDouble(opr2.getText().toString());
                    double result = oper1 + oper2;
                    txtresult.setText(Double.toString(result));
                }
                else{
                    Toast toast= Toast.makeText(MainActivity.this,"Enter The Required Numbers",Toast.LENGTH_LONG);
                    toast.show();
                }
            }
        });
  //Subtraction
        btnsub.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if((opr1.getText().length()>0) && (opr2.getText().length()>0))
                {
                    double oper1 = Double.parseDouble(opr1.getText().toString());
                    double oper2 = Double.parseDouble(opr2.getText().toString());
                    double result = oper1 - oper2;
                    txtresult.setText(Double.toString(result));
                }
                else{
                    Toast toast= Toast.makeText(MainActivity.this,"Enter The Required Numbers",Toast.LENGTH_LONG);
                    toast.show();
                }

            }
        });
 // Multiplication
        btnmul.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if((opr1.getText().length()>0) && (opr2.getText().length()>0))
                {
                    double oper1 = Double.parseDouble(opr1.getText().toString());
                    double oper2 = Double.parseDouble(opr2.getText().toString());
                    double result = oper1 * oper2;
                    txtresult.setText(Double.toString(result));
                }
                else{
                    Toast toast= Toast.makeText(MainActivity.this,"Enter The Required Numbers",Toast.LENGTH_LONG);
                    toast.show();
                }
            }
        });
 // Division
        btndiv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if((opr1.getText().length()>0) && (opr2.getText().length()>0))
                {
                    double oper1 = Double.parseDouble(opr1.getText().toString());
                    double oper2 = Double.parseDouble(opr2.getText().toString());
                    double result = oper1 / oper2;
                    txtresult.setText(Double.toString(result));
                }
                else{
                    Toast toast= Toast.makeText(MainActivity.this,"Enter The Required Numbers",Toast.LENGTH_LONG);
                    toast.show();
                }
            }
        });
// Reset Feilds
        btnclr.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                opr1.setText("");
                opr2.setText("");
                txtresult.setText("0.00");
                opr1.requestFocus();
            }
        });

    }
}

OUTPUT:
Now run the App and you will see the basic calculator App. Enter any number and do the operations.

3 thoughts on “How To Create Calculator App In Android Studio: Step By Step Guide”

  1. This calculator tutorial really helped me begin to make the transition to android studio. I understood much better layouts, buttons, text views, edit texst, strings, activity_main.xml and ActivityMain.java. Keep up the great work! Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

One More Step To Download Code...

SignUp! To Download Calculator App Code
Free Download Code Now >>
100% tested, easy instant download and import in Android Studio
close-link
JUST ONE MORE STEP TO COMPLETE...

Enter your email to get FREE exclusive Android App email tips:
SEND ME THE UPDATE
We hate SPAM and promise to keep your email address safe.
close-link
One More Step To Download Code...

SignUp! To Download WebView App Code
FREE DOWNLOAD CODE NOW >>
100% tested, easy instant download and import in Android Studio
close-link