CustomView — Circular ring which rotates based on given percentage — part 1(5 parts)

Hi, Welcome to part 1, Again after sometime in one of my project there was need to implement a circular view that increases its size based on the given percentage something like this discussed in SO. After a lot of research I made a widget (custom view) what I exactly needed. Here am going to discuss that in short and simple way.

1) extend a View class

public class CustomCircularRingView extends View

2) inside onDraw(), draw a gray circle as below

// Thin circle
canvas.drawCircle(width / 2, height / 2, radius, mPaint);

3) set four sides of created rect as below

// Thin circle
box.set(getWidth() / 2 — radius, getHeight() / 2 — radius, getWidth() / 2 + radius, getHeight() / 2 + radius);

4) set sweep angle and draw an arc as given below

float sweep = 360 * percent * 0.01f;
canvas.drawArc(box, 90, sweep, false, mPaint);

So simple, only trick is changing the “percent” variable at regular intervals.

5) method which changes the “percent” periodically is

public void changePercentage(int value) {
    actualPercent = value;
}

I made periodic calls to this method from MainActivity by putting it inside a runnable as like below,

Runnable runnable = new Runnable() {
    
    @Override
    public void run() {
        if (percent <= 80) {
            ((TextView) findViewById(R.id.percentText)).setText(String.valueOf(percent));
            myView.changePercentage(percent++);
            myView.invalidate();
            handler.postDelayed(this, 10);
        }
    }
};

You can get source code of this project at gitHub.
Screen shot

Stay tune for part 2 very soon.

Enjoy! Happy coding..!