Android custom SeekBar - progress is not following the thumb

I solved the problem this way:

First, the thumb never disappears. It appears when the progress is 0 or 100. When we use offset, thumb pops outside.

bg_seekbar_first.xml

We will use this when progress < max / 2

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle">
            <corners android:radius="24dp"/>
            <size android:height="48dp" />
            <stroke android:width="1dp" android:color="@color/colorAccent"/>
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle"
                android:tint="@color/colorAccent">
                <corners android:radius="0dp"/>
                <size android:height="48dp" />
                <solid android:color="@color/colorAccent" />
            </shape>
        </scale>
    </item>
</layer-list>

bg_seekbar_second.xml

We will use this when progress > max / 2

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle">
            <corners android:radius="24dp"/>
            <size android:height="48dp" />
            <stroke android:width="1dp" android:color="@color/colorAccent"/>
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle"
                android:tint="@color/colorAccent">
                <corners android:radius="24dp"/>
                <size android:height="48dp" />
                <solid android:color="@color/colorAccent" />
            </shape>
        </scale>
    </item>
</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent"/>
            <corners android:topRightRadius="24dp"
                 android:bottomRightRadius="24dp"/>

            <padding android:bottom="8dp" android:top="8dp" android:left="16dp" android:right="16dp" />
        </shape>
    </item>


    <item android:drawable="@android:drawable/ic_menu_close_clear_cancel" android:gravity="center" android:height="32dp" android:width="44dp"/>
</layer-list>

I changed radius of thumb

<com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:cardCornerRadius="24dp"
        android:layout_marginTop="64dp"
        >
        <SeekBar
            android:id="@+id/scan_seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:max="100"
            android:paddingStart="0dp"
            android:paddingEnd="0dp"
            android:progress="1"
            android:progressDrawable="@drawable/bg_seekbar_first"
            android:splitTrack="false"
            android:thumb="@drawable/seekbar_thumb"
            android:thumbOffset="0dp"
            />
    </com.google.android.material.card.MaterialCardView>

I added a cardView to solve this problem:

scan_seekbar.setOnSeekBarChangeListener(object  : SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                if(progress < seekBar?.max!! / 2){
                    seekBar.progressDrawable = ContextCompat.getDrawable(context!!,R.drawable.bg_seekbar_first)
                }else{
                    seekBar.progressDrawable = ContextCompat.getDrawable(context!!,R.drawable.bg_seekbar_second)
                }
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
            }

        })

Then I used this code(Kotlin) onProgressChanged to solve this problem :

And result:

I hope it works for you.

Your implementation relies on a ClipDrawable to draw the progress bar. The progress drawable spans the entire length of the progress bar but is shortened, or clipped, by the ClipDrawable. This leaves the rounded corners on the left of the progress bar but squares off the right side. You are seeing the squared-off side as the progress bar grows, catches up to and overtakes the thumb.

There are probably several ways to solve this, but let's go for something that is XML-based. Let's replace the ClipDrawable with a ScaleDrawable as follows:

bg_seekbar.xml

<layer-list>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <size android:height="48dp" />
            <corners android:radius="25dp" />
            <stroke
                android:width="1dp"
                android:color="@color/semiLightBlue" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="100%"
            android:useIntrinsicSizeAsMinimum="true">
            <shape android:shape="rectangle">
                <corners android:radius="25dp" />
                <size
                    android:width="50dp"
                    android:height="48dp" />
                <stroke
                    android:width="1dp"
                    android:color="@color/colorAccent" />
                <solid android:color="@color/colorAccent" />
            </shape>
        </scale>
    </item>
</layer-list>

The scaleWidth attribute tells us that the drawable will be scaled to 100% when the level is at the maximum. The useIntrinsicSizeAsMinimum attribute which, by the way, does not seem to be documented, specifies that the minimum size of the drawable will be its intrinsic width which is 50dp x 48dp. This is not exactly true since the drawable will have zero width and height when the level is zero but will pop to the intrinsic size when the level is 1 or more.

Here is what happens with the progress bar after this change is made. I have gone with a default thumb to make it clear what is happening:

As you can see, once the thumb starts to move the progress bar leaps to its minimum size and grows from there.

So, let's reintroduce the original thumb. This thumb will overlay the progress bar at the start and hide the jump to the minimum size. We are looking just to cover that area so the white doesn't show through.