Image Button for Android™

 

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:

Download UI elements for Android.

 

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 by 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>
   

Android is a trademark of Google Inc.