I made a little loading circle with Canvas and Paint. This is my first attempt to use these classes so it could be something I used wrong.
My problem is, that the resolution of painting are too low. I can clearly see the pixels.
How could I improve on this?
By the way this is my class:
public class LoadingCircle extends LinearLayout {
public LoadingCircle(Context context, AttributeSet attrs) {
super(context, attrs);
setWillNotDraw(false);
}
// time
int countDownTime = 180;
Paint paint = new Paint();
RectF oval = new RectF();
Path path = new Path();
// value
int value = 360 / countDownTime;
// starting progress
int progress = -360 - value;
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
float width = (float) getWidth();
float height = (float) getHeight();
float center_x = width / 2, center_y = height / 2;
float loadingRadius = (float) ((width / 2)*0.85);
float whiteRadius = (float) (loadingRadius * 1.06);
float greenRadius = (float) (loadingRadius * 1.14);
// **background green circle**/
oval.set(center_x - greenRadius, center_y - greenRadius, center_x + greenRadius, center_y + greenRadius);
paint.setColor(Color.parseColor("#a3d47b"));
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawArc(oval, 270, 360, true, paint);
// ****//
// **background green circle**/
oval.set(center_x - whiteRadius, center_y - whiteRadius, center_x + whiteRadius, center_y + whiteRadius);
paint.setColor(Color.parseColor("#ffffff"));
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawArc(oval, 270, 360, true, paint);
// **Loading circle**//
path.addCircle(center_x, center_y, loadingRadius, Path.Direction.CW);
paint.setColor(Color.parseColor("#71b23c"));
paint.setStyle(Paint.Style.FILL_AND_STROKE);
oval.set(center_x - loadingRadius, center_y - loadingRadius, center_x + loadingRadius, center_y + loadingRadius);
progress = progress + value;
Log.i("proges: ", progress + "");
canvas.drawArc(oval, 270, progress, true, paint);
// /**//
}
public void setCountDownTime(int time) {
this.countDownTime = time;
this.value = 360 / countDownTime;
this.progress = -360 - value;
}
// reseting loading circle
public void reset() {
this.progress = -360 - value;
this.invalidate();
}
}
Declare paint like this:
final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
This will enable the antialiasing and you'll get rid of that ugly pixellation.
Or, you can do it in your function:
paint.setAntiAlias(true);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With