Making your App responds to button clicks

 

In this tutorial, we want to make our App interactive by making it to respond to button clicks. When the user clicks on the button, an event will occur.

Project: To display a number on the screen and a button. So, when the button is clicked, the number will be updated. Anytime you click on the button, the default number is increased by 1.
So, let’s get started.
First off, you will have to create a new project, give it any name you want. If you don’t know how to create a new project in Android Studio. Check this link, I explained explicitly on how create a new Android Studio project www.rexandroid.blogspot.com

If you’ve launched Android Studio already and you are in project but want create another project.
Go to the top bar, Click on File > New Project and fill up the rest.

In activity_main, enter this following codes. Here is a link on how to understand the basics of XML, working with XML


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="com.android.rexben.demomapp.MainActivity">
    

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Number"
        android:textSize="20sp" />
    
    
<!--The text that will be updated when a button is clicked-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="0"
        android:textSize="20sp"
        android:id="@+id/textView"/>
    
    
<!--The button that is responsible for add numbers-->
    <Button
        android:id="@+id/add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add" />
</LinearLayout>



In your MainActivity.java, enter this following lines of code
 

package com.android.rexben.demoapp;



import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    //This variable called field because it declared out a method
//It is variable where we store the values that are added
    private int numberUpdate;

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

        //Casting views by resource IDs
        final TextView defaultText = (TextView) findViewById(R.id.textView);
        Button addButton = (Button) findViewById(R.id.add);


        //setOnClickListener is responsible for happens when a button is clicked
        //Any codes writing inside the setOnClickListener will be executed when the button is clicked
        addButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //Anytime the button is clicked 1 is added to the screen
                numberUpdate = numberUpdate + 1;


                //Displays the numberUpdate to the screen
                //if you don't set the text, nothing will be display to 
                //the screen
                defaultText.setText("" + numberUpdate);
            }
        });
    }

}
When you are done, test run your App on your
Android device. If you don’ know how to run the App on your mobile device,
check this link Getting familiar with Android Studio



numberUpdate = numberUpdate + 1;
 
To:
numberUpdate = numberUpdate - 1; to decrease the value by 1 anytime there is a click.
numberUpdate = numberUpdate * 5; to multiply the value by 5 anytime there is a click.
numberUpdate = numberUpdate / 2; to divide the value by 2 anytime there is a click.
 
Just add the default value of your choice
private int numberUpdate = 10;
 
If you don’t want only the number to show, if you want to display other texts. For instance, instead of displaying only “1, you can add “Number 1”.
Just add the text you want and add a space so that the text and the number won’t be together. You can enter a long text but it must be in between "".

defaultText.setText("Number " + numberUpdate);