Exercise: Load background to ImageButton, using XML

Default of ImageButton:

Button On Focus:

Button On Click:


The backgound of ImageButton can be defined in main.xml, without any works on programming.



Download and save the three image above to res > drawable folder.

Create a loadimagebutton.xml in res > drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
 android:state_focused="true"
 android:state_pressed="false"
 android:drawable="@drawable/androidonfocus" />
<item
 android:state_focused="true"
 android:state_pressed="true"
 android:drawable="@drawable/androidonclick" />
<item
 android:state_focused="false"
 android:state_pressed="true"
 android:drawable="@drawable/androidonclick" />
<item  
 android:drawable="@drawable/android" />
</selector>

Modify main.xml to involve loadimagebutton

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<ImageButton
    android:background="@drawable/loadimagebutton"  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    />
</LinearLayout>

(To achieve the same out-come using programmatical approach, refer to the next article, Exercise: Load background to ImageButton, in programmatical approach.)