Develop Android GUI Calculator [TUTORIAL 5]

Hello Guys, Welcome to AndroidPlus. Till now we have learned to install android in our system, we know what an Activity is, what are XML files and how to use the, we also created a Splash Screen Application etc. Today, we will learn about the button click event by making an interesting application that is Android GUI Calculator. Let’s start making our App-

check out the last tutorial here:

http://www.androidplus.org/2014/05/creating-android-splash-screen-with.html

Layout for Android GUI Calculator-

Create a XML file and name it main.xml and paste the following code in it.

<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=".Main" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="34dp"
        android:layout_marginTop="20dp"
        android:text="first number"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="14dp"
        android:text="second number"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:ems="10"
        android:inputType="number" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:ems="10"
        android:inputType="number" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/editText2"
        android:layout_marginTop="16dp"
        android:text="Result"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText2"
        android:layout_below="@+id/textView3"
        android:ems="10"
        android:inputType="number" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText3"
        android:layout_alignRight="@+id/textView2"
        android:layout_below="@+id/editText3"
        android:layout_marginTop="23dp"
        android:text="+" />

    <Button
        android:id="@+id/div"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/editText3"
        android:layout_below="@+id/sub"
        android:layout_marginLeft="19dp"
        android:layout_marginTop="52dp"
        android:layout_toRightOf="@+id/textView2"
        android:text="/" />

    <Button
        android:id="@+id/sub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/add"
        android:layout_alignBottom="@+id/add"
        android:layout_alignLeft="@+id/div"
        android:layout_alignRight="@+id/editText3"
        android:text="-" />

    <Button
        android:id="@+id/mul"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/div"
        android:layout_alignBottom="@+id/div"
        android:layout_alignLeft="@+id/add"
        android:layout_alignRight="@+id/add"
        android:text="*" />

</RelativeLayout>

Your layout should look like this:

*note: do not change the id of Button or EditText fields.

Java Code for Android GUI Calculator-

Create a Java file in SRC folder in your project and name it Main.java and paste the following code in it.

package com.example.cal;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;

import android.widget.Button;
import android.widget.EditText;

public class Main extends Activity {

Button b1,b2,b3,b4,b5;
EditText e1,e2,e3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

b1= (Button) findViewById(R.id.add);
b2= (Button) findViewById(R.id.sub);
b3= (Button) findViewById(R.id.mul);
b4= (Button) findViewById(R.id.div);

e1 =(EditText) findViewById(R.id.editText1);
e2 =(EditText) findViewById(R.id.editText2);
e3 =(EditText) findViewById(R.id.editText3);

   b1.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

int sum;

sum=Integer.parseInt(e1.getText().toString())+Integer.parseInt(e2.getText().toString());

e3.setText(""+ sum);
}
});
   
   
 b2.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

int sub;
sub=Integer.parseInt(e1.getText().toString())-Integer.parseInt(e2.getText().toString());
e3.setText(""+ sub);
}
});

 b3.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

int mu;
mu=Integer.parseInt(e1.getText().toString())*Integer.parseInt(e2.getText().toString());
e3.setText(""+ mu);
}
});

 b4.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

int two;
double result;
two=Integer.parseInt(e2.getText().toString());

if(two==0)
{
e3.setText("can not divide by 0");
}
else
{
result=Double.parseDouble(e1.getText().toString())/Double.parseDouble(e2.getText().toString());

e3.setText(""+ result);

}

}
});
}





@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

Understanding the Java Code-

      

       1.   First we have defined Button and EditText type like we define int type in c or c++.

If you are getting error then you need to import button and EditText from android.widget library. To import button hover your mouse pointer into Button and then click on Import.

      2.   We have defined the Button and EditText type now we need to find where our Button and EditText is? We have four button that is addition, multiplication, subtraction and division and three EditText. The below code help us to do so:

      3.  Now we are setting an onClickListener which help us to perform an operation when a button is clicked. The below code is for performing an action when button b1 i.e add button is clicked:

e1.getText().toString() takes the text from the edittext1 field and convert it into string. Integer.parseInt() function help to convert a string into integer. Similarly we took another text from edittext2 field and converted into integer and added with the first integer and stored into sum variable.

e3.setText() function set the text in edittext3 field.

Now run the application in your virtual device or in your mobile. You could see the output like this:

That’s it guys for today, you made your own Android GUI Calculator. In our next tutorial, we will learn to use some other buttons such as toggle button, radio button, checkbox button etc:

http://www.androidplus.org/2014/07/Use-of-Toast-Toggle-Button-Radio-Button.html

I hope you understood the tutorial very well. In case of any problem feel free to comment.