Tech and Media Labs
This site uses cookies to improve the user experience.




Android Buttons

Jakob Jenkov
Last update: 2015-01-07

Android buttons are Android GUI components which are sensible to taps (clicks) by the user. When the user taps an Android button in an Android app, the app can respond to the tap. This Android button tutorial will explain how to use buttons in your Android apps.

Android buttons can be divided into two categories. Buttons with text on, and buttons with an image on. Buttons with images on can contain both an image and a text. Android buttons with images on are also called image buttons. This tutorial will cover both of these button types.

Button

A standard Android button with text on is represented by the Android class android.widget.Button . You can insert a Button instance into your Android app GUI either via a layout XML file or via programmatic insertion. This tutorial will describe both methods.

Adding a Button in a Layout File

Adding a Button to an Android app via a layout XML file is done by inserting a Button element into the layout file at the place where you want the Button to be located. Here is an example of a Android button in a layout file:

<Button
    android:id="@+id/the_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    />

This example declares a Button instance via XML. The Button will have the id the_button . The id will be auto-generated by Android Studio and will be available via the R.id object in your code. The size of the button is set to wrap around its content, meaning the button will have the approximate width and height of the text displayed on the button. The text displayed on the button is defined in the sr/main/res/values/strings.xml file with the key button_text.

Adding a Button Programmatically

You can add a Button your your Android app programmatically as well. You can do so inside the onCreate() method of the Activity subclass that will host the button. Here is an example showing how to insert a Button into the layout of an activity in the activity's onCreate() method:

public class MainActivity extends Activity {

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

        Button button = new Button(this);
        button.setText("Touch That!");

        RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.rootlayout);
        relativeLayout.addView(button);
    }
}

First a Button instance is created, passing the activity instance as Context to the Button constructor. Second, the text to be displayed on the text is set. Third, a reference to the root layout (ViewGroup) of the activity is obtained, and the Button instance is added to it using addView() .

ImageButton

Android also has an ImageButton you can use. As the name says, the ImageButton component is a button with an image on. The ImageButton is represented by the Android class android.widget.ImageButton .

Adding an ImageButton in a Layout File

Adding an ImageButton to an Android app via a layout XML file is done by inserting an ImageButton element into the layout file at the place where you want the ImageButton to be located. Here is an Android ImageButton XML example:

<ImageButton
    android:id="@+id/theimagebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/the_image_button_icon"
        />

Notice how the android:src attribute references a drawable from your Android project. This is the image that will be displayed on the ImageButton.

Button With Image and Text

If you want the Android button to contain both an image and a text label, you can use the Button class. Here is an example of how this looks when you use a Button element in a layout file:

<Button
        android:id="@+id/imageandtextbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        android:drawableLeft="@drawable/ic_launcher"
        />

Button Click Events

Your app can listen for clicks (taps) on an Android button in two ways.

The first way to add a click listener for a button is to declare a method in the Activity subclass hosting the button to be executed when the button is clicked. You declare which method in the Activity subclass to be executed inside the Button XML element. Here is an example:

<Button
    android:id="@+id/the_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    <b>android:onClick="onButtonClick"</b>
        />

Notice the android:onClick XML attribute. The value of the android:onClick attribute is the name of a method in the Activity subclass hosting the Button which is to be called when the button is clicked. The declaration of the onButtonClick() method looks like this:

public void onButtonClick(View view){
    //do something when button is clicked.
}

Remember, this method has to be declared inside the Activity subclass which hosts (displays) the button in its user interface.

The second way to add a click listener to an Android button is by obtaining a reference to the Button instance and adding a click listener to the button programmatically. Here is an example of how to add a click listener to an Android button programmatically:

public class MainActivity extends Activity {

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

        Button button = new Button(this);
        button.setText("Touch That!");

        button.setOnClickListener( new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MainActivity.this.onButtonClick(v);
            }
        });

        RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.rootlayout);
        relativeLayout.addView(button);
    }

    public void onButtonClick(View view){
         //do something when button is clicked.
    }

}

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC