customize a toggle switch for Android

Question

I tried to customized a toggle switch and after hours on playing with material, I just gave up and re-used the SwitchCompat

<androidx.appcompat.widget.SwitchCompat
            android:id="@+id/settingsSwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/cell_padding"
            android:checked="@{item.enabled}"
            tools:checked="true"
            android:thumb="@drawable/ios_thumb"
            app:trackTintMode="multiply"
            app:trackTint="@null"
            app:track="@drawable/ios_track"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

and the ios_thumb look like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="#FFFFFF"/>
            <corners android:radius="15dp" />
            <size android:width="30dp" android:height="30dp" />
            <stroke android:width="4dp" android:color="#0000ffff" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="#FFFFFF"/>
            <corners android:radius="15dp" />
            <size android:width="30dp" android:height="30dp" />
            <stroke android:width="4dp" android:color="#0000ffff" />
        </shape>
    </item>
</selector>

and ios_track as below:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="@color/green300"/>
            <corners android:radius="25dp" />
            <size android:width="60dp" android:height="30dp" />

        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <solid android:color="@color/lightness200"/>
            <corners android:radius="25dp" />
            <size android:width="60dp" android:height="30dp" />
        </shape>
    </item>
</selector>

the mechanism works and I almost there for the customization... Only thing is that :

• When the switch is to false for check or true, it's not exactly reflecting the color.

As an example:

The white is grey-ish. I think the false is also bad but as my background for false state is a transparent white it's not affecting the visual. It's look like the track is displayed over the thumb instead of the opposite. Any idea?