Canvas draw circles horizontally in android view

Question

I'm trying to draw 4 circles horizontally in a view. But the problem is I see only 3 half circles. Circles are not being drawn properly. What is wrong with below code?

CircleView.java

public class CircleView extends View
{
    private int radius;
    private Paint blackPaint = new Paint();

    float eachDotWidth;
    float x = 0;
    float circleRadius;

    float width, height;

    public CircleView(Context context)
    {
        this(context, null);
    }

    public CircleView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        blackPaint.setStyle(Paint.Style.STROKE);
        blackPaint.setColor(Color.BLACK);
        blackPaint.setStrokeWidth(5f);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
        super.onSizeChanged(w, h, oldw, oldh);
        calculateDimensions();
    }

    private void calculateDimensions()
    {

        width = getWidth() ;
        height = getHeight();

        invalidate();
    }

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

        width = getWidth();
        height = getHeight();

        eachDotWidth = getWidth()/5;
        circleRadius = getHeight()/2;

        canvas.drawColor(Color.WHITE);
        for(int i=0; i < 4; i++) {
            x=(i*eachDotWidth)-circleRadius;
            canvas.drawCircle(x, 2*circleRadius, circleRadius/2, blackPaint);
        }
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

FrameLayout circleLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    circleLayout = (FrameLayout) findViewById(R.id.circle_layout);

    CircleView circleView = new CircleView(this);

    circleLayout.addView(circleView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
}

}

Please help me find and resolve the issue. Thanks.

Answer 1

You can create vertically circles:

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

    width = getWidth();
    height = getHeight();

    eachDotWidth = getWidth()/8;
    circleRadius = getHeight()/2;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        x=(2*i*eachDotWidth)+eachDotWidth;
        canvas.drawCircle(x, eachDotWidth, eachDotWidth, blackPaint);
    }
}

Also you can create horizontally circles:

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

    width = getWidth();
    height = getHeight();

    eachDotWidth = getWidth()/8;
    circleRadius = getHeight()/8;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        x=(2*i*circleRadius)+circleRadius;
        canvas.drawCircle(circleRadius, x, circleRadius, blackPaint);
    }
}

And also you can create diagonal circles (create y variable):

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

    width = getWidth();
    height = getHeight();

    eachDotWidth = getWidth()/8;
    circleRadius = getHeight()/8;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        y=(2*i*circleRadius)+circleRadius;
        x=(2*i*eachDotWidth)+eachDotWidth;

        canvas.drawCircle(x, y, circleRadius, blackPaint);
    }
}

Answer 2

I think you need to revise the code drawing the circles. I don't know why you, for example, have separate values for a circle's radius and a "dot's width". I suggest that you count only with an each circle's (~ dot's) radius and add some spacing in between them to compound the width to suit your needs.

Try something like this (it draws four equal circles at zero coordinates across the canvas' width, but it doesn't account for the stroke's thickness):

    // we want four equal circles across the whole width, so each circle's radius will be equal to 'width/(2*4)'
    circleRadius = width/8;
    // zero spacing for this example, but it can be defined
    int spacingPx = 0;

    canvas.drawColor(Color.WHITE);
    for(int i=0; i < 4; i++) {
        // the x-coordinate of each circle's middle will be a circle's radius offset by the width of the circles previously drawn plus a single spacing width multiplied by the number of the circles already drawn 
        x=(i*2*circleRadius) + circleRadius + i*spacingPx;
        // we just simply pass the values – calculated x coordinate, y coordinate (here we want to have the circle's top at 0, so we need to set its middle y-coordinate to the value of its radius), the circle's radius and the Paint object that you already defined
        canvas.drawCircle(x, circleRadius, circleRadius, blackPaint);
    }

Here's how it looks like

If you want to customize it more to your needs, please specify how exactly would you like the circles to be drawn.

Answer 3

如果要绘制形状，可以使用Path和RectF更为灵活，可以看一下本教程： http ://raphaelfavero.github.io/Creating_Animated_Custom_View/