How to design Semi Circular Progress bar

Question

Hi I have implemented a circular progress bar and it is working fine, Now the problem is i need to design a semi circular progress bar.

Answer 1

This can be implemented by clipping a canvas containing an image at an angle (By drawing an arc).

And clip that image by drawing an arc.

Here is how you can do it.

//Convert the progress in range of 0 to 100 to angle in range of 0 180. Easy math.
float angle = (progress * 180) / 100;
mClippingPath.reset();
//Define a rectangle containing the image
RectF oval = new RectF(mPivotX, mPivotY, mPivotX + mBitmap.getWidth(), mPivotY + mBitmap.getHeight());
//Move the current position to center of rect
mClippingPath.moveTo(oval.centerX(), oval.centerY());
//Draw an arc from center to given angle
mClippingPath.addArc(oval, 180, angle);
//Draw a line from end of arc to center
mClippingPath.lineTo(oval.centerX(), oval.centerY());

once you get the path, you can use clipPath function to clip the canvas in that path.

canvas.clipPath(mClippingPath);

Take a look at Semi Circle Progress Bar for more easy and usefull details.

---

Note that clipPath function doesn't work if the hardware acceleration is turned on. You can turn off the hardware acceleration only for that view.

//Turn off hardware accleration
  semiCircleProgressBarView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

As and when the progress changes you can set the progressbar by calling function,

semiCircleProgressBarView.setClipping(progress);