How to create rounded corner shape with jetkack compose

In this tutorial you will learn how to cut the corners of a view using jetpack compose. You will see how to use the modifier jetpack compose functionality to apply a clip on a view using RoundedCornerShape and CutCornerShape.

Jetpack Compose Modifier functionality

To access to the jetpack compose modifier functionality, you just have to set modifier = Modifier as a view attribute. In this way you will call the default modifier. You can then add all the proprierties you need. Don't forget that the order with wich you set the proprieties is important. In fact, every proprieties is applied directly with the order you use.

modifier
 Box(modifier = Modifier
            .size(150.dp)
            .background(Color.Red)
        )

jetpack compose modifier example

Here is a very simple example that shows how to set a modifier on a box, by setting the size to 150 dp and a red color.

Jetpack Compose clip view with RoundedCornerShape

In order to cut the corners of a view, you can use the clip modifier.

clip modifier
   Box(modifier = Modifier
            .size(150.dp)
            .clip(CircleShape)
            .background(Color.Red)
        )

With the CircleShape shape, you can cut a circle shape.

jetpack compose circle modifier shape

RoundedCornerShape
Box(modifier = Modifier
            .size(150.dp)
            .clip(RoundedCornerShape(30.dp))
            .background(Color.Red)
        )


Box(modifier = Modifier
            .size(150.dp)
            .clip(RoundedCornerShape(30.dp))
            .background(Color.Red)
        )

RoundedCornerShape does the work for you. You just have to set the radius in dp dimension and the corners will be cutted. You can also cut only a specific corner, by setting topStart, topEnd, bottomStart, bottomEnd values.

Jetpack Compose clip view with CutCornerShape

CutCornerShape is very similary to RoundedCornerShape, but will not cut smoothly.

Box(modifier = Modifier
            .size(150.dp)
            .clip(RoundedCornerShape(topStart = 30.dp))
            .clip(CutCornerShape(bottomEnd = 30.dp))
            .background(Color.Red)
        )

As you can see, you can add more clip one under the other. Jetpack compose will follow from top to end all your modifier and will apply them, don't forget the order matters.

jetpack compose RoundedCornerShape CutCornerShape modifier clip

Other articles