Android Programming – Create an Activity and Add a Button handler

We have discussed about Core Components in Android in my previous Article “Android Programming – Core Components“. In this Article, we will discuss Add a Button to the Activity and add a Button handler to display “Hello, World!” text.

Step 1. Create a Android Project.

While creating the Project; in “Add an Activity to Mobile” wizard; select “Add No Activity”.

Step 2. Once the Project is created, Android Studio will start Build the Project. Once the Project Build is completed; when you attempt to Run the Project; you will see below Error message; as NO Default Activity is added to the Project:

Error running ‘app’:

Default Activity not found

Step 3. Now we will add an Activity to Project. Add an Empty Activity to the Project. Refer this Article to learn how to add an Activity “Android Studio – LoginActivity – Add Login Activity to Android Project“.

Once the Activity is added; Build & Run the Project. You will see the blank screen; once your Project is opened in the Emulator.

Blank Activity
Blank Activity

What we do now is; add a Button to the Activity and when press the button; will display “Hello, World!” message.

Add a Button

Step 4. Open “activity_main.xml” file. You can see this file in Android view under app -> res -> layout.

Button - Add to Design
Button – Add to Design

Step 4.1. Select the Design View and select the appropriate device for preview from “Device for Preview (D)” field; which is on the top of the Design View.

Step 4.2. To add the Button control; select Buttons. Android Studio will display list of Button controls. Select Button control and right click on it. And then select “Add to Design” menu item. Android Studio will add a Button control to the Design window. You will see the text BUTTON appeared on the Button control. We will change this to “Hello!”.

Add a string resource

Step 4.3. Observe that, after adding Button control to the Design; you will see one entry appeared under Component Tree panel; under ConstraintLayout. And also observe that, there is a Warning icon appeared next to it. To show the Warning message; click on “Show Warnings and Error (E)” icon, which is top right of the Design pane. Once you click it; it will show below Warning message:

Hardcoded string “Button”, should use @string resource

Hardcoding text attributes directly in layout files is bad for several reasons:

* When creating configuration variations (for example for landscape or portrait) you have to repeat the actual text (and keep it up to date when making changes)

* The application cannot be translated to other languages by just adding new translations for existing string resources.
There are quickfixes to automatically extract this hardcoded string into a resource lookup.

Issue id: HardcodedText

And also you will see the Suggested Fix. Click on Fix button.

Android Studio will display “Extract Resource” dialog. Keep the default values shown; click on OK button to add the string resource.

Extract Resource
Extract Resource

Step 4.4. Observe that, in “strings.xml” file; Button string was added.

<resources>
    <string name="app_name">StartUp</string>
    <string name="button">Button</string>
</resources>

Change the Button text “Button” to “Hello!”.

Add button click handler

Step 5. Now we have a button added to the Design. Now we need to add a button click handler; which will run when we click the button.

Step 5.1. Select the Button control in the Design and it will show the properties of the Button.

In Attributes pane, under Button you will see onClick property. Place the mouse over it; and Android Studio will show the below ToolTip:

@android:onClick: Name of the method in this View’s context to invoke when the view is clicked. This name must correspond to a public method that takes exactly one parameter of type View. For instance, if you specify android:onClick=”sayHello”, you must declare a public void sayHello(View v) method of your context (typically, your Activity).

Step 5.2. As mentioned in the ToolTip above; we will add a method to run when we click the Button. Where to add this method? This must be associated to the Activity. We have added MainActivity to the Project; so, we have MainActivity class has been created.

Open MacinActivity.java file; which is under app -> java -> com.codesteps.david.startup in Android view.

Step 5.3. Add below method to MainActivity class:

public void sayHello(View v) {
    // Add relevant code here.
}

Step 5.4. How does Android know to run this method; when we click on the button? We need to map it. In the Design view, select the Button control. From Properties pane, enter sayHello in Button’s onClick field. After adding this; “activity_main.xml” file looks like below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sayHello"
        android:text="@string/button" />
</android.support.constraint.ConstraintLayout>

Observe that, “sayHello” was mapped to onClick event.

Add code in Button handler to show the “Hello, World!” message

Step 6. Inside “sayHello” method which we added just now in MainActivity class; add below statement.

Toast.makeText(this, "Hello, World!", Toast.LENGTH_SHORT).show();

This will create the Toast object; prepare the text “Hello, World!” and display it on the Activity window by calling its’ show() method. I am not going to explain about Toast in this Article; but remember that, Toasts are useful to show pop-up messages to notify to the user when required.

After adding this, MainActivity.java file looks like below:

package com.codesteps.david.startup;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

    public void sayHello(View v) {
        Toast.makeText(this, "Hello, World!", Toast.LENGTH_SHORT).show();
    }
}

Step 7. Now Build & Run the Project. You will see the “Hello!” button appeared in the Emulator. Click on the Button and you will observe, “Hello, World!” message popped-up on the screen.

Hello World message
Hello World message

We discuss more about Android through upcoming Articles.

[..] David

Tags:
One Comment

Add a Comment

Your email address will not be published.