How to create a simple calculator Android App

Hi Guys, in this post i will show you how to create a simple calculator app using android studio nice huh ! Let see.

What we are going to design ?


A Simple calculator that gets input from user and do some fundamental arithmetic and display Answer.



What we are going to learn from this tutorial ?


From this tutorial you will know about all of the following :) .

  • How to get user input from the TextBox ?

  • How to process user input ?

  • How to handle button clicks ?

Let's Start ! ;)


Step-1 : Fire Up ! Android Studio.

Step-2 : Create New Project and name it AwesomeCalculator(Or your OWN).

awe1

Step-3 : Click Next Select Api-17 as minimum sdk and leave all settings as default. wait until the android studio finish the project setup.

Let's Design !


Step-4 : Open the activity_main.xml (Path: app/java/res/layout/activity_main.xml)

Step-5 : Design the layout,delete the default TextView(HelloWorld Text)  Drag and drop a Two EditText(TextBoxes)  and Four button (for Addition,Subtraction,Multiplication,Division)  and a TextView (to display answer) from the View list.

Note : set the id for the controls as following for two EditText  (frstno and secondno respectively), For 4 buttons (addbtn, subbtn, mulbtn and divbtn respectively), For TextView (ans). if you dont know how to change the id propery for a button take a look at this tutorial Opening new Activity from main activity when clicking button :)



awe2

Step-6 : Design like the above screen. :) for full XML see full code (Bottom of this page ).

NOTE : you may noticed that the textbox contains some hint text (First Number) you can set this by changing the hint property of the EditText.



Let's Code B-)


Step-7 : It's cool enough.Open MainActivity.java and declare the Controls above the OnCreate().
EditText fno,sno;
Button addbtn,subbtn,mulbtn,divbtn;
TextView anstv;

Step-8 : Initialize the controls inside the onCreate() Method.
fno = (EditText) findViewById(R.id.firstno);
        sno = (EditText) findViewById(R.id.secondno);
        addbtn = (Button) findViewById(R.id.addbtn);
        subbtn = (Button) findViewById(R.id.subbtn);
        mulbtn = (Button) findViewById(R.id.mulbtn);
        divbtn = (Button) findViewById(R.id.divbtn);

Step-9 : Implement the OnClickListener for the activity class. This will add a new function(onClick(View v)) to the class and set the OnClickListener to the button.
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    EditText fno,sno;
    Button addbtn,subbtn,mulbtn,divbtn;
    TextView anstv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fno = (EditText) findViewById(R.id.firstno);
        sno = (EditText) findViewById(R.id.secondno);
        addbtn = (Button) findViewById(R.id.addbtn);
        subbtn = (Button) findViewById(R.id.subbtn);
        mulbtn = (Button) findViewById(R.id.mulbtn);
        divbtn = (Button) findViewById(R.id.divbtn);
        //Set OnClickListener for buttons
        addbtn.setOnClickListener(this);
        subbtn.setOnClickListener(this);
        mulbtn.setOnClickListener(this);
        divbtn.setOnClickListener(this);
       
    }

    @Override
    public void onClick(View v) {
        
    }
}

Step-10 : Ok when any one button is clicked this onClick() method is called. get the user input from the EditText and store it in the Integer variable.
@Override
    public void onClick(View v) {
        int fnumber = Integer.parseInt(fno.getText().toString());
        int snumber = Integer.parseInt(sno.getText().toString());
    }

Step-11 : As i told already when any one of the button in our activity is clicked the onClick()Method is called. How to find which button is clicked ? yes we can use if statement to find which button is clicked. add the following code to the onClick() method.
if(v.getId() == R.id.addbtn){
            //Addition
        }else if(v.getId() == R.id.subbtn){
            //Subtraction
        }else if(v.getId() == R.id.mulbtn){
            //multiplication
        }else if(v.getId() == R.id.divbtn){
            //division
        }

Step-12 : Add the corresponding arithmetic process to the if statements.(SEE FULL CODE)

 FULL CODE :)


JAVA CODE



//MainActivity.java
package com.rkdroidstudio.rajakumar.awesomecalculator;

import android.support.annotation.IntegerRes;
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;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    EditText fno,sno;
    Button addbtn,subbtn,mulbtn,divbtn;
    TextView anstv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fno = (EditText) findViewById(R.id.firstno);
        sno = (EditText) findViewById(R.id.secondno);
        addbtn = (Button) findViewById(R.id.addbtn);
        subbtn = (Button) findViewById(R.id.subbtn);
        mulbtn = (Button) findViewById(R.id.mulbtn);
        divbtn = (Button) findViewById(R.id.divbtn);
        anstv =(TextView) findViewById(R.id.ans);
            //Set OnClickListener for buttons
        addbtn.setOnClickListener(this);
        subbtn.setOnClickListener(this);
        mulbtn.setOnClickListener(this);
        divbtn.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        int fnumber = Integer.parseInt(fno.getText().toString());
        int snumber = Integer.parseInt(sno.getText().toString());
        if(v.getId() == R.id.addbtn){
            anstv.setText(""+(fnumber+snumber));
        }else if(v.getId() == R.id.subbtn){
            anstv.setText(""+(fnumber-snumber));
        }else if(v.getId() == R.id.mulbtn){
            anstv.setText(""+(fnumber*snumber));
        }else if(v.getId() == R.id.divbtn){
            anstv.setText(""+(fnumber/snumber));
        }

    }
}

OUTCOME :)


screenshot_2016-12-02-17-15-26

Hope you enjoy it. thank you all if you liked this tutorial please share it.

Like Us in Facebook. :)

Follow us in Twitter ;)

Any doubt feel free to ask.

No comments

Powered by Blogger.