Introduction

The image button UI element is button UI element which has images representing its states. There are predefined image buttons or you can create your own button providing the images. For instance:

Creation

You need to create a new com.att.widgets.lib.button.ImageButton object and add it to your view or layout.

Example

Button with predefined image

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:att="http://schemas.android.com/apk/res/com.att.statictextbutton"
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content">
		<TextView 
                     android:layout_height="wrap_content" 
                     android:text="Close Button:" 
                     android:layout_width="150dip"/>
		<com.att.widgets.lib.button.ImageButton 
                     android:id="@+id/btn2" 
                     android:layout_width="wrap_content" 
                     android:layout_height="wrap_content" 
                     android:layout_marginBottom="10sp" 
                     att:imageType="close"/>
		<com.att.widgets.lib.button.ImageButton 
                     android:id="@+id/btn2_disabled" 
                     android:layout_width="wrap_content" 
                     android:layout_height="wrap_content" 
                     android:layout_marginBottom="10sp" 
                     att:imageType="close"/>
</LinearLayout>

Activity Code

Disabling image button is only allowed by code

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ((ImageButton) this.findViewById(R.id.btn2_disabled)).setEnabled(false);
   }

Configuration

There are 5 predefined buttons, you can select one of them changing the 'src' property:

Src
Description
@drawable/play_big_button
Play Button Big
@drawable/pause_button
Pause Button
@drawable/levelup_button
Level Up Button
@drawable/remove_button
Remove Button
@drawable/play_button
Play Button Small

How to create personalized image buttons

1. Create a new xml file named res/drawable/mybutton.xml with this content:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_enabled="false" 
              android:drawable="@drawable/mybutton_disabled" /> <!-- disabled -->
	<item android:state_pressed="true" 
              android:drawable="@drawable/mybutton_pressed" /> <!-- pressed -->
	<item android:state_focused="true" 
              android:drawable="@drawable/mybutton_focused" /> <!-- focused -->
	<item android:drawable="@drawable/mybutton_enabled" /> <!-- default -->
</selector>

2. Add the images corresponding to each state to the res/drawable folder:

Image
State
Image Description
@drawable/mybutton_disabled
mybutton_disabled.png
Disabled State
@drawable/mybutton_pressed
mybutton_pressed.png
Pressed State
@drawable/mybutton_focused
mybutton_focused.png
Focused State
@drawable/mybutton_enabled
mybutton_enabled.png
Enabled/Normal State

3. Add the button code:

<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:att="http://schemas.android.com/apk/res/com.att.statictextbutton"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"  
    android:background="#FFFFFFFF" 
    android:padding="20sp"  
    android:orientation="vertical" >
    <com.att.widgets.lib.button.ImageButton 
        android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:src="@drawable/mybutton" 
        android:layout_marginBottom="10sp" 
        android:background="@color/transparent" />
</LinearLayout>