StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can define the drawables that are used for the background, and the switcher part like this: </p> <pre><code><Switch android:layout_width="wrap_content" android:layout_height="wrap_content" android:thumb="@drawable/switch_thumb" android:track="@drawable/switch_bg" /> </code></pre> <p>Now you need to create a selector that defines the different states for the switcher drawable. Here the copies from the Android sources: </p> <pre><code><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" /> <item android:state_pressed="true" android:drawable="@drawable/switch_thumb_pressed_holo_light" /> <item android:state_checked="true" android:drawable="@drawable/switch_thumb_activated_holo_light" /> <item android:drawable="@drawable/switch_thumb_holo_light" /> </selector> </code></pre> <p>This defines the thumb drawable, the image that is moved over the background. There are four <a href="http://developer.android.com/reference/android/graphics/NinePatch.html">ninepatch</a> images used for the slider: </p> <p>The deactivated version (xhdpi version that Android is using)<img src="https://i.stack.imgur.com/mUmF8.png" alt="The deactivated version"><br> The pressed slider: <img src="https://i.stack.imgur.com/PT8r4.png" alt="The pressed slider"><br> The activated slider (on state):<img src="https://i.stack.imgur.com/b3DEa.png" alt="The activated slider"><br> The default version (off state): <img src="https://i.stack.imgur.com/2qZ9X.png" alt="enter image description here"></p> <p>There are also three different states for the background that are defined in the following selector: </p> <pre><code><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:drawable="@drawable/switch_bg_disabled_holo_dark" /> <item android:state_focused="true" android:drawable="@drawable/switch_bg_focused_holo_dark" /> <item android:drawable="@drawable/switch_bg_holo_dark" /> </selector> </code></pre> <p>The deactivated version: <img src="https://i.stack.imgur.com/0Jatf.png" alt="The deactivated version"><br> The focused version: <img src="https://i.stack.imgur.com/JvQwe.png" alt="The focused version"><br> And the default version:<img src="https://i.stack.imgur.com/zW5YX.png" alt="the default version"></p> <p>To have a styled switch just create this two selectors, set them to your Switch View and then change the seven images to your desired style. </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