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.

Sciatic

Questions asking how it could be done, or examples, can be closed as "demanding off-site resource". Please re-phrase your question, show us what you've tried(it tried at all). Don't forget to visit Asking section to see what kind of questions are welcome here. I'll wait for your edit/deletion. Thanks. – Headlock

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>

Sciatic

Are you sure you inherit other attributes. What about <style name="Custom.Widget.SwitchCompat" parent="Widget.AppCompat.CompoundButton.Switch" > ? – Huesman

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>

Nickienicklaus