Oval shape in jetpack compose

user_18028117 0
Viewed 100

I need to create a custom shape in jetpack compose similar to RoundedCornerShape, the result should look like this:

enter image description here

I believe I should extend the Shape interface like this:

class OvalCornerShape : Shape {

override fun createOutline(
    size: Size,
    layoutDirection: androidx.compose.ui.unit.LayoutDirection,
    density: Density
): Outline {
    val rect = size.toRect()

    val path = Path().apply {
        // do work here 
    }
    return Outline.Generic(path)
}

Any idea how I can achieve this ?

android-jetpack-compose android
1 Answers

This shape is not an oval or RoundedRect(percent=...). If you know mathematical expression you can use GenericShape to create a shape then Modifier.clip or Modifier.background() to set it as your shape. Probably requires addArc or quadraticBezier to draw

val shape = GenericShape{size,layoutDirection->
    this.quadraticBezierTo()
    this.arcTo()
}

Other option, it would probably be possible with photoshop to remove surrounding white color, to get this shape as an image then use Canvas and BlendMode to crop any image if that's what you need

https://raw.githubusercontent.com/SmartToolFactory/Jetpack-Compose-Tutorials/master/screenshots/tutorial6_2.gif

user_54578530
Related