How To Make Circle Custom Progress Bar in Android

Solution 1:

The best two libraries I found on the net are on github:

• https://github.com/Todd-Davies/ProgressWheel
• https://github.com/f2prateek/progressbutton?source=c

Hope that will help you

Solution 2:

I've encountered same problem and not found any appropriate solution for my case, so I decided to go another way. I've created custom drawable class. Within this class I've created 2 Paints for progress line and background line (with some bigger stroke). First of all set startAngle and sweepAngle in constructor:

    mSweepAngle = 0;
    mStartAngle = 270;

Here is onDraw method of this class:

@Override
public void draw(Canvas canvas) {
    // draw background line
    canvas.drawArc(mRectF, 0, 360, false, mPaintBackground);
    // draw progress line
    canvas.drawArc(mRectF, mStartAngle, mSweepAngle, false, mPaintProgress);
}

So now all you need to do is set this drawable as a backgorund of the view, in background thread change sweepAngle:

mSweepAngle += 360 / totalTimerTime // this is mStep

and directly call InvalidateSelf() with some interval (e.g every 1 second or more often if you want smooth progress changes) on the view that have this drawable as a background. Thats it!

P.S. I know, I know...of course you want some more code. So here it is all flow:

1. Create XML view :

    <View
    android:id="@+id/timer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
   

2. Create and configure Custom Drawable class (as I described above). Don't forget to setup Paints for lines. Here paint for progress line:

   mPaintProgress = new Paint();
   mPaintProgress.setAntiAlias(true);
   mPaintProgress.setStyle(Paint.Style.STROKE);
   mPaintProgress.setStrokeWidth(widthProgress);
   mPaintProgress.setStrokeCap(Paint.Cap.ROUND);
   mPaintProgress.setColor(colorThatYouWant);
   

Same for backgroung paint (set width little more if you want)

3. In drawable class create method for updating (Step calculation described above)

   public void update() {
       mSweepAngle += mStep;
       invalidateSelf();
   }
   

4. Set this drawable class to YourTimerView (I did it in runtime) - view with @+id/timer from xml above:

   OurSuperDrawableClass superDrawable = new OurSuperDrawableClass(); YourTimerView.setBackgroundDrawable(superDrawable);

5. Create background thread with runnable and update view:

   YourTimerView.post(new Runnable() {
       @Override
       public void run() {
           // update progress view
           superDrawable.update();
       }
   });
   

Thats it ! Enjoy your cool progress bar. Here screenshot of result if you're too bored of this amount of text.