Display curve shape progress in custom View

Question

I am working with custom view which is in a circle shape. Almost i have done it with creating a custom class and implemented that. But my problem is too show a different progress in a curve shape with different color and which is depends on dynamic data. Here is the image which i have implemented

I want like this http://imgur.com/cmNKWBF.

So my question is how to draw arc (curve shape) progress with different color and with dynamic data.

Help would be appreciated !!

Answer 1

Finally i have resolved this after making some changes in Custom CircleView class. For that i have counted a sweepAngle and startAngle for each region. Here is some part of code i am posting.

I had to show three different regions so i have taken three different Paints and declared variable for each regions. Like,

private float   absStart;
private float   absSweep;
private float   preStart;
private float   preSweep;
private float   vacStart;
private float   vacSweep;

private Paint   absPaint;
private Paint   prePaint;
private Paint   vacPaint;

Now init your all three regions paints. Here i just posting one of them

absPaint = new Paint();
absPaint.setStrokeCap(Paint.Cap.ROUND);
absPaint.setStyle(Paint.Style.STROKE);
absPaint.setStrokeJoin(Paint.Join.ROUND);
absPaint.setColor(Color.parseColor("#eb537a"));
absPaint.setStrokeWidth((float) 22.5);

Now to calculate the area of each region i had created a method named updateAngles() which have three float parameters

public void updateAngles(float absPercent, float prePercent, float vacPercent) {
    float total = absPercent + prePercent + vacPercent;
    absStart = 0;
    absSweep = (absPercent / total) * 360;
    preStart = absSweep;
    preSweep = (prePercent / total) * 360;
    vacStart = absSweep + preSweep;
    vacSweep = (vacPercent / total) * 360;

    Log.e("Angles are:", absStart + ":" + absSweep + ":" + preStart + ":" + preSweep + ":" + vacStart + ":" + vacSweep);
    invalidate();
}

This method will be called in your desired activity after initialize CircleView and call like cv.updateAngles(20,20,60); where cv is object of CircleView.

Now in onDraw() method you need to draw arc for each region.

 mInnerRectF.set(45, 45, 330, 330);
 canvas.drawArc(mInnerRectF, absStart, absSweep, false, absPaint);
 canvas.drawArc(mInnerRectF, preStart, preSweep, false, prePaint);
 canvas.drawArc(mInnerRectF, vacStart, vacSweep, false, vacPaint);

So this finally giving me a my desired output.

But if there is depend on different devices like mobile screen , 7 inch and 10 inch tablets then you should use DisplayMetrics for it.

Answer 2

Below code satisfies your requirement.

public class ProgressWidget extends View {

    private int percent = 25;
    private int radiusOuter = 110, radiusInner = 90;
    private Paint mPaintOuter;
    private Paint mPaintPercent;
    private Paint mInnerCircle, mTextPaint;
    private int mCenterX, mCenterY;
    private int textSize;
    private String mTimedText = percent+"%";
    private int desiredWidth = 300;
    private int desiredHeight = 300;
    private boolean isRunning;
    private boolean isMeasured;

    public ProgressWidget(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initialization();
    }

    public ProgressWidget(Context context, AttributeSet attrs) {
        super(context, attrs);
        initialization();
    }

    public ProgressWidget(Context context) {
        super(context);
        initialization();
    }

    private void initialization() {

        mPaintOuter = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintOuter.setColor(Color.DKGRAY);

        mPaintPercent = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintPercent.setColor(Color.CYAN);

        mInnerCircle = new Paint(Paint.ANTI_ALIAS_FLAG);
        mInnerCircle.setColor(Color.BLACK);

        mTextPaint = new Paint();
        mTextPaint.setColor(Color.CYAN);
        mTextPaint.setTextSize(textSize);
    }

    public void getUpdateRadius() {
        if (!isMeasured) {
            isMeasured = true;
            int size = getWidgetWidth() < getWidgetHeight() ? getWidgetWidth() : getWidgetHeight();

            radiusOuter = (int) (size * 0.35f);
            radiusInner = (int) (size * 0.3f);

            textSize = (int) (size * 0.08f);
            setTimedTextSize(textSize);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mCenterX = getWidth() / 2;
        mCenterY = getHeight() / 2;

        drawSecCircle(canvas);
        drawInnerCircle(canvas);
        drawPercentageText(canvas);
    }

    private void drawInnerCircle(Canvas canvas) {
        canvas.drawCircle(mCenterX, mCenterY, radiusInner, mInnerCircle);
    }

    private void drawSecCircle(Canvas canvas) {

        canvas.drawCircle(mCenterX, mCenterY, radiusOuter, mPaintOuter);
        canvas.drawArc(new RectF(mCenterX - radiusOuter, mCenterY - radiusOuter, mCenterX + radiusOuter, mCenterY + radiusOuter), -90, percent*3.6f, true, mPaintPercent);
    }

    public void drawPercentageText(Canvas canvas) {
        RectF areaRect = new RectF(mCenterX - radiusInner, mCenterY - radiusInner, mCenterX + radiusInner, mCenterY + radiusInner);
        RectF bounds = new RectF(areaRect);

        // measure text width
        bounds.right = mTextPaint.measureText(mTimedText, 0, mTimedText.length());
        // measure text height
        bounds.bottom = mTextPaint.descent() - mTextPaint.ascent();

        bounds.left += (areaRect.width() - bounds.right) / 2.0f;
        bounds.top += (areaRect.height() - bounds.bottom) / 2.0f;

        canvas.drawText(mTimedText, bounds.left, bounds.top - mTextPaint.ascent(), mTextPaint);
    }

    public void setTimedTextSize(int textSize) {
        this.textSize = textSize;
        mTextPaint.setTextSize(textSize);
    }

    public void setTimedText(String timedText) {
        this.mTimedText = timedText;
        invalidate();
    }

    public void setPercentage(int percent) {
        this.percent = percent;

        mTimedText = String.valueOf(percent)+"%";
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        setWidgetWidth((int) (widthSize * 0.6));
        setWidgetHeight((int) (heightSize * 0.6));

        int width;
        int height;

        //Measure Width
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            width = Math.min(getWidgetWidth(), widthSize);
        } else {
            width = getWidgetWidth();
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            height = Math.min(getWidgetHeight(), heightSize);
        } else {
            height = getWidgetHeight();
        }

        setWidgetWidth(width);
        setWidgetHeight(height);

        getUpdateRadius();

        setMeasuredDimension(width, height);
    }


    public int getWidgetWidth() {
        return desiredWidth;
    }

    public void setWidgetWidth(int clockWidgetWidth) {

        this.desiredWidth = clockWidgetWidth;
    }

    public int getWidgetHeight() {
        return desiredHeight;
    }

    public void setWidgetHeight(int clockWidgetHeight) {
        this.desiredHeight = clockWidgetHeight;
    }
}