How to cut circle from one side

Question

Hi I am trying to create Circle using canvas like following image.

enter image description here

But now I can only able to make like following.

enter image description here

I don't understand how can I make this. I need to cut the circle from one side and need to fill that circle border only.

Here is my code For review.

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

    // Clear canvas
    canvas.drawColor(Color.TRANSPARENT);

    // Draw Ticks and colored arc
    drawTicks(canvas);
}

private void drawTicks(Canvas canvas) {
    float availableAngle = 160;
    float majorStep = (float) (majorTickStep/ maxSpeed *availableAngle);

    float majorTicksLength = 30;

    RectF oval = getOval(canvas, 1);
    float radius = oval.width()*0.35f;

    float currentAngle = 10;
    double curProgress = 0;
    while (currentAngle <= 170) {

        if (labelConverter != null) {

            canvas.save();
            canvas.rotate(180 + currentAngle, oval.centerX(), oval.centerY());
            float txtX = oval.centerX() + radius + majorTicksLength/2 + 8;
            float txtY = oval.centerY();
            canvas.rotate(+90, txtX, txtY);
            //canvas.drawText(labelConverter.getLabelFor(curProgress, maxSpeed), txtX, txtY, txtPaint);
            canvas.restore();
        }

        currentAngle += majorStep;
        curProgress += majorTickStep;
    }

    RectF smallOval = getOval(canvas, 0.7f);
    colorLinePaint.setColor(defaultColor);
    //canvas.drawArc(smallOval, 185, 170, false, colorLinePaint);

    canvas.drawCircle(250, 210, 180, colorLinePaint);

    for (ColoredRange range: ranges) {
        colorLinePaint.setColor(range.getColor());
        //canvas.drawArc(smallOval, (float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), false, colorLinePaint);
        //canvas.drawArc(smallOval, (float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), false, colorLinePaint);
        //canvas.drawCircle((float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), 100, colorLinePaint);
        //canvas.drawCircle((float)(300 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), 180, colorLinePaint);
    }
}

private RectF getOval(Canvas canvas, float factor) {
    RectF oval;
    final int canvasWidth = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
    final int canvasHeight = canvas.getHeight() - getPaddingTop() - getPaddingBottom();

    if (canvasHeight*2 >= canvasWidth) {
        oval = new RectF(0, 0, canvasWidth*factor, canvasWidth*factor);
    } else {
        oval = new RectF(0, 0, canvasHeight*2*factor, canvasHeight*2*factor);
    }

    oval.offset((canvasWidth-oval.width())/2 + getPaddingLeft(), (canvasHeight*2-oval.height())/2 + getPaddingTop());

    return oval;
}

Really got stuck on this. Please give me any hint or reference.

Have you tried addArc http://developer.android.com/reference/android/graphics/Path.html#addArc(android.graphics.RectF, float, float)? Also check this http://stackoverflow.com/questions/22499964/android-semi-circle-progress-bar — Pedro Oliveira, Sep 09 '14 at 14:37
Draw **arcs**, instead of circles: http://developer.android.com/reference/android/graphics/Canvas.html — Phantômaxx, Sep 09 '14 at 14:44

score 0 · Answer 1 · answered Oct 26 '14 at 14:42

i created a View for you.. it may help.. just give a try... its only a basic view...i think it will give an idea..

package abbitfoot.likhil.customeprogressbar;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ProgressBar;

public class CustomeView extends View {

Paint red=new Paint();
Paint white=new Paint();
Paint bg=new Paint();
int radiusBg=200;

public CustomeView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
    init();
}

private void  init(){
    red.setColor(Color.RED);
    white.setColor(Color.WHITE);
    bg.setColor(Color.rgb(0x99, 0x99, 0x99));
}

@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    canvas.save();

    canvas.drawCircle(getWidth()/2, getHeight()/2, radiusBg, bg);

    Rect oval=new Rect(getWidth()/2-radiusBg+10, getHeight()/2-radiusBg+10,getWidth()/2+radiusBg-10,getHeight()/2+radiusBg-10 );
    RectF rectF=new RectF(oval);

    canvas.drawArc(rectF, 140,200,true, red);
    canvas.drawArc(rectF, 340,60,true, white);

    canvas.drawCircle(getWidth()/2, getHeight()/2, radiusBg-25, bg);

    canvas.restore();

}

}

hope this will help you...and sorry this is not a rightmethod i think..

How to cut circle from one side

1 Answers1