Android Custom SeekBar - Progress Is Not Following The Thumb

Answer :

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.