How to create a small and simple calculator on Android Studio?

Hello Dear Readers,
You must have learned how to create a simple Helloworld app on android studio, if not you can get it by clicking here. Now proceeding a step ahead, here is how to create a simple and small calculator with operations of adding, subtraction, multiplication and division.

Layout design -:
Two EditText tool -: Edit texts are used to get text/number as input from user (Yellow and green color strips in figure ).
One TextView tool -: Text View tool is used to just set the text as display, user cannot interact with this(blue strip in figure).
Four Button tool -: Button tool is used to invoke the linked function/perform the linked operation

Generated XML code of above layout -:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:background="#FFFF00"
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:ems="10"
        android:inputType="numberSigned"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <EditText
        android:background="#00FF00"
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/txt1"
        android:layout_marginTop="26dp"
        android:ems="10"
        android:inputType="numberSigned"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:textColor="#FFFFFF"
        android:background="#0000FF"
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/txt2"
        android:layout_marginTop="26dp"
        android:text=""
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:id="@+id/buttonAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add"
        android:onClick="doAdd"
        android:layout_below="@+id/tv"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="17dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:id="@+id/buttonSub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:text="Subtract"
        android:onClick="doSub"
        android:layout_below="@+id/buttonAdd"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:id="@+id/buttonMulty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/buttonSub"
        android:layout_marginTop="15dp"
        android:text="Multiply"
        android:onClick="doMulty"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
    <Button
        android:id="@+id/buttonDivide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/buttonMulty"
        android:layout_marginTop="15dp"
        android:text="Divide"
        android:onClick="doDivide"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

Basic points in above code -:

In TextView and EditText

android:background & android:textcolor sets the background color and text color.
android:id sets the name i.e. identity of that tool with which you reference in your code.

In Buttton

android:text sets the visible text on the buttons
android:onClick=”funtion_name” links your button to the given function name (acts as the main part in *.xml code).

Screenshots of activity_main.xml -:

Java code for the above program to perform the operation -:

package com.example.lenovo.calculation;

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

public class MainActivity extends AppCompatActivity {

    EditText t1,t2;
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        t1=(EditText)findViewById(R.id.txt1);
        t2=(EditText)findViewById(R.id.txt2);
        tv=(TextView) findViewById(R.id.tv);

    }
    public void doAdd(View v)
    {
        try
        {
            int a=Integer.parseInt("" + t1.getText());
            int b=Integer.parseInt("" + t2.getText());
            int sum=a+b;
            tv.setText("" + sum);
        }
        catch (Exception ex)
        {
            System.out.println(ex);
            tv.setText(ex.getMessage());
        }
    }
    public void doSub(View v)
    {
        try
        {
            int a=Integer.parseInt("" + t1.getText());
            int b=Integer.parseInt("" + t2.getText());
            int sub=a-b;
            tv.setText("" + sub);
        }
        catch (Exception ex)
        {
            System.out.println(ex);
            tv.setText(ex.getMessage());
        }
    }
    public void doMulty(View v)
    {
        try
        {
            int a=Integer.parseInt("" + t1.getText());
            int b=Integer.parseInt("" + t2.getText());
            int mul=a*b;
            tv.setText("" + mul);
        }
        catch (Exception ex)
        {
            System.out.println(ex);
            tv.setText(ex.getMessage());
        }
    }
    public void doDivide(View v)
    {
        try
        {
            int a=Integer.parseInt("" + t1.getText());
            int b=Integer.parseInt("" + t2.getText());
            int div=a/b;
            tv.setText("" + div);
        }
        catch (Exception ex)
        {
            System.out.println(ex);
            tv.setText(ex.getMessage());
        }
    }

}

Screenshots of MainActivity.java -:

In above program the onCreate() function acts as the main() function i.e. android program starts execution from onCreate() function. We have to create objects of all the tools used in layout and link them to the original tools of the layout by using predefined function findViewById(R.id.tool_id).  To get the data from the tool/user we use function object_name.getText() and to set back calculated/changed result to the tools(here TextView) we use function object_name.setText(string)Different user defined functions used to perform various operations are doAdd(), doSub(), doMulty() and doDivide().
doAdd() is linked to button id buttonAdd, doSub() is linked to button id buttonSub, doMulty() is linked to button id buttonMulty and doDivide() is linked to button id buttonDivide.

 

Mobile Output -:

On Clicking Add Button

On Clicking Subtract button

On Clicking Multiply Button

On Clicking Divide Button

 

Thank You.

2 thoughts on “How to create a small and simple calculator on Android Studio?”

Leave a Reply