Search code examples
androidswitchcompat

Android: SwitchCompat, padding and colour issues

I am using the android.support.v7.widget.SwitchCompat and i am encountering the following problems

  • My style which includes colorControlActivated does not apply
  • Switch padding using Android namespace and Res-Auto has no effect
  • How do set the thumb text to be all caps

My code

Styles.xml

Note i tried with NO parent and Theme.AppCompat.Light.NoActionBar

<style name="ToggleSwitchStyle" parent="Theme.AppCompat">
    <item name="colorControlActivated">@color/emerald</item>
</style>

My SwitchCompat defined in an XML layout

<android.support.v7.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:padding="5dp"
    android:textOff="@string/no"
    android:textOn="@string/yes"
    app:showText="true"
    android:switchPadding="5dp"
    app:switchPadding="10dp"
    app:theme="@style/ToggleSwitchStyle"
    android:theme="@style/ToggleSwitchStyle"
    android:textAllCaps="true"
    app:thumbTextPadding="5dp"
    >

So in the above textAllCaps does not make the text on the thumb all caps.

Switch padding has no effect

The theme using Res-Auto or Android namespace has no effect on the active colour.

However I can change the active colour by changing the colour accent on my material theme

 <!-- Application theme. -->
    <style name="MaterialDesign" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/yellow</item>
    </style>
Solution

  • Make sure your Styles.xml is in values-v21 folder. I had similar issues with switchcompat for changing the color .

    This worked for me. Keeping the styles.xml in values-v21 folder and ColorAccent to change the color of the switch.

    <?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="colortoggle">
        <item name="colorAccent">@color/continue_button</item>
    </style>
</resources>

    For thumb issue: The textAppearance and the related setTypeface() methods control the typeface and style of label text, whereas the switchTextAppearance and the related seSwitchTypeface() methods control that of the thumb.