in jetpack compose how can i create custom shape?

372 views Asked by At

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

enter image description here

1

There are 1 answers

0
Jason Gomez On

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:

enter image description here