Android Canvas drawRect in loop

Question

I want to draw a matrix of rectangles on my ui. The problem is that there is only one rectange, the first one of the matrix, visible.

Here is my code:

protected void onDraw(Canvas canvas) {
    Paint p = new Paint();
    p.setColor(Color.GRAY);
    if (w != 0 && h != 0) {
        a = w / 11;
        space = a / 12;
        System.out.println("w: " + w + ", h: " + h + ", a: " + a + "space: " + space);
        for (int x = 0; x < 10; x++) {
            for (int y = 0; y < 15; y++) {
                System.out.println("canvas.drawRect(new Rect(" + (x*a+(x+1)*space) + ", " + (y*a+(y+1)*space) + ", " + a + ", " + a + "), p);");
                canvas.drawRect(new Rect(x*a+(x+1)*space, y*a+(y+1)*space, a, a), p);
            }
        }
    }
}

This are the fist lines of the output:

05-08 15:04:19.511: I/System.out(26349): w: 1080, h: 1701, a: 98space: 8
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 8, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 114, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 220, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 326, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 432, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 538, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 644, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 750, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 856, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 962, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 1068, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 1174, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 1280, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 1386, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(8, 1492, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(114, 8, 98, 98), p);
05-08 15:04:19.511: I/System.out(26349): canvas.drawRect(new Rect(114, 114, 98, 98), p);

And here is a screenshot of the ui:

So what am I doing wrong? There should be a 10x15 matrix of rectangles.

Answer 1

I took a look at the docs for Rect and they say the params go left, top, right, bottom.

From your log output, it looks like your top is below the bottom (on the screen). It indicates in the documentation that range checks aren't done, so I'm guessing if one overlaps the other then it won't display the rectangle.

Hopefully that gets it for you.

Answer 2

I ran your code like this:

for (int x = 0; x < 10; x++) {
    for (int y = 0; y < 15; y++) {
        int left = x*a+(x+1)*space;
        int top  =  y*a+(y+1)*space;
        int right = a;
        int bottom = a;
        if( left <= right && top <= bottom ) {
            Log.d("draw","canvas.drawRect(new Rect("+left +", "+top+", "+right+", "+bottom+"), p);");
            canvas.drawRect(new Rect(left,top,right,bottom), p);
        }
    }
}

And only one rect was printed.

canvas.drawRect(new Rect(8, 8, 98, 98), p);

Maybe it is the rect in your screenshot.

You want a 10x15 matrix of rectangles.Do you mean this?

protected void onDraw(Canvas canvas) {
    Paint p = new Paint();
    p.setColor(Color.GRAY);
    if (w != 0 && h != 0) {
        a = w / 11;
        space = a / 12;
        System.out.println("w: " + w + ", h: " + h + ", a: " + a + "space: " + space);
        for (int x = 0; x < 10; x++) {
            for (int y = 0; y < 15; y++) {
                int px = x*a+(x+1)*space;
                int py = y*a+(y+1)*space;
                System.out.println("canvas.drawRect(new Rect("+px+", "+py+", "+(px+a)+", "+(py+a)+"), p);");
                canvas.drawRect(new Rect(px, py, px+a, py+a), p);
            }
        }
    }
}