Possible to do rounded corners in custom Progressbar progressDrawable?

b-ryce picture b-ryce · Apr 14, 2011 · Viewed 8.3k times · Source

I have a progress bar that is supposed to look like the attached image:enter image description here

And I've made it a long way. I'm very close the only part that isn't working is the rounded corners for the progressDrawable. Here is what mine looks like. (Notice, circled in red, that the fill inside the white outline does not have rounded corners):enter image description here

So, I've found a couple of ways to make this work when the progress bar is colored in with a shape, gradient, or color. BUT, I can't get it with an image as the 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->enter image description here
slider_track_progress->enter image description here

Here is where I embed my progressbar 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"
/>

Anyone know how to make this work?

Answer

While-E picture While-E · Apr 14, 2011

Not sure if you can actually round out the edges through API, but you could very easily add a new layer between your white outline, and your actual progress object? The layer could be an exact cutout of the white outline, and thus the progress bar would not show outside the outline.