StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are a few ways of doing this:</p> <p>First, you can simply use an <code>ImageButton</code>, and manually toggle its image drawable on click in Java. This is what the <a href="http://android.git.kernel.org/?p=platform/packages/apps/Music.git;a=summary" rel="noreferrer">stock Music player</a> on Android <a href="http://android.git.kernel.org/?p=platform/packages/apps/Music.git;a=blob;f=src/com/android/music/MediaPlaybackActivity.java#l1108" rel="noreferrer">does for the 'shuffle' button</a>, 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.</p> <p>Another option is to use a complex set of drawables and nine-patches to get an image inside a <code>ToggleButton</code>, 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.</p> <hr> <p><strong>res/layout/foo.xml</strong></p> <pre><code>... <ToggleButton android:textOn="" android:textOff="" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/shuffle_button" /> ... </code></pre> <p><strong>res/drawable/shuffle_button.xml</strong></p> <pre><code><layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <item android:drawable="@drawable/toggle_button_background" /> <item android:drawable="@drawable/shuffle_button_image" /> </layer-list> </code></pre> <p><strong>res/drawable/toggle_button_background.xml</strong></p> <pre><code><selector xmlns:android="http://schemas.android.com/apk/res/android">  <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> </code></pre> <p><strong>res/drawable/shuffle_button_image.xml</strong></p> <pre><code><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> </code></pre> <p><strong>Image files</strong></p> <ul> <li><code>btn_default_<state>.9.png</code> can be found in <a href="http://android.git.kernel.org/?p=platform/frameworks/base.git;a=summary" rel="noreferrer">frameworks/base.git</a> under <a href="http://android.git.kernel.org/?p=platform/frameworks/base.git;a=tree;f=core/res/res/drawable-hdpi;h=ebc31ac3e3261edf0067d82730e3ac6a5debcc19;hb=master" rel="noreferrer">core/res/res/drawable-hdpi</a> and <a href="http://android.git.kernel.org/?p=platform/frameworks/base.git;a=tree;f=core/res/res/drawable-mdpi;h=d27745b5d3b67fa39ab5fcfc6e58f4c351c4c6b1;hb=master" rel="noreferrer">core/res/res/drawable-mdpi</a> (also ldpi). <strong>WARNING</strong>: if you use these, your app will look inconsistent on devices with customized OS UIs (i.e. HTC's Sense UI).</li> <li><code>ic_mp_shuffle_<state>_btn.9.png</code> need to be nine-patches, so that the image gets centered and not stretched to fit the button. Below are example <code>hdpi</code> versions of the icon:</li> </ul> <p><strong>res/drawable-(h|m|ldpi)/ic_mp_shuffle_(on|off)_btn.9.png</strong></p> <p><a href="http://nikonizer.yfrog.com/Himg404/scaled.php?tn=0&server=404&filename=icmpshuffleonbtn9.png&xsize=640&ysize=640" rel="noreferrer">ic_mp_shuffle_on_btn.9.png http://nikonizer.yfrog.com/Himg404/scaled.php?tn=0&server=404&filename=icmpshuffleonbtn9.png&xsize=640&ysize=640</a> <a href="http://nikonizer.yfrog.com/Himg708/scaled.php?tn=0&server=708&filename=icmpshuffleoffbtn9.png&xsize=640&ysize=640" rel="noreferrer">ic_mp_shuffle_off_btn.9.png http://nikonizer.yfrog.com/Himg708/scaled.php?tn=0&server=708&filename=icmpshuffleoffbtn9.png&xsize=640&ysize=640</a></p> <hr> <p><strong>Final Note</strong>: 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 <a href="http://images.google.com/images?q=htc%20sense" rel="noreferrer">HTC Sense</a>, which has green buttons in place of the grey/orange/yellow ones in stock Android. So, if you end up copying the <code>btn_default_...</code> PNG files from the open source repository to create a toggle-able button background, you'll break consistency on those devices.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload