
Today, we will explore shapes in Android Jetpack Compose with the help of examples.
Prerequisites:
Jetpack Compose offers multiple shapes out of the box. They are:
- RoundedCornerShape
- CutCornerShape
- RectangleShape
- CircleShape
RoundedCornerShape:
It creates a rectangle shape with rounded corners.
For this article, let’s play with a box. We can set the box shape by using the modifier’s clip function.
@Composable
fun MyUI() {
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(shape = RoundedCornerShape(size = 12.dp))
.background(color = Color.Green)
) {
}
}
Output:

We can use the method in different ways:
#1 fun RoundedCornerShape(size: Dp)
This is what we have done above. The size is applied to all the corners.
#2 fun RoundedCornerShape(size: Float)
It takes float instead of Dp.
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(shape = RoundedCornerShape(size = 30f))
.background(color = Color.Green)
) {
}
Output:

#3 fun RoundedCornerShape(percent: Int)
We can set the corner radius in terms of percentage. If we pass 50, we get a circle.
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(shape = RoundedCornerShape(percent = 50))
.background(color = Color.Green)
) {
}
Output:

#4 fun RoundedCornerShape(corner: CornerSize)
It takes the CornerSize object and creates a rounded rectangle. The object can be obtained from CornerSize function. The function has multiple formats:
fun CornerSize(size: Dp): CornerSize
fun CornerSize(size: Float): CornerSize
fun CornerSize(percent: Int): CornerSize
Example:
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(shape = RoundedCornerShape(corner = CornerSize(size = 30f)))
.background(color = Color.Green)
) {
}
Output:

#5 fun RoundedCornerShape(topStart: Dp = 0.dp, topEnd: Dp = 0.dp, bottomEnd: Dp = 0.dp, bottomStart: Dp = 0.dp)
We can control the size of the individual corners.
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(
shape = RoundedCornerShape(
topStart = 10.dp,
topEnd = 20.dp,
bottomEnd = 30.dp,
bottomStart = 40.dp
)
)
.background(color = Color.Green)
) {
}
Output:

Instead of Dp, it also accepts Float and Int (percentage):
fun RoundedCornerShape(topStart: Float = 0.0f, topEnd: Float = 0.0f, bottomEnd: Float = 0.0f, bottomStart: Float = 0.0f)
fun RoundedCornerShape(topStartPercent: Int = 0, topEndPercent: Int = 0, bottomEndPercent: Int = 0, bottomStartPercent: Int = 0)
CutCornerShape:
We can create a rectangle with cut corners.
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(shape = CutCornerShape(size = 20.dp))
.background(color = Color.Green)
) {
}
Output:

Similar to RoundedCornerShape, CutCornerShape has multiple formats:
fun CutCornerShape(size: Dp)
fun CutCornerShape(size: Float)
fun CutCornerShape(percent: Int)
fun CutCornerShape(corner: CornerSize)
fun CutCornerShape(topStart: Dp = 0.dp, topEnd: Dp = 0.dp, bottomEnd: Dp = 0.dp, bottomStart: Dp = 0.dp)
fun CutCornerShape(topStart: Float = 0.0f, topEnd: Float = 0.0f, bottomEnd: Float = 0.0f, bottomStart: Float = 0.0f)
fun CutCornerShape(topStartPercent: Int = 0, topEndPercent: Int = 0, bottomEndPercent: Int = 0, bottomStartPercent: Int = 0)
RectangleShape:
It renders a plain rectangle. We do not have control over the corner sizes.
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(shape = RectangleShape)
.background(color = Color.Green)
) {
}
Output:

Note: By default, Box API renders a rectangle. So, in the above code, if you remove the clip method, you will get the same output.
CircleShape:
It creates a circle.
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(shape = CircleShape)
.background(color = Color.Green)
) {
}
Output:

Note: Internally, Jetpack Compose uses RoundedCornerShape to create CircleShape.
val CircleShape = RoundedCornerShape(50)
Instead of clip, we can also use other modifier functions like graphicsLayer, background, and border to render the shapes. Let’s create the above circle with these methods.
Using graphicsLayer:
Box(
modifier = Modifier
.size(size = 100.dp)
.graphicsLayer {
clip = true // don't forget this
shape = CircleShape
// shadowElevation = 20f // you can also set elevation
}
.background(color = Color.Green)
) {
}
Using background:
Box(
modifier = Modifier
.size(size = 100.dp)
.background(color = Color.Green, shape = CircleShape)
) {
}
Using border:
Box(
modifier = Modifier
.size(size = 100.dp)
.border(
width = 4.dp,
color = Color.Green,
shape = CircleShape
)
) {
}
Output:

On the android developers site, I found the following shape:

Let’s write the code for it:
Box(
modifier = Modifier
.size(size = 100.dp)
.clip(
shape = RoundedCornerShape(
topStart = 40.dp,
topEnd = 0.dp,
bottomStart = 0.dp,
bottomEnd = 0.dp
)
)
.background(color = Color.Green)
) {
}
Look at these beautiful button styles made with rounded corners.
This is about shapes in Android Jetpack Compose. I hope you have learned something new. If you have any doubts, leave a comment below.