in jetpack compose how can i create custom shape?

Question

I'm trying to create custom shape, Like the blue shape in the picture.

It's called squircle. You can refer [this question](https://stackoverflow.com/questions/73299444/squirecle-image-was-not-shown-on-android-10-devices-compose) to draw it or [this answer](https://stackoverflow.com/a/73590696/5457853) to clip from image using BlendMode — Thracian, Jun 06 '23 at 15:20

score 0 · Answer 1 · answered Jun 07 '23 at 14:35

You can use a Box and clip modifier to accomplish this:

 @Composable
 fun BlueShape(color: Color, text: String, modifier: Modifier = Modifier) {
     Box(
         modifier = modifier
             .clip(RoundedCornerShape(40))
             .background(color),
         contentAlignment = Alignment.Center
     ) {
         Text(
             text = text,
             fontWeight = FontWeight.Bold,
             color = Color.White,
             fontSize = 100.sp
         )
     }
 }

 @Preview(showBackground = true, widthDp = 500, heightDp = 500)
 @Composable
 fun BlueShapePreview() {
     BlueShape(
         color = Color.Blue,
         text = "One UI",
         modifier = Modifier.requiredSize(400.dp)
     )
 }

The final result:

in jetpack compose how can i create custom shape?

1 Answers1