It's probably a simple one. What's the best way to...

# compose

[Jeff]

It's probably a simple one. What's the best way to achieve a squircle image using coil in compose. The image should have a placeholder with the initials of the user name.

[Marcin Środa]

Just add Modifier.clip(CircleShape)

[Jeff]

It's a squircle. Not exactly a circle.

[Boris Kachscovsky]

You can clip to any shape, here’s a good article on defining a custom shape

https://juliensalvi.medium.com/custom-shape-with-jetpack-compose-1cb48a991d42

[Marcin Środa]

Oh, so you can use RoundedCornerShape() or use your own one

[Jeff]

Thanks guys

[Jeff]

What about the placeholder?

[Boris Kachscovsky]

The contents of your composable should be a slot, and that slot should be conditionally updated depending on whether you have an image or not.

If there isn’t an image, replace the contents with a Text

[Marcin Środa]

For coil placeholders, take a look at custom content:
https://google.github.io/accompanist/coil/#custom-content

[Jeff]

Thanks for the help guys!

[cb]

There's no built in way to create that shape, so you'll need to create the path yourself.

[popalay]

@Jeff Check it out https://github.com/Popalay/Barnee/blob/master/app/src/main/java/com/popalay/barnee/ui/theme/Shape.kt

[Jeff]

Good idea @cb!

[Jeff]

Thanks @popalay. It works!