Kotlin and Android Development featuring Jetpack: SwitchCompat's thumbTint and trackTint being ignored (page 76)

I think I might have found a problem involving SwitchCompat, thumbTint, and trackTint.

As entered, the SwitchCompat changes color to holo_blue_bright when the switch is enabled and checked, but the colors specified for state_enabled=false and state_checked=false seem to be getting ignored.

I started by changing the first color (state_enabled=false) in ai_toggle_color.xml to holo_red_light, to make it blatantly obvious when it’s being used… then launched it in the Emulator (API 30):

SwitchCompat enabled=false, checked=moot: light gray (vs holo_red_light)

SwitchCompat enabled=true, checked=true: holo_blue_bright, as expected.

SwitchCompat enabled=true, checked=false: dark gray (vs holo_green_light)

Searching around on StackOverflow, I found a few posts that seem to suggest that this might be due to a theme or style overriding the colors set via thumbTint and trackTint.

I tried running the same set of experiments under the emulator using API 27, to see whether it might be due to a recent change in Android’s behavior. Same outcome.

As a final test, I loaded Chapter 3 from the zip archive directly into Android Studio, and ran it as-is in the emulator under API 30… and got the same results as before.

For whatever reason, SwitchCompat appears to be ignoring the color choices set by thumbTint and trackTint unless enabled and checked are both true.

Hi everyone,

maybe I found a solution. Here is what I’ve done:

        <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/switch_player_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="@={player.isHuman}"
            android:enabled="@{player.isIncluded}"
            android:thumb="@drawable/ai_toggle_bg"
            app:trackTint="@color/ai_toggle_color"
            android:visibility="@{player.canBeToggled ? View.VISIBLE : View.INVISIBLE}"
            app:layout_constraintBottom_toBottomOf="@id/edit_text_player_name"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/edit_text_player_name" />

i.e. I removed the android:thumbTint attribute and I changed android:trackTint to app:trackTint.
Probably some API has been recently changed.

Hope this helps,
Roberto

@mfazio23

To get the exact Image as in this section I had to define two color state list resources. First I renamed the original ‘ai_toggle_color.xml’ to “ai_toggle_track_color.xml”. And created a new ai_toggle_color.xml with the following values:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:color="@android:color/darker_gray"
        android:state_enabled="false" />
    <item
        android:color="@android:color/holo_blue_dark"
        android:state_checked="true" />
    <item
        android:color="@android:color/holo_green_dark"
        android:state_checked="false"/>
</selector>

Once I had two color state lists (ai_toggle_color.xml and ai_toggle_track_color.xml) I modified to use them respectively:

app:thumbTint="@color/ai_toggle_color"
app:trackTint="@color/ai_toggle_track_color"