How to apply a custom style to SwitchCompat

Question

I would like to apply a custom style to SwitchCompat. Change drawables and text for on and off state. How can I achieve this? I can't find any examples on how this is done. I tried the following in my styles.xml but apparently I'm not using the right parent:

<style name="Switch" parent="android:Widget.AppCompat.Widget.CompoundButton.SwitchCompat">     <item name="android:textOn">@string/common_yes</item>     <item name="android:textOff">@string/common_no</item>     <item name="android:thumb">@drawable/btn_switch_selector</item>     <item name="android:track">@drawable/btn_switch_bg_selector</item> </style> 

Edit

I managed to change the drawables in code.

switchView.setThumbResource(R.drawable.btn_switch_selector); switchView.setTrackResource(R.drawable.btn_switch_bg_selector); 

but I haven't found a way yet to change the text of the switch. The following snippet doesn't seem to work. Maybe I need to set some more text-properties?

switchView.setTextOn(context.getString(R.string.common_yes)); switchView.setTextOff(context.getString(R.string.common_no)); 

According to the SwitchCompat source code there should be support for on/off text: https://android.googlesource.com/platform/frameworks/support/+/421d8baa4a524e1384bcf033360bccaf8d55081d/v7/appcompat/src/android/support/v7/widget/SwitchCompat.java

The {@link #setText(CharSequence) text} property controls the text displayed in the label for the switch, whereas the {@link #setTextOff(CharSequence) off} and {@link #setTextOn(CharSequence) on} text controls the text on the thumb.

Edit 2

Finally found a code solution. Apparently setShowText() needs to be set to true for the text to appear on the switch.

switchView.setTextOn(context.getString(R.string.common_yes)); switchView.setTextOff(context.getString(R.string.common_no)); switchView.setShowText(true); switchView.setThumbResource(R.drawable.btn_switch_selector); switchView.setTrackResource(R.drawable.btn_switch_bg_selector); 

and xml solution

<android.support.v7.widget.SwitchCompat         android:id="@+id/view_switch"         android:layout_width="wrap_content"         android:layout_height="wrap_content"                     android:thumb="@drawable/btn_switch_selector"         app:track="@drawable/btn_switch_bg_selector"         android:textOn="@string/common_yes"         android:textOff="@string/common_no"         app:showText="true" /> 

I'd still like to know if there is a way to put this in styles.xml.

Answer 1

Finally I found a way to apply the same style throughout my whole app. I put the following line in my themes.xml

<item name="switchStyle">@style/Custom.Widget.SwitchCompat</item> 

And the following in my styles.xml

<style name="Custom.Widget.SwitchCompat" >     <item name="android:thumb">@drawable/btn_switch_selector</item>     <item name="track">@drawable/btn_switch_bg_selector</item>     <item name="showText">true</item>     <item name="android:textOn">@string/common_yes</item>     <item name="android:textOff">@string/common_no</item> </style> 

Answer 2

The style should include the parent

<item name="switchStyle">@style/MySwitchCompat</item>  <style name="MySwitchCompat" parent="Widget.AppCompat.CompoundButton.Switch">     <item name="android:textColor">@color/accent</item>     <item name="android:fontFamily">sans-serif-light</item> </style>