How to create a custom circular seekbar with custom thumb?

Im trying to create a custom circular seekbar like this one:

I have the shape and the thumb xml done but the thumb isn't appearing when i put it in the layout xml.

Seekbar background xml (lap_counter.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle"
            android:thicknessRatio="16"
            android:useLevel="false">
            <corners android:radius="500dp" />
            <stroke
                android:width="45dp"
                android:color="@color/blue_secondary" />
        </shape>
    </item>
</layer-list>

Custom thumb xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/white">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
            <stroke android:color="@color/orange" android:width="3dp"/>
            <size android:width="30dp" android:height="30dp"/>
        </shape>
    </item>
</layer-list>

But when apply the custom xml this are the results:

<androidx.appcompat.widget.AppCompatSeekBar
                            android:id="@+id/sb_lap_counter"
                            android:layout_width="700dp"
                            android:layout_height="300dp"
                            android:layout_centerInParent="true"
                            android:progress="50"
                            android:background="@drawable/lap_counter"
                            android:thumb="@drawable/lap_counter_thumb"
                            tools:progress="50" />

I tried putting it in as a custom style in themes.xml but it doesn't work either. What am i doing wrong?

from How to create a custom circular seekbar with custom thumb?