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
Screenshot_2014-09-15-18-18-56

 

Stay tune for part 2 very soon.

Enjoy! Happy coding..!

Advertisements

One thought on “CustomView – Circular ring which rotates based on given percentage – part 1(5 parts)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s