Is it possible to create Squircle shape in jetpack...

# compose

[Mjahangiry75]

Is it possible to create Squircle shape in jetpack compose?

[nitrog42]

it is !

[nitrog42]

https://foso.github.io/Jetpack-Compose-Playground/foundation/shape/

[nitrog42]

i'm not sure if it's rounded (and oyu can round only one corner if you want),
but you can also draw your own custom shape easily

[nitrog42]

well it seems you have to do a custom shape -> https://foso.github.io/Jetpack-Compose-Playground/cookbook/how_to_create_custom_shape/ and use the bezier curve in the path 😄
method defined here : https://medium.com/@nikolskayaolia/an-easy-way-to-implement-smooth-shapes-such-as-superellipse-and-squircle-into-a-user-interface-a5ba4e1139ed

[Mjahangiry75]

Thanks, I'll try

[Mjahangiry75]

These are close to what I want

[nitrog42]

I found multiple resources on how to calculate the path, like here : https://stackoverflow.com/questions/50206406/drawing-a-squircle-shape-on-canvas-android
or here https://gist.github.com/nicolas-miari/46f05ab939c3778a665510bebdc7fd54
or here https://github.com/MicroRJ/android_superellipse/blob/master/superellipse/src/main/[…]va/com/microdevrj/superellipse/performance/SuperellipseLogic.kt 😄
I'm 100% sure it's possible, you'll just have to tinker with your code a bit to find what works for you

[Mjahangiry75]

Actually I wanna use the shape for Card

[Mjahangiry75]

I don't think so Canvas Shape is useful for Card

[nitrog42]

it's just to get the right "path"

[nitrog42]

each one of this sample use a Path() object to draw the shape, you just have to find/code the right method to create the Path to draw, and then use drawPath() in Compose, or Views, or anything

[Mjahangiry75]

Nice, so first I get the path then I use that by CustomShape. Genius

[Mjahangiry75]

I got the solution, thanks man

val SquircleShape = GenericShape { _, _ ->
    moveTo(0.0f, 100.0f)
    cubicTo(0.0f, 33.0f, 33.0f, 0.0f, 100.0f, 0.0f)
    cubicTo(167.0f, 0.0f, 200.0f, 33.0f, 200.0f, 100.0f)
    cubicTo(200.0f, 167.0f, 167.0f, 200.0f, 100.0f, 200.0f)
    cubicTo(33.0f, 200.0f, 0.0f, 167.0f, 0.0f, 100.0f)
    close()
}