Android draw circle with 2 colors (Pie chart)

Question

This is my first question here at stackoverflow.com so excuse myself if i'm doing stuff wrong.

I want to create a circle which basically is like a progress bar. Now I'd like to set the percentage through some code.

What I want to achieve is: https://raw.github.com/psud/Melde-App/master/res/drawable-hdpi/circlemiddle.png

My problems:

1. Can't get a circle with two colors to work (have been searching forums for hours and have found solutions to problems similar to mine but I just can't implement those solutions that into my app. I've read a lot about canvas.drawArc(...) but can't seem to find out how to use it).
2. How is it possible to put a canvas into a layout? (I've got a xml layout and the canvas should be drawn inside a particular layout without changing the rest of the layout).

Thanks.

Answer 1

This is only a hint. It is simply a view that draw two arcs in the same rect: First arc spans from angle 0 to 360. The second one (above the first) spans from 0 to an angle that depends on the percentage.

public class PercentView extends View {

    public PercentView (Context context) {
        super(context);
        init();
    }
    public PercentView (Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public PercentView (Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    private void init() {
        paint = new Paint();
        paint.setColor(getContext().getResources().getColor(R.color.lightblue));
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        bgpaint = new Paint();
        bgpaint.setColor(getContext().getResources().getColor(R.color.darkblue));
        bgpaint.setAntiAlias(true);
        bgpaint.setStyle(Paint.Style.FILL);
        rect = new RectF();
    }
    Paint paint;
    Paint bgpaint;
    RectF rect;
    float percentage = 0;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //draw background circle anyway
        int left = 0;
        int width = getWidth();
        int top = 0;
        rect.set(left, top, left+width, top + width); 
        canvas.drawArc(rect, -90, 360, true, bgpaint);
        if(percentage!=0) {
            canvas.drawArc(rect, -90, (360*percentage), true, paint);
        }
    }
    public void setPercentage(float percentage) {
        this.percentage = percentage / 100;
        invalidate();
    }
}

Add to your layout:

<bla.bla.PercentView
            android:id="@+id/percentview"
            android:layout_width="100dp"
            android:layout_height="100dp" />

Answer 2

You can implement a pie chart quite easily with this library (achartengine - https://code.google.com/p/achartengine/) instead of rolling your own solution.