Monday, December 31, 2012

1 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

1 comment:

  1. Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me.

    Best Linux training in Noida
    Linux Training Institute in Noida
    Shell Scripting Training Institute in Noida

    ReplyDelete