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?
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