Unable to change switch color

Question

I'm looking for applying this color to all switches only. But by default, it is taking colorAccent instead of this theme for switch.

Device: marshmallow.

layout:

<Switch
            android:id="@+id/soundSwitch"
            style="@style/SwitchStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginBottom="@dimen/large_space"
            android:layout_marginRight="@dimen/medium_space"
            android:layout_marginTop="@dimen/large_space"
            android:checked="true"
            />

styles-v21:

<style name="SwitchStyle" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="android:colorControlActivated">@color/switch_color</item>

        <!-- inactive thumb color -->
        <item name="colorSwitchThumbNormal">#f1f1f1</item>

        <!-- inactive track color (30% transparency) -->
        <item name="android:colorForeground">#42221f1f</item>
    </style>

What am I doing wrong?

Allenaallenby

if you struggle and fail in that you may get a short alternative by just overriding the colorAccent <item name="colorAccent">your color</item> – Windtight

Answer 1

You're mixing styles and themes together.

These attributes are theme attributes so define them together in a theme overlay:

res/values/styles.xml (not values-v21)

<style name="ThemeOverlay.MySwitch" parent="">
    <item name="android:colorControlActivated">@color/switch_color</item>
    <item name="android:colorSwitchThumbNormal">#f1f1f1</item>
    <item name="android:colorForeground">#42221f1f</item>
</style>

<style name="ThemeOverlay.MySwitchCompat" parent="">
    <item name="colorControlActivated">@color/switch_color</item>
    <item name="colorSwitchThumbNormal">#f1f1f1</item>
    <item name="android:colorForeground">#42221f1f</item>
</style>

And then apply this theme overlay on the switch:

res/layout/layout.xml

<Switch
    android:theme="@style/ThemeOverlay.MySwitch"/>

<androidx.appcompat.widget.SwitchCompat
    android:theme="@style/ThemeOverlay.MySwitchCompat"/>

Pick one of the two variants:

• Switch available since API 21, all theme attributes are prefixed with android:
• SwitchCompat available in AndroidX AppCompat library, some theme attributes are not prefixed (make sure you know which).

Sightread

Hi, i know it is an old answer, but can you please explain what do you mean when saying "You're mixing styles and themes together. These attributes are theme attributes so define them together in a theme overlay I'm also have the same issue now, trying to apply theme to a Switch component through a style attribute but nothing change, whereas applying the theme through theme attribute works? Can you explain me what did you mean? – Voltz

Check Android Developers channel on YouTube, look for videos from Google I/O or other conferences with Nick Butcher or Chris Banes explaining the topic. – Sightread

Thanks. But you gave me a link with a lot of videos and i can't watch them all in order to get answer for my question :( – Voltz

I'm under the impression you wish to understand the topic, understand why it behaves a certain way. I can't give you a concise, satisfactory answer that would fit in a Stack Overflow comment. A testament to that is the fact that there have been multiple presentations over the years on the topic. Start with youtu.be/sNSlDfaNq-0, watch it whole, at your own pace, see if that helps you. – Sightread

Thanks i watched it all. The instructor says something like :*"coloraccent is a theme attribute so don't try to use it in a layout because nothing will happen". but he didn't refer to style attribute at all, i think i have problem to understand how a *theme attributes suce as textAppearance, theme, style, etc are treated when a view is being inflated. I started to watch youtube.com/watch?v=TIHXGwRTMWI , hopefully it will help me to understand. If you have another source to help me i will be glad. Thanks! – Voltz

After struggling with this for a few hours, there is only one thing that is definitely true: Styles and Themes on Android are a pain in the ass – Projector

Ok, but then how can I set background color to SwitchCompat? – Avaunt

Answer 2

Probably, you can try using android.support.v7.widget.SwitchCompat instead of Switch and android:theme=@style/SwitchStyle instead of style="@style/SwitchStyle"

Uzziel

Kozrev, Can you please explain why we need to use android:theme instead of style? I tried to understand it and didn't success – Voltz

Answer 3

Add this to style.xml for switch styling.

<style name="SwitchThemeOverlay" parent="">
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">#00c853</item>

    <!-- inactive thumb color -->
    <item name="colorSwitchThumbNormal">#CC0000</item>

    <!-- inactive track color (30% transparency) -->
    <item name="android:colorForeground">#666666
    </item>
</style>

and in your xml use

 <android.support.v7.widget.SwitchCompat
        android:id="@+id/switch_desc"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@color/colorPrimaryDark"
        android:padding="5dp"
        android:checked="false"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
        android:theme="@style/SwitchThemeOverlay"
        android:layout_marginLeft="10dp"
        android:text="Description"/>

Etna

I changed "Style" to "ThemeOverlay" to better describe what's happening. – Sightread

Answer 4

My answer is dedicated to those who wants to change the switch color and remove the default opacity given to the color. Please do the following steps :

1. In your layout xml file replace Switch with androidx.appcompat.widget.SwitchCompat

2. In styles.xml file create a new style like this

   <style name="SwitchCompatStyle" > <item name="thumbTint">@color/switch_thumb</item> <item name="trackTint">@color/switch_track_selector</item> </style>

3. In your androidx.appcompat.widget.SwitchCompat tag add this line style="@style/SwitchCompatStyle"

Souza