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>