How can I draw a box with a message shape like thi...

# compose

[Ayfri]

How can I draw a box with a message shape like this ?
It can have any content inside, width is always the same but height can change.

[Jonas]

should be quite simple if you draw on a canvas
.drawBehind

then draw a rect with rounded corners and a triangle. + some padding

[Ayla]

Also you can write a custom GenericShape with pathBuilder.

[Ayfri]

Do you have any tutorial or documentation on this ? I'm not familiar at all in drawing custom shapes with Compose

[Jonas]

https://developer.android.com/jetpack/compose/graphics/draw/modifiers#drawbehind
No clue about the GenericShape, but sounds interesting 🙂

[Ayla]

https://blog.devgenius.io/custom-shapes-in-jetpack-compose-deep-dive-b987a52c743c

or you can do it like:

@Composable
fun waveShape(): GenericShape {

    return remember() {
        GenericShape { size: Size, layoutDirection: LayoutDirection ->
            //do like what you do on a canvas
        }
    }
}

@Composable
fun Box(){
  Surface(shape=waveShape()...){}
}

[Jonas]

Interesting! Thx for sharing @Ayla

[Eganathan R]

https://stackoverflow.com/questions/65965852/jetpack-compose-create-chat-bubble-with-arrow-and-border-elevation

[ephemient]

I wouldn't draw a rect + triangle, I'd build the outline as a single path then fill it

[ephemient]

then it'll work with transparency, shadows, etc.

[Oleksandr Balan]

Linking similar question with solution with GenericShape and paths union operation
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1682318620876329

[ephemient]

for this use case, it's probably more desirable to use Modifier.clip(shape).background(...) than Modifier.border(), but that's the right idea

[ephemient]

in fact, if you do

Modifier.clip(shape).background(...).clickable { }.padding(...)

you can see that the ripple covers the right area, whereas that doesn't automatically happen with .border()

[ephemient]

could skip the path union op altogether and construct the whole shape by hand for more control

Untitled.cpp

[Ayfri]

Thanks for all your replies, ephemient's solution works really well !

[Stylianos Gakis]

I had to do this once super recently, but I wanted to use an existing Squircle-like shape, and add the arrow on top of it, did it right here. The interesting thing for my case was that I wanted to use a pre-existing shape as part of the shape, and added my own shape on top of it.
But didn’t know this op exists, I guess it’d be better for me to do that instead of just adding the two paths to my path object, thanks about that!