Learn how to use Android Buttons by developing a calculator in Android

Share Button

Android Buttons learn android development

Welcome back to our Android Application Development Course. In this tutorial i will teach you how to use Android Buttons. So what are Android Buttons? Like any other software buttons are important to control the software. Android provides with two kinds of buttons. Simple Android Buttons and Android Image Button. We will just see how to use simple android buttons by making a simple android calculator.

Step#1

Launch an android application with Empty Activity. Look at How to set up android development environment.

Step#2

Go to your layout and design one using drag and drop interface.

<pre><?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.xdroider.app.xdroidercalculator.MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/editnumber1"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_toRightOf="@+id/textView"
        android:layout_toEndOf="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Number 1"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Number 2"
        android:id="@+id/textView2"
        android:layout_below="@+id/editnumber1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/editNumber2"
        android:layout_alignTop="@+id/textView2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_toRightOf="@+id/textView2"
        android:layout_toEndOf="@+id/textView2" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="*"
        android:id="@+id/buttonMul"
        android:layout_marginTop="38dp"
        android:layout_below="@+id/editNumber2"
        android:layout_centerHorizontal="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        android:id="@+id/buttonSub"
        android:layout_below="@+id/buttonMul"
        android:layout_centerHorizontal="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="/"
        android:id="@+id/buttonDiv"
        android:layout_below="@+id/buttonSub"
        android:layout_centerHorizontal="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="+"
        android:id="@+id/buttonAdd"
        android:layout_below="@+id/buttonDiv"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Answer"
        android:id="@+id/textView3"
        android:layout_marginBottom="63dp"
        android:visibility="invisible"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout></pre>

Android Buttons

Step#3

Go to your main activity and write down the following code

<pre>package com.xdroider.app.xdroidercalculator;

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 {

    EditText editNumber1;
    EditText editNumber2;
    Button buttonAdd, buttonSub, buttonMul, buttonDiv;
    String num1,num2;
    double num11,num22;
    double answer;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editNumber1 = (EditText)findViewById(R.id.editnumber1);
        editNumber2 = (EditText)findViewById(R.id.editNumber2);

        buttonAdd = (Button)findViewById(R.id.buttonAdd);
        buttonSub = (Button)findViewById(R.id.buttonSub);
        buttonDiv = (Button)findViewById(R.id.buttonDiv);
        buttonMul = (Button)findViewById(R.id.buttonMul);

        textView = (TextView)findViewById(R.id.textView3);

        // setting up button listener
        buttonAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // getting the text and converting it to string
                    num2 = editNumber2.getText().toString();
                    num1 = editNumber1.getText().toString();
                // converting string into double
                    num11 = Double.parseDouble(num1);
                    num22 = Double.parseDouble(num2);
                // doing addition
                    answer = num11 + num22;
                //converting string into double
                    String answer1 = String.valueOf(answer);
                // displaying it into textview
                    textView.setVisibility(View.VISIBLE);
                    textView.setText(answer1);
            }
        });

        // setting up button listener
        buttonSub.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // getting the text and converting it to string
                num2 = editNumber2.getText().toString();
                num1 = editNumber1.getText().toString();
                // converting string into int
                num11 = Integer.parseInt(num1);
                num22 = Integer.parseInt(num2);
                // doing subtraction
                answer = num11 - num22;
                //converting string into integer
                String answer1 = String.valueOf(answer);
                // displaying it into textview
                textView.setVisibility(View.VISIBLE);
                textView.setText(answer1);
            }
        });

        // setting up button listener
        buttonDiv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // getting the text and converting it to string
                num2 = editNumber2.getText().toString();
                num1 = editNumber1.getText().toString();
                // converting string into double
                num11 = Double.parseDouble(num1);
                num22 = Double.parseDouble(num2);
                // doing division
                answer = num11 / num22;
                //converting string into double
                String answer1 = String.valueOf(answer);
                // displaying it into textview
                textView.setVisibility(View.VISIBLE);
                textView.setText(answer1);
            }
        });

        // setting up button listener
        buttonMul.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // getting the text and converting it to string
                num2 = editNumber2.getText().toString();
                num1 = editNumber1.getText().toString();
                // converting string into int
                num11 = Integer.parseInt(num1);
                num22 = Integer.parseInt(num2);
                // doing multiplication
                answer = num11 * num22;
                //converting string into integer
                String answer1 = String.valueOf(answer);
                // displaying it into textview
                textView.setVisibility(View.VISIBLE);
                textView.setText(answer1);
            }
        });
    }
}</pre>

Finally Run the Application on your Android Emulator or your real device.

Explanation of the Code:

In main activity these are things you need to know:

Button buttonAdd;
buttonAdd = (Button)findViewById(R.id.buttonAdd);

In the above code snippet you are declaring a button and then assigning it an Id. findViewById(R.id.buttonAdd) is a built in function that will connect your buttonAdd in MainActivity.java to buttonAdd in your layout file. Once you find the id, we cast the id into a Button, so that it can be stored into Button object. Similarly you will do the same for all the buttons, EditText and TextView. Basically whatever you need to link to Java has to be done using findViewById method.

buttonAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

// getting the text and converting it to string
num2 = editNumber2.getText().toString();
num1 = editNumber1.getText().toString();
// converting string into double
num11 = Double.parseDouble(num1);
num22 = Double.parseDouble(num2);
// doing addition
answer = num11 + num22;
//converting string into double
String answer1 = String.valueOf(answer);
// displaying it into textview
textView.setVisibility(View.VISIBLE);
textView.setText(answer1);
}
});

In the above code snippet, we set an onclicklisterner for our button. It detects when a button is pressed by the user. It has an Override function called onClick that performs some actions when the button is clicked.
When the button is clicked we get the text from our editText and convert it into String. These Strings are then converted into Double by parseDouble() method. Then we performed the required operation, in this case its plus. After that we converted the double back into String. Our TextView was initially invisible so we make that visible and then set our text.

I hope you liked the tutorial. Check our next tutorial here.

Share Button

You may also like...