Monday, December 31, 2012

7 How to use ImageButton in Android

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:

Android Custom ImageButton - Figure 2



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
Android Custom ImageButton - Figure 1

Change state ImageButton when click on it.

Android Custom ImageButton - Figure 2


And send a SMS automatically

Android Custom ImageButton - Figure 3


You can download all source codes from here

7 comments: