Wednesday, July 13, 2016

Create a basic Android Calculator

In this article we will learn “How to create a Basic Calculator?”, this calculator can be used to do basic calculation like Addition, Subtraction,  Multiplication & Divide and also to display history of previous calculation.

Concepts Required:

  1. Creating a new project in Android Studio
  2. Introduction to UI Layout and controls
  3. Event Handling

So let’s start by creating a new android project (How to create an Android project) with application name Basic Calculator.

Now design UI as shown below and change the id of widgets as shown in image.


You may also take help of this XML file to design UI.

<?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: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="com.a2techup.basiccalculator.MainActivity">
 
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/input"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textSize="25dp" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        android:id="@+id/b8"
        android:layout_below="@+id/input"
        android:layout_centerHorizontal="true"
        android:textSize="25dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        android:id="@+id/b9"
        android:layout_below="@+id/input"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:textSize="25dp" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        android:id="@+id/b7"
        android:layout_alignTop="@+id/b8"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textSize="25dp" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/b4"
        android:layout_below="@+id/b7"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textSize="25dp" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/b5"
        android:layout_below="@+id/b8"
        android:layout_alignLeft="@+id/b8"
        android:layout_alignStart="@+id/b8"
        android:textSize="25dp" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"
        android:id="@+id/b6"
        android:layout_below="@+id/b9"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:textSize="25dp" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/b3"
        android:layout_below="@+id/b6"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:textSize="25dp" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/b1"
        android:layout_alignTop="@+id/b2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textSize="25dp" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/b2"
        android:layout_below="@+id/b4"
        android:layout_alignLeft="@+id/b8"
        android:layout_alignRight="@+id/b5"
        android:layout_alignEnd="@+id/b5"
        android:textSize="25dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="+"
        android:id="@+id/bp"
        android:textSize="25dp"
        android:layout_below="@+id/b3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        android:id="@+id/bmi"
        android:textSize="25dp"
        android:layout_alignTop="@+id/bp"
        android:layout_alignLeft="@+id/b2"
        android:layout_alignStart="@+id/b2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="/"
        android:id="@+id/bd"
        android:textSize="25dp"
        android:layout_alignTop="@+id/bmi"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="*"
        android:id="@+id/bmu"
        android:textSize="25dp"
        android:layout_below="@+id/bp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="="
        android:id="@+id/bmo"
        android:textSize="25dp"
        android:layout_alignTop="@+id/bmu"
        android:layout_alignLeft="@+id/bmi"
        android:layout_alignStart="@+id/bmi" />
  
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        android:id="@+id/bcl"
        android:textSize="25dp"
        android:layout_below="@+id/bd"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Result"
        android:id="@+id/textView"
        android:layout_below="@+id/bmu"
        android:layout_centerHorizontal="true"
        android:textSize="25dp" />
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/result"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true" />
  
</RelativeLayout>


Once you have designed a UI as shown above you can move to this part and modify MainActivity.java file.

First declare Buttons, EditText and TextView under public class MainActivity and also declare two variable num (this variable will be of double type and will be used to store Number from input EditText) & ( this variable will be of int type and will be used to store number to remember which function button is pressed such as it will store 0 when = button is pressed, 1 when + button is pressed, 2 for – button, 3 for / button and 4 for * button)  as shown below.

public class MainActivity extends AppCompatActivity{
Button b1,b2,b3,b4,b5,b6,b7,b8,b9,bp,bmi,bd,bmu,bmo,bcl;
    EditText input;
    TextView result;

Now capture Button, EditText and TextView object from the layout and setOnClickListener to each button under onCreate() function as shown below

@Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  
    b1=(Button) findViewById(R.id.b1);
    b2=(Button) findViewById(R.id.b2);
    b3=(Button) findViewById(R.id.b3);
    b4=(Button) findViewById(R.id.b4);
    b5=(Button) findViewById(R.id.b5);
    b6=(Button) findViewById(R.id.b6);
    b7=(Button) findViewById(R.id.b7);
    b8=(Button) findViewById(R.id.b8);
    b9=(Button) findViewById(R.id.b9);
    bp=(Button) findViewById(R.id.bp);
    bmi=(Button) findViewById(R.id.bmi);
    bd=(Button) findViewById(R.id.bd);
    bmu=(Button) findViewById(R.id.bmu);
    bmo=(Button) findViewById(R.id.bmo);
    bcl=(Button) findViewById(R.id.bcl);
  
    b1.setOnClickListener(this);
    b2.setOnClickListener(this);
    b3.setOnClickListener(this);
    b4.setOnClickListener(this);
    b5.setOnClickListener(this);
    b6.setOnClickListener(this);
    b7.setOnClickListener(this);
    b8.setOnClickListener(this);
    b9.setOnClickListener(this);
    bp.setOnClickListener(this);
    bmi.setOnClickListener(this);
    bd.setOnClickListener(this);
    bmu.setOnClickListener(this);
    bmo.setOnClickListener(this);
    bcl.setOnClickListener(this);
  
    input = (EditText) findViewById(R.id.input);
    result = (TextView) findViewById(R.id.result);
}

Now implement public class Mainactivity to View.OnClickListener and create onClick @Override method as shown below.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

//  Code    

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

  //  Code

    }

    @Override
    public void onClick(View v) {
}
}
Now we will add functionality to buttons under onClick() function using Switch as shown below, this is a simple java code and you can understand it in a one simple read.

    @Override
   
public void onClick(View v) {
        switch (v.getId()){
            case R.id.b1:
                input.setText(input.getText().toString()+"1");
                break;
            case R.id.b2:
                input.setText(input.getText().toString()+"2");
                break;
            case R.id.b3:
                input.setText(input.getText().toString()+"3");
                break;
            case R.id.b4:
                input.setText(input.getText().toString()+"4");
                break;
            case R.id.b5:
                input.setText(input.getText().toString()+"5");
                break;
            case R.id.b6:
                input.setText(input.getText().toString()+"6");
                break;
            case R.id.b7:
                input.setText(input.getText().toString()+"7");
                break;
            case R.id.b8:
                input.setText(input.getText().toString()+"8");
                break;
            case R.id.b9:
                input.setText(input.getText().toString()+"9");
                break;
            case R.id.bp: num = Double.parseDouble(input.getText().toString());
                          b = 1;
                          input.setText("");
                break;
            case R.id.bmi: num = Double.parseDouble(input.getText().toString());
                           b = 2;
                           input.setText("");
                break;
            case R.id.bd: num = Double.parseDouble(input.getText().toString());
                          b = 3;
                          input.setText("");
                break;
            case R.id.bmu: num = Double.parseDouble(input.getText().toString());
                           b = 4;
                           input.setText("");
                break;
            case R.id.bmo: {
if(b==1){
result.setText(num+" + "+input.getText().toString()+" = "+ (num+Double.parseDouble(input.getText().toString()))+
"\n"+result.getText().toString());
b=0;}

else if(b==2){
result.setText(num+" - "+input.getText().toString()+" = "+
(num-Double.parseDouble(input.getText().toString()))+
"\n"+result.getText().toString());
b=0;}
               
else if(b==3){
result.setText(num+" / "+input.getText().toString()+" = "+ (num/Double.parseDouble(input.getText().toString()))+
"\n"+result.getText().toString());
b=0;}
               
else if(b==4){
result.setText(num+" * "+input.getText().toString()+" = "+ (num*Double.parseDouble(input.getText().toString()))+
n"+result.getText().toString());
b=0;}
               
else if(b==0){result.setText(input.getText().toString()+" = "+
input.getText().toString()+
"\n"+result.getText().toString());
b=0;}
            }
                break;
            case R.id.bcl: input.setText("");
                           result.setText("");
                           b=0;
                break;
            default:
                break;
    }
}

Your Basic Android Calculator is ready, you can run it on AVD or create its .apk file and run on your real Android device.
You can also download .apk file of Basic Calculator Here

If you have any query you can contact me through contact form or tweet me @iVishalMalik