11

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?

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
AskQ
  • 4,215
  • 7
  • 34
  • 61
  • if you struggle and fail in that you may get a short alternative by just overriding the colorAccent `your color` – Xenolion Oct 31 '17 at 12:51

4 Answers4

24

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).
Eugen Pechanec
  • 37,669
  • 7
  • 103
  • 124
  • 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? – Eitanos30 Apr 16 '20 at 16:47
  • Check [Android Developers channel on YouTube](https://m.youtube.com/results?search_query=Android+developers+style+theme), look for videos from Google I/O or other conferences with Nick Butcher or Chris Banes explaining the topic. – Eugen Pechanec Apr 16 '20 at 16:55
  • 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 :( – Eitanos30 Apr 16 '20 at 16:57
  • 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 https://youtu.be/sNSlDfaNq-0, watch it whole, at your own pace, see if that helps you. – Eugen Pechanec Apr 16 '20 at 17:09
  • 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 https://www.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! – Eitanos30 Apr 16 '20 at 18:11
  • 1
    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 – voghDev May 19 '21 at 10:00
  • Ok, but then how can I set background color to `SwitchCompat`? – Konstantin Konopko Dec 09 '22 at 15:39
4

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

Boris Kozyrev
  • 152
  • 1
  • 5
  • 1
    Kozrev, Can you please explain why we need to use android:theme instead of style? I tried to understand it and didn't success – Eitanos30 Apr 16 '20 at 16:48
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"/>
Eugen Pechanec
  • 37,669
  • 7
  • 103
  • 124
Vinay
  • 732
  • 5
  • 8
1

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"

Michael
  • 411
  • 2
  • 6
  • 15