Jetpack Compose Canvas drawRoundRect (with Examples)

Today, we will explore drawRoundRect method of Jetpack Compose Canvas.

Prerequisites:

• Canvas Basics

Note: Instead of Canvas, you can create round rectangles using the Box and Shape APIs.

drawRoundRect helps us to draw a rectangle with rounded corners. It takes multiple parameters:

fun drawRoundRect(
    color: Color,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    cornerRadius: CornerRadius = CornerRadius.Zero,
    alpha: Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
)

Here is a simple example:

@Composable
fun MyUI() {
    Canvas(
        modifier = Modifier
            .size(size = 300.dp)
            .border(width = 2.dp, color = Color.Magenta)
    ) {
        drawRoundRect(
            color = Color.Red,
            size = Size(width = 100.dp.toPx(), height = 64.dp.toPx())
        )
    }
}

Output:

Note: If you don’t specify the size, it occupies the whole canvas.

Currently, it has sharp corners. We can use the cornerRadius parameter to make them round. The CornerRadius method takes two parameters – x and y and constructs a radius based on them.

@Composable
fun MyUI() {
    Canvas(
        modifier = Modifier
            .size(size = 300.dp)
            .border(width = 2.dp, color = Color.Magenta)
    ) {
        drawRoundRect(
            color = Color.Red,
            size = Size(width = 100.dp.toPx(), height = 64.dp.toPx()),
            cornerRadius = CornerRadius(x = 36.dp.toPx(), 36.dp.toPx())
        )
    }
}

Output:

Let us change its position to the center of the canvas. We have to use the topLeft parameter and Offset function.

@Composable
fun MyUI() {
    Canvas(
        modifier = Modifier
            .size(size = 300.dp)
            .border(width = 2.dp, color = Color.Magenta)
    ) {
        drawRoundRect(
            color = Color.Red,
            size = Size(width = 100.dp.toPx(), height = 64.dp.toPx()),
            cornerRadius = CornerRadius(x = 36.dp.toPx(), 36.dp.toPx()),
            topLeft = Offset(x = 150.dp.toPx(), y = 150.dp.toPx())
        )
    }
}

Output:

It is not exactly in the middle. If you observe it closely, the top left corner of the rectangle is kept at the center. So, we need to move the rectangle to the left by half of its width and up by half of its height.

The new offset coordinates become:

x = (canvas width / 2) - (rectangle width / 2)
   = (300 / 2) - (100 / 2)
   = 100

y = (canvas height / 2) - (rectangle height / 2)
   = (300 / 2) - (64 / 2)
   = 118 

In the above code, change the topLeft parameter.

topLeft = Offset(x = 100.dp.toPx(), y = 118.dp.toPx())

Output:

Note: Do not directly use pixels. Always convert dp to pixels to support all the screen densities.

We can create a rectangle with stroke by using the style parameter.

@Composable
fun MyUI() {
    Canvas(
        modifier = Modifier
            .size(size = 300.dp)
            .border(width = 2.dp, color = Color.Magenta)
    ) {
        drawRoundRect(
            color = Color.Red,
            size = Size(width = 100.dp.toPx(), height = 64.dp.toPx()),
            cornerRadius = CornerRadius(x = 36.dp.toPx(), 36.dp.toPx()),
            topLeft = Offset(x = 100.dp.toPx(), y = 118.dp.toPx()),
            style = Stroke(width = 4.dp.toPx())
        )
    }
}

Output:

Instead of color, we can also pass brush to create gradient effects.

@Composable
fun MyUI() {
    Canvas(
        modifier = Modifier
            .size(size = 300.dp)
            .border(width = 2.dp, color = Color.Magenta)
    ) {
        drawRoundRect(
            brush = Brush.horizontalGradient(colors = listOf(Color.Cyan, Color.Magenta)),
            size = Size(width = 100.dp.toPx(), height = 64.dp.toPx()),
            cornerRadius = CornerRadius(x = 36.dp.toPx(), 36.dp.toPx()),
            topLeft = Offset(x = 100.dp.toPx(), y = 118.dp.toPx())
        )
    }
}

Output:

This is about the drawRoundRect method of Jetpack Compose Canvas. I hope you have learned something new. If you have any doubts, comment below.