Styling / coloring SwitchCompat button in Android Lollipop for material design

Question

I am trying to find resources explaining how I can style the Switch button in the Material Design theme.

This link explains color meanings and aesthetic details, but does not talk about how I can achieve this by setting certain attributes in the material design theme.

http://www.google.com/design/spec/components/switches.html#switches-switch

If there is no direct way to set the color of the switch, where are the drawings that I can use to create my own version?

Answer 1

I am trying to find resources explaining how I can change the style of a button in a Material Design theme.

Coloring widgets are pretty simple now with the new appcompat-v7: 21.

As long as you use appcompat-v7: 21, you can replace all old Switch widgets with SwitchCompat widgets. So in your xml layouts, instead of the old Switch tag, use android.support.v7.widget.SwitchCompat .

Then, in your styles.xml file, make sure the parent theme of your application is Theme.AppCompat theme, for example Theme.AppCompat.Light .

Finally, the key should indicate your own value for colorAccent :

 <item name="colorAccent">@color/my_fancy_color</item> 

The color that you specify for colorAccent will be used to color widgets in your application, such as SwitchCompats , EditTexts , RadioButtons , etc.

So your .xml style might look something like this:

 <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name="colorPrimary">@color/color_primary</item> <!-- colorPrimaryDark is used to color the status bar --> <item name="colorPrimaryDark">@color/color_primary_dark</item> <!-- colorAccent is used as the default value for colorControlActivated which is used to color widgets --> <item name="colorAccent">@color/my_fancy_color</item> <!-- You can also set colorControlNormal, colorControlActivated colorControlHighlight & colorSwitchThumbNormal. --> </style> 

Where are the drawings that I can use to create my own version?

I would not recommend changing the drawings directly, but they are located in

sdk/platforms/android-21/data/res/drawable-XXXX

and the files are called

btn_switch_to_off_mtrl_XXXXX.9.png

btn_switch_to_on_mtrl_XXXXX.9.png

switch_track_mtrl_alpha.9.png

Answer 2

To execute the JDJ answer:

AppCompat has an error with a damaged file in drawable-hdpi:

https://code.google.com/p/android/issues/detail?id=78262

To fix this, simply override it with these two files:

https://github.com/lopespm/quick-fix-switchcompat-resources

Add them to the drawable-hdpi directory.

XML

 <android.support.v7.widget.SwitchCompat android:id="@+id/dev_switch_show_dev_only" android:layout_width="wrap_content" android:layout_height="wrap_content" /> 

And there was nothing in Java

Answer 3

In my case, I only wanted to create a specific switch, but not all of them in the application. Here is how I did it using AppCompat-v7: 23

xml layout:

 <android.support.v7.widget.SwitchCompat android:id="@+id/switchAffiliateMember" android:theme="@style/Sugar.Switch.Affiliate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:textOff="No" android:textOn="Yes" /> 

v21 / styles.xml:

 <style name="Sugar.Switch.Affiliate" parent="Base.Widget.AppCompat.CompoundButton.Switch"> <item name="colorSwitchThumbNormal">@color/red</item> <item name="colorAccent">@color/white</item> </style> 

colorSwitchThumbNormal is the "off" state, colorAccent is the "on" state. Please note that none of them have the namespace prefix "android", I don’t understand why, but it works only for me.