Draw multiple rectangles android canvas

Question

I'm trying to draw 4 rectangles on the canvas so that the canvas is divided in 4 equal rectangles. With the code I now have, only the last rectangle in my code is drawn.

This is the code in my Activity:

 protected void onCreate(Bundle savedInstanceState) {
     ...
setContentView(new MyView(this));
 }

public class MyView extends View {

    public MyView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        setFocusableInTouchMode(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);
        int x = getWidth();
        int y = getHeight();


        Paint paintTopLeft = new Paint();
        paintTopLeft.setStyle(Paint.Style.FILL);
        paintTopLeft.setColor(Color.WHITE);
        canvas.drawPaint(paintTopLeft);
        // Use Color.parseColor to define HTML colors
        paintTopLeft.setColor(Color.parseColor("#F44336"));
        canvas.drawRect(0,0,x / 2,y / 2,paintTopLeft);

        Paint paintTopRight = new Paint();
        paintTopRight.setStyle(Paint.Style.FILL);
        paintTopRight.setColor(Color.WHITE);
        canvas.drawPaint(paintTopRight);
        // Use Color.parseColor to define HTML colors
        paintTopRight.setColor(Color.parseColor("#2196F3"));
        canvas.drawRect(x / 2, 0, x, y / 2, paintTopRight);

    }
}

What am I doing wrong?

Is the background white? Change the color of Paint objects (paintTopRight and paintTopLeft) to other color instead of white, just to see if is actually not drawing. — heloisasim, Jul 01 '15 at 14:26
Did that and it still just shows the last rectangle with the white background. — user3182261, Jul 01 '15 at 14:29

score 4 · Accepted Answer · answered Jul 01 '15 at 14:30

Actually I see only two rectangles that are drawn with your code. But anyway, the problem is that you are calling canvas.drawPaint which clears/fills the complete canvas with that color. So you are erasing all rectangles that have been drawn already just before you draw the last one.

This code should work:

protected void onCreate(Bundle savedInstanceState) {
     ...
setContentView(new MyView(this));
 }

public class MyView extends View {

    public MyView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        setFocusableInTouchMode(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);
        int x = getWidth();
        int y = getHeight();    

        Paint paintTopLeft = new Paint();
        paintTopLeft.setStyle(Paint.Style.FILL);
        paintTopLeft.setColor(Color.WHITE);
        //canvas.drawPaint(paintTopLeft);  // don't do that
        // Use Color.parseColor to define HTML colors
        paintTopLeft.setColor(Color.parseColor("#F44336"));
        canvas.drawRect(0,0,x / 2,y / 2,paintTopLeft);

        Paint paintTopRight = new Paint();
        paintTopRight.setStyle(Paint.Style.FILL);
        paintTopRight.setColor(Color.WHITE);
        // canvas.drawPaint(paintTopRight);  // don't do that
        // Use Color.parseColor to define HTML colors
        paintTopRight.setColor(Color.parseColor("#2196F3"));
        canvas.drawRect(x / 2, 0, x, y / 2, paintTopRight);    
    }
}

I had only made 2 to test the code ;) But your code is exactly what I was looking for! Also, thanks for the explanation. — user3182261, Jul 01 '15 at 14:34
By the way: The Paint structure is very resource intense on Android. You should avoid creating it again and again in onDraw. You better create it in onInit or onCreate and hold it as a private member! — Matthias, Jul 01 '15 at 14:36

Draw multiple rectangles android canvas

1 Answers1

Linked