How canvas.drawRect draws a rectangle

Question

I have to create a custom view where I have to draw a rectangle. I'm trying to use the canvas.drawRect method. I wanted to create rectangles somethig like this

the gray colored one is my custom view which is extending the View class. Inside the onDraw method I'm trying to draw the rectangle.

But actually I'm confused with the parameters of the drawRect method.

As per the documentation

/**
 * Draw the specified Rect using the specified paint. The rectangle will
 * be filled or framed based on the Style in the paint.
 *
 * @param left   The left side of the rectangle to be drawn
 * @param top    The top side of the rectangle to be drawn
 * @param right  The right side of the rectangle to be drawn
 * @param bottom The bottom side of the rectangle to be drawn
 * @param paint  The paint used to draw the rect
 */

What I assume is that left and top forms the x,y coordinates of the starting point, and right is the width and bottom is the height. But it doesn't seem to work that way.

I tried something like this to draw one rectangle but it does not draw anything

       paint.setColor(Color.BLUE);
       canvas.drawRect(5, canvas.getHeight()/2, 30, 30, paint );

Can anyone please tell how exactly a rectangle is drawn using these values?

It would be very helpful if someone could show the code to draw at least the first rectangle.

My requirement is like, the number of inner rectangles are dynamic, so if I pass some 4 to this View, it should create 4 equal width rectangles horizontally. something like

Thanks in advance!!

Answer 1

drawRect(float left, float top, float right, float bottom, Paint paint)

It seems in your case the problem is that if right is less than left or bottom is less than top then the rectangle is not drawn. But it seems it happens only in some devices , as @David Medenjak commented

I also recommend you to use the View dimensions and not the Canvas dimensions, that is better to use getWidth() & getHeight() and not Canvas.getWidth() & Canvas.getHeight()

Answer 2

Use this method to draw rectangle at X & Y coordinate with width and height params

fun drawRectangle(left: Int, top: Int, right: Int, bottom: Int, canvas: Canvas, paint: Paint?) {
        var right = right
        var bottom = bottom
        right = left + right // width is the distance from left to right
        bottom = top + bottom // height is the distance from top to bottom
        canvas.drawRect(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat(), paint!!)
    }

Usage

//drawing rectangle

        drawRectangle(posX, posY, 60, 40, canvas, paint)