Tutorial 5 : Android Button Example

In this tutorial, we show you how to add a button on the XML layout and a click listener on it. When the user click on the button, the font size of text which are created before in the previous tutorial will change.

1. Add Button

First, drag and drop a button into the GUI from the palette window is shown as Figure 5.1.

Figure 5.1

Therefore, we will able to see the additional code is added into the layout XML file. The additional code is shown as Figure 5.2. These additional code is the properties of the button.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Success"
        android:id="@+id/textView"
        android:textSize="70sp"
        android:textColor="@android:color/holo_blue_light" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true" />

</RelativeLayout>

Figure 5.2

We are able to change the properties of the button by changing the code at here, just like what we done in the previous tutorial. Now, we would like to change the text on the button to become "Change Size". We can do it either through graphical interface or hard code interface. I would like to use the hard code changing as shown in Figure 5.3 and the output of GUI will be as Figure 5.4.

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Change Size"
        android:id="@+id/button"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true" />

Figure 5.3

Figure 5.4

So now you are successfully add a button on the XML layout. Congratulation to you, you are done the first step of it. Next, we will add click listener event for the button in the Android activity file (*.java).

2.  Add Click Listener

In this step, we need to import android.widget.Button class into Android activity file (*.java). Without this command, we will not able to use the button to perform some specific task.

Now add a click listener method for the button. The overall code change is shown as Figure 5.5. With this code change you will able to change the font size by click the button.

public class HelloWorld extends Activity {

    Button button;
    TextView txtsize;

    int toggle = 0;

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

        button = (Button)findViewById(R.id.btnOK);
        txtsize = (TextView)findViewById(R.id.tvName);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(toggle == 0)
                {
                    txtsize.setTextSize(25);
                    toggle = 1;
                }
                else
                {
                    txtsize.setTextSize(70);
                    toggle = 0;
                }
            }
        });
    }

Figure 5.5

Now we would like to discuss what was the code have done. Firstly, we declare a variable toggle = 0 as the default value. Then, we create a if....else... condition to check the toggle value. If the toggle equal to default value, we will change the original font size become small and set the toggle = 1. Whereas, if the toggle value not equal to default value (0), we will set the font size become big and reset the toggle value to default value. The flow chart for this checking condition is shown in the Figure 5.6. Hopefully, with this flow chart, you can get a better understanding for the operation.

Figure 5.6

When you run the application by using the emulator, you should able to get the output response as Figure 5.7. Besides that, your Android application must be function as the video clip below.

Figure 5.7

 

By now, you should be able to understand how the button works in Android application. Try to create some different application and share with us. :)

In next tutorial,  we will learn about the different layout of Android application. See you. :P