Jetpack Compose Canvas drawRoundRect (with Examples)

Jetpack Compose drawRoundRect Canvas

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

Prerequisites:

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:

drawRoundRect

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:

Corner Radius Rectangle

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:

topLeft Offset

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:

Center rectangle

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:

border

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:

gradient

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

Leave a Comment