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:
You need to create a new com.att.widgets.lib.button.ImageButton object and add it to your view or layout.
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>
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); }
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 |
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>