how to make custom SwitchCompat

Question

i want to customise Switch but i failed to change border color of Switch

i have tried to change Switch thumb,track attributes but just 10% away to achieve the requirement

there are two drawable XMl i have made 1.switch_thumb_custom 2.switch_track_custom as name defines you can find more detail to codes

1.switch_thumb_custom

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/mix_color" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/mix_color" />
        </shape>
    </item>
    <item android:width="40dp"
        android:height="40dp">>
        <bitmap android:src="@drawable/on_dot"
            android:tint="@color/mix_color" />
    </item>
</layer-list>

2.switch_track_custom

[<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:end="-40dp"
        android:gravity="center_vertical|fill_horizontal"
        android:start="-40dp">
        <shape
            android:shape="rectangle"
            android:tint="@color/switch_color">
            <corners android:radius="50dp" />
            <solid android:color="@color/mix_color" />
            <size android:height="30dp" />
        </shape>
    </item>

</layer-list>][1]

output i got from above implementation

Output i want is below

out put i want

Answer 1

custom_track.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="3dp"
        android:color="@android:color/holo_red_dark"/>
    <solid
        android:color="@android:color/white"/>
    <corners
        android:radius="20dp"/>
</shape>

custom_thumb.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/holo_red_dark" />
            <size android:width="40dp" android:height="40dp" />
        </shape>
    </item>
</layer-list>

Use it as below:

<!--<android.support.v7.widget.SwitchCompat if not using androidx-->
<androidx.appcompat.widget.SwitchCompat 
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:track="@drawable/custom_track"
        android:thumb="@drawable/custom_thumb"
        android:checked="true"/>