How to change the thumb color of the switch in off state

Question

I am using the default switch in a form, I need to change the thumb color of the switch in the off state. Below are the codes and styles which I have used and the thumb color in the On state has changed. How to change the thumb color in the off state?

<Switch
 android:id="@+id/trip_switch"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:theme="@style/SelectionSwitch"
 android:switchMinWidth="56dp"
 android:layout_marginStart="12dp"
 android:checked="true"
 android:textOff="nonrecc"
 android:textOn="recc"/>

 <style name="SelectionSwitch" parent="Theme.AppCompat.Light">
        <item name="colorControlActivated">#124964</item>
        <item name="colorSwitchThumbNormal">#124964</item>
        <item name="android:colorForeground">#124964</item>
    </style>

Answer 1

Note: : Is deprecated: Its for android.support.V7.Widget.AppCompat, meaning it runs on devices back to API 7.

Use SwitchCompat from AppCompat or SwitchMaterial from material library as below:

<androidx.appcompat.widget.SwitchCompat
          android:id="@+id/trip_switch"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:theme="@style/SelectionSwitch"
          android:switchMinWidth="56dp"
          android:layout_marginStart="12dp"
          android:checked="true"
          android:textOff="nonrecc"
          android:textOn="recc"/>

To change the color of the state: Change the color: #124964 for the different states

<style name="SelectionSwitch" parent="Theme.AppCompat.Light">
        <item name="colorControlActivated">#FF0000</item>
        <item name="colorSwitchThumbNormal">#000000</item>
        <item name="android:colorForeground">#124964</item>
</style>

To change color when its in active state: (Example: am changing color to red when its active)

<item name="colorControlActivated">#FF0000</item>

To change color when its in off state: (Example: am changing color to black when its off)

<item name="colorSwitchThumbNormal">#00000</item>