How to create circular progress bar(pie chart) like indicator - Android

Question

Now I have a horizontal progress bar which is updated programmatically via ProgressBar setProgress method:

<ProgressBar
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="20dip"
            android:id="@+id/progressbar"
            >
    </ProgressBar>

Is there a way to convert this progress bar to a circle (pie chart) and to be able also to update the progress programmatically?

Example of what I want:

Answer 1

You can either make a custom view (e.g. PieProgressView) or a custom Drawable (e.g. PieProgressDrawable). I took the custom view approach but either is perfectly viable.

A quick look at the source for Android's ProgressView yields a wildly complex implementation. Obviously, they are covering all their bases, but you don't have to write something that complex. We really only need two things:

1. A member to keep track of the current progress.
2. A method to draw the pie based on the current progress.

Number one is easy, just keep a member field that tracks the current percentage of the pie to draw. Number 2 is a bit more complicated but, luckily, we can do it with the standard Canvas draw methods.

Conveniently, Android's Canvas class provides a drawArc() method. You can use this to get your Pie effect. Assuming we stored our percentage in a member field called mPercent as a float between 0 and 1, an onDraw() method might look like this:

@Override
protected void onDraw(Canvas canvas) {

    final float startAngle = 0f;
    final float drawTo = startAngle + (mPercent * 360);

    // Rotate the canvas around the center of the pie by 90 degrees
    // counter clockwise so the pie stars at 12 o'clock.
    canvas.rotate(-90f, mArea.centerX(), mArea.centerY());
    canvas.drawArc(mArea, startAngle, drawTo, true, mPaint);

    // Draw inner oval and text on top of the pie (or add any other
    // decorations such as a stroke) here..
    // Don't forget to rotate the canvas back if you plan to add text!
    ...
}

Here's what the completed view looks like in a sample app:

Edit

Since posting, I've decided there's really no reason you need to implement a custom view. You can simply use a drawable and it's level property to do exactly what is needed. I made a gist with the full drawable.

Answer 2

Save yourself some time and before re-inventing the wheel (or the progress indicator), check if the one at http://github.com/Sage42/AndroidViewUtils works for you. Just add it to your project and have fun. It is customizable and offers options for Counting Up or Counting Down as well.

I forgot to add that the visuals looks almost exactly like the sample image from your question.

Answer 3

Try this piece of code to create circular progress bar(pie chart). pass it integer value to draw how many percent of filling area. :)

private void circularImageBar(ImageView iv2, int i) {

    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint();

        paint.setColor(Color.parseColor("#c4c4c4"));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(150, 150, 140, paint);
        paint.setColor(Color.parseColor("#FFDB4C"));
        paint.setStrokeWidth(10);   
        paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(10,10,290,290);
        canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
        paint.setStrokeWidth(0);    
        paint.setTextAlign(Align.CENTER);
        paint.setColor(Color.parseColor("#8E8E93")); 
        paint.setTextSize(140);
        canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 
        iv2.setImageBitmap(b);
}

Answer 4

For a circular progress bar, use:

style="?android:attr/progressBarStyle"

More details can be found here: What's the meaning of android:progressBarStyle attribute in ProgressBar?

As for setting its progress: the circular progress bar will keep spinning. Simply hide it after it's no longer needed.

Or you could implement something custom: show a TextView next to it and update it instead of using Progressbar.setProgress.

Step 0: setText("0%");
Step 1 (2 seconds later): setText("3%");
Step 2 (4 seconds later): setText("9%"); etc.

Answer 5

Even though it's an old question, I hope this answer can help future viewers.

Check out this library - https://github.com/lzyzsd/CircleProgress

For a simple circular progress, dynamic or static, this lib is pretty straightforward and has many attributes for easy customizability (like stroke width, start angle, inside background, text color, etc). For the UI which the OP wanted to achieve, this library would be perfect.