Is it possible to make rounded corners in a custom Progressbar progressDrawable?

Question

I have a progress bar that should look like an attached image:

And I have come a long way. I'm very close, the only part that doesn't work is the rounded corners for progressDrawable. Here's what mine looks like. (Note, it is circled in red that the fill inside the white outline has no rounded corners):

So, I found several ways to make this work when the progress bar is painted in shape, gradient or color. BUT, I cannot get this with the image as progressDrawable.

Here is my class that extends ProgressBar

public class RoundedProgressBar extends ProgressBar{ private Paint paint; public RoundedProgressBar(Context context) { super(context); setup(); } public RoundedProgressBar(Context context, AttributeSet attrs) { super(context, attrs); setup(); } public RoundedProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); setup(); ; } protected void setup() { paint = new Paint(); } @Override protected synchronized void onDraw(Canvas canvas) { // First draw the regular progress bar, then custom draw our text super.onDraw(canvas); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.STROKE); RectF r = new RectF(0,0,getWidth()-1,getHeight()-1); canvas.drawRoundRect(r,getHeight()/2,getHeight()/2, paint); } } 

Here is my selector:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@android:id/background" android:drawable="@drawable/slider_track" /> <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/slider_track" /> <item android:id="@android:id/progress" android:drawable="@drawable/slider_track_progress" /> </layer-list> 

Here are the images used in the selector:

slider_track →
slider_track_progress →

This is where I embed my progress in the layout for my activity.

 <com.android.component.RoundedProgressBar android:id="@+id/player_hp_bar" android:layout_width="fill_parent" android:layout_height="36dip" android:layout_marginLeft="30dip" android:layout_marginRight="30dip" android:max="100" style="?android:attr/progressBarStyleHorizontal" android:progressDrawable="@drawable/slider_layer_list" android:progress="20" android:maxHeight="12dip" android:minHeight="12dip" /> 

Does anyone know how to make this work?

Answer 1

Not sure if you can really round the edges through the API, but can you easily add a new layer between your white path and your real progress object? This layer can be an exact cut out of the white outline, and therefore, the progress bar will not be displayed outside the outline.

Answer 2

Try this, you can do what you want by changing the color, width and height of the thumb and the search bar in xml.

you can see the image here

This unity was the only way I could do this. We hope for this help.

this is my search:

  <SeekBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="12dp" android:max="100" android:progress="0" android:background="@null" android:shape="oval" android:splitTrack="false" android:progressDrawable="@drawable/progress_background" android:secondaryProgress="0" android:thumbOffset="10dp" android:thumb="@drawable/oval_seekbar_thumb" /> 

this is (progress_background.xml):

 <item android:id="@android:id/background"> <shape android:shape="rectangle"> <corners android:radius="5dp" /> <gradient android:angle="270" android:endColor="@color/grey_line" android:startColor="@color/grey_line" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape android:shape="oval"> <corners android:radius="5dp" /> <gradient android:angle="270" android:endColor="@color/blue" android:startColor="@color/blue" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape android:shape="rectangle"> <corners android:radius="90dp" /> <gradient android:angle="90" android:endColor="@color/colorPrimaryDark" android:startColor="@color/colorPrimary" /> </shape> </clip> </item> 

and this is the thumb (oval_seekbar_thumb.xml):

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval"> <solid android:color="#ffffff" /> <stroke android:color="@color/colorPrimaryDark" android:width="3dp"/> <size android:height="12dp" android:width="12dp"/> </shape> </item> </selector> 

The height of the thumb must be the same as the height of the arrow to look right.