There are a few ways of doing this:
First, you can simply use an ImageButton
, and manually toggle its image drawable on click in Java. This is what the stock Music player on Android does for the shuffle button, for example. Although you won't have control over the button background in its checked state, you'll be able to swap out the image, which may be favorable from an Android UI-consistency perspective.
Another option is to use a complex set of drawables and nine-patches to get an image inside a ToggleButton
, with the option of changing the background and/or the image resource upon toggle. That's the option I'll show below. But remember, be cautious about UI consistency before doing this.
res/layout/foo.xml
...
<ToggleButton
android:textOn="" android:textOff=""
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shuffle_button" />
...
res/drawable/shuffle_button.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- use "@android:drawable/btn_default" to keep consistent with system -->
<item android:drawable="@drawable/toggle_button_background" />
<item android:drawable="@drawable/shuffle_button_image" />
</layer-list>
res/drawable/toggle_button_background.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- checked state -->
<item android:state_pressed="false" android:state_checked="true"
android:drawable="@drawable/btn_default_checked" />
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="@drawable/btn_default_normal" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="@drawable/btn_default_normal_disable" />
<item android:state_pressed="true"
android:drawable="@drawable/btn_default_pressed" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="@drawable/btn_default_selected" />
<item android:state_enabled="true"
android:drawable="@drawable/btn_default_normal" />
<item android:state_focused="true"
android:drawable="@drawable/btn_default_normal_disable_focused" />
<item android:drawable="@drawable/btn_default_normal_disable" />
</selector>
res/drawable/shuffle_button_image.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_mp_shuffle_on_btn" android:state_checked="true" />
<item android:drawable="@drawable/ic_mp_shuffle_off_btn" />
</selector>
Image files
WARNING: if you use these, your app will look inconsistent on devices with customized OS UIs (i.e. HTC's Sense UI).
ic_mp_shuffle_<state>_btn.9.png
need to be nine-patches, so that the image gets centered and not stretched to fit the button. Below are example hdpi
versions of the icon:
res/drawable-(h|m|ldpi)/ic_mp_shuffle_(on|off)_btn.9.png
Final Note: Remember to be consistent with the system UI when possible, and be mindful of the fact that your app may run on devices with customized versions of the OS that have different graphics for UI elements like buttons. An example of this is HTC Sense, which has green buttons in place of the grey/orange/yellow ones in stock Android. So, if you end up copying the btn_default_...
PNG files from the open source repository to create a toggle-able button background, you'll break consistency on those devices.