Styling / coloring the SwitchCompat button in Android Lollipop for Material Design

Question

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

This link does explain the color values and aesthetic details but doesn't say much on how I can achieve this by setting certain attributes in Material design theme.

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

If there's no direct way of setting the Switch's color, where are the drawables located that I can use to make my own version?

Answer 1

I have been trying to find resources explaining as to how I can style switch button in the Material Design theme.

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

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

Then in your styles.xml, make sure your app's parent theme is a Theme.AppCompat theme such as Theme.AppCompat.Light.

Finally, the key is to specify your own value for colorAccent:

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

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

So your styles.xml might look something like:

<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 drawables located that I can use to make my own version?

I wouldn't recommend altering the drawables 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 complete JDJ's answer:

There is a bug with a corrupt file in drawable-hdpi in AppCompat:

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

To fix it, just override it with these 2 files:

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

Add them to your 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 nothing was necessary in Java

Answer 3

In my case, I only wanted to style a particular switch, not all of them in the app. Here is how I did that 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. Notice that neither of these have an "android" namespace prefix, I don't understand why, but it only works in this way for me.