Android seekbar thumb drawable not displayed correctly

Question

I created a custom seekbar thumb, it looks very good on android studio previews, but when running the app on my device, it looks wrong !

what it should look like

what it actually look like on my device

my seekbar_thumb.xml code

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="35dp" android:width="35dp" >
    <shape android:shape="oval">
        <solid android:color="#fff" />
    </shape>
</item>
<item android:gravity="center" android:height="15dp" android:width="15dp">
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimary" />
    </shape>
</item>

my seekbar code

        <SeekBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:max="100"
        android:progress="50"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:thumb="@drawable/seekbar_thumb"
        android:progressDrawable="@drawable/progress_bar_background"
        android:layout_marginBottom="@dimen/seekbar_margin_bottom"
        android:layout_marginRight="@dimen/seekbar_margin_rt"
        android:layout_marginLeft="@dimen/seekbar_margin_lt"
        android:thumbOffset="0dp"/>

Answer 1

Try this seekbar_thumb.xml in drawable folder

    <?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="#00f"/>
    <size
    android:width="15dp"
    android:height="15dp"/>
    </shape>
    </item>
    <item>
    <shape android:shape="oval">
    <stroke android:color="@android:color/transparent"
    android:width="5dp"/>
    <solid android:color="#f00"/>
    <size
    android:width="10dp"
    android:height="10dp"/>
    </shape>
    </item>
    </layer-list>

And activity_main.xml

    <RelativeLayout     
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_margin="40dp">

    <SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/seekBar"
    android:max="100"
    android:progress="50"
    android:thumb="@drawable/seekbar_thumb" />

    </RelativeLayout>