How can I style an Android Switch

Question

The switch widget introduced in API 14 is styled by default with holo theme  I want to style it slightly different  changing its colors and shape a bit for branding reasons  How does one go about this  I know it must be possible  as ive seen the difference between default ICS and Samsung s touchwiz theme     I assume I ll need some state drawables  and I ve seen a few styles in http   developer android com reference android R styleable html with Switch thumb and Switch track that look like what I might be after  I just don t know how to go about using them   I m using ActionbarSherlock if that makes a difference  Only devices running API v14 or above will be able to use a switch at all  of course

User · Answer

Alternative and much easier way is to use shapes instead of 9-patches  It is already explained here   https   stackoverflow com a 24725831 512011

User · Answer

It s an awesome detailed reply by Janusz  But just for the sake of people who are coming to this page for answers  the easier way is at http   android-holo-colors com   dead link  linked from Android Asset Studio  A good description of all the tools are at AndroidOnRocks com  site offline now   However  I highly recommend everybody to read the reply from Janusz as it will make understanding clearer  Use the tool to do stuffs real quick

User · Answer

You can customize material styles by setting different color properties   For example custom application theme    lt style name  CustomAppTheme  parent  Theme AppCompat  gt       lt item name  android textColorPrimaryDisableOnly  gt  00838f lt  item gt       lt item name  colorAccent  gt  e91e63 lt  item gt   lt  style gt    Custom switch theme   lt style name  MySwitch  parent   style Widget AppCompat CompoundButton Switch  gt       lt item name  android textColorPrimaryDisableOnly  gt  b71c1c lt  item gt       lt item name  android colorControlActivated  gt  1b5e20 lt  item gt       lt item name  android colorForeground  gt  f57f17 lt  item gt       lt item name  android textAppearance  gt  style TextAppearance AppCompat lt  item gt   lt  style gt    You can customize switch track and switch thumb like below image by defining xml drawables  For more information http   www zoftino com android-switch-button-and-custom-switch-examples

User · Answer

You can define the drawables that are used for the background  and the switcher part like this     lt Switch     android layout width  wrap content      android layout height  wrap content      android thumb   drawable switch thumb      android track   drawable switch bg    gt    Now you need to create a selector that defines the different states for the switcher drawable  Here the copies from the Android sources     lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state enabled  false  android drawable   drawable switch thumb disabled holo light    gt       lt item android state pressed  true   android drawable   drawable switch thumb pressed holo light    gt       lt item android state checked  true   android drawable   drawable switch thumb activated holo light    gt       lt item                               android drawable   drawable switch thumb holo light    gt   lt  selector gt    This defines the thumb drawable  the image that is moved over the background  There are four   ninepatch images used for the slider    The deactivated version  xhdpi version that Android is using  The pressed slider   The activated slider  on state   The default version  off state     There are also three different states for the background that are defined in the following selector     lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state enabled  false  android drawable   drawable switch bg disabled holo dark    gt       lt item android state focused  true   android drawable   drawable switch bg focused holo dark    gt       lt item                               android drawable   drawable switch bg holo dark    gt   lt  selector gt    The deactivated version   The focused version   And the default version   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

[android] How can I style an Android Switch?

Examples related to android

Examples related to android-theme

Examples related to styling

Examples related to android-styles

Examples related to android-switch