My switch does not turn to my style colors

Question

I have just started making an android app just as something other than just C++ so that I learn more things and test more thing on my way to become a programmer. I don't know why, (well I wouldn't be here if I knew why), but a switch for light/dark mode, I am using Android studio for my basic app using a map doesn't react to the style I put on it. I tried with compat, I tried with material - it makes little difference (the compat is whole white and material is in standard theme color. And btw. I still haven't made the mechanics connected to switch in java so I'm testing it on light theme right now.

In short - my switch doesn't turn grey even though I gave it a style.

My theme file

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Spyo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/blue_light</item>
        <item name="colorPrimaryVariant">@color/blue_med</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
    <style name="Switch_style" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlActivated">@color/grey_light
        </item>
        <!-- inactive thumb color -->
        <item name="colorSwitchThumbNormal">@color/grey_dark
        </item>
    </style>
</resources>

    

My activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="100dp"
    android:layout_marginBottom="50dp"
    map:layout_constraintBottom_toBottomOf="parent"
    map:layout_constraintEnd_toEndOf="parent"
    map:layout_constraintStart_toStartOf="parent"
    map:layout_constraintTop_toBottomOf="@+id/ldm_switch"
    tools:context=".MapsActivity" />

<com.google.android.material.switchmaterial.SwitchMaterial
    android:id="@+id/ldm_switch"
    style="@style/Switch_style"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:layout_marginEnd="5dp"
    android:text="@string/light_mode_dark_mode"
    map:layout_constraintEnd_toEndOf="parent"
    map:layout_constraintTop_toTopOf="parent"
    />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

When you use a SwitchMaterial component you can use the app:thumbTint attribute to change the Thumb colour and the app:trackTint attribute to change the Track colour.

Below is a sample of the above attributes in xml:

<com.google.android.material.switchmaterial.SwitchMaterial
        android:id="@+id/switchMaterial"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch"
        android:checked="false"
        app:thumbTint="@color/switch_thumb_selector_color"
        app:trackTint="@color/switch_track_selector_color"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

where @color/switch_thumb_selector_color is the Thumb colour state selector in res/color folder and will be like below:

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

and @color/switch_track_selector_color is the Track colour state selector in res/color folder and will be like below:

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

And the Result when the Switch checked state is false is like:

And the Result when the Switch checked state is true is like: