7 How to use ImageButton in Android

Tweet

From Developer.android.com: “Displays a button with an image (instead of text) that can be pressed or clicked by the user. By default, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states. The image on the surface of the button is defined either by the android:src attribute in the XML element or by the setImageResource(int) method…”

In this tutorial, we show you how to use an ImageButton. Send a SMS automatically when click on the ImageButton.

Here is a result of this tutorial:

This project is developed in Eclipse 4.2.0.

1. Make some ImageButton by XML Layout

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

           android:orientation="vertical"

           android:layout_width="fill_parent"

           android:layout_height="fill_parent">

      

           <ImageButton android:id="@+id/button_1"

               android:layout_alignParentTop="true"

               android:layout_centerHorizontal="true"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:focusable="true"

               android:background="@drawable/image_button_up"

               android:layout_marginTop="10dp"

               android:layout_marginBottom="10dp"

               android:onClick="button_click"/>   

          

           <ImageButton android:layout_below="@id/button_1"

               android:layout_alignLeft="@id/button_1"

               android:id="@+id/button_2" 

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:focusable="true"

               android:background="@drawable/image_button_left"

               android:layout_marginLeft="-57dp"

               android:layout_marginBottom="10dp"

               android:onClick="button_click"/>

          

           <ImageButton android:layout_below="@id/button_1"

               android:layout_alignLeft="@id/button_1"

               android:id="@+id/button_3" 

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:focusable="true"

               android:background="@drawable/image_button_right"

               android:layout_marginLeft="57dp"

               android:layout_marginBottom="10dp"

               android:onClick="button_click"/>

          

           <ImageButton android:layout_below="@id/button_3"

               android:layout_alignLeft="@id/button_3"

               android:id="@+id/button_4" 

               android:layout_centerHorizontal="true"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:focusable="true"

               android:background="@drawable/image_button_down"

               android:layout_marginLeft="-57dp"

               android:layout_marginBottom="30dp"

               android:onClick="button_click"/>

              </RelativeLayout>

For android:background attribute of each ImageButton we need a xml file in folder drawable, for example:

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

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

    <item

        android:state_pressed="true"

        android:state_enabled="true"

        android:drawable="@drawable/down_button_press" />

    <item

        android:state_enabled="true"

        android:drawable="@drawable/down_button" />

    </selector>

2. Code: Add click listener for the ImageButton

When user click on the ImageButton the SMS with phone number and message content will be send automatically

public void button_click(View view){

       String phone_string ="";

       String sms_string ="";

                 

       switch(view.getId()) {

       case R.id.button_1:

              phone_string = "01234678345";

           sms_string = "SMS content 1";

           break;

       case R.id.button_2:

              phone_string = "01694846123";

           sms_string = "SMS content 2";

           break;

       case R.id.button_3:

              phone_string = "0912123789";

           sms_string = "SMS content 3";

           break;

       case R.id.button_4:

              phone_string = "0988163066";

           sms_string = "SMS content 4";

           break;

       }

       // send message

           SmsManager smsManager = SmsManager.getDefault();

              smsManager.sendTextMessage(phone_string, null, sms_string, null, null);

        

              // show alert

              final AlertDialog alertDialog = new AlertDialog.Builder(this).create();

              alertDialog.setTitle("Your message will be sent");

              alertDialog.setMessage("Phone Number: " + phone_string + "\nSMS Message: " + sms_string);

              alertDialog.setButton("Close", new DialogInterface.OnClickListener() {

                     public void onClick(DialogInterface dialog, int which) {

             // here you can add functions

                     }

              });                       

              alertDialog.show();

    }

3. DEMO
3.1. Run application

Change state ImageButton when click on it.

And send a SMS automatically

You can download all source codes from here