Hi everybody, I'm trying to create a "Chat bubble" composable, basically a

Text

with vector image as a background. With the XML approach I just had to set padding of

TextView

and its background (there I could use gradient drawable as well). But now it seems a bit more work is involved. I tried creating a custom layout with

Layout

(having

Text

and

Image

as its children, positioned on top of each other). Then I measured the text and set its measures to the image behind it + some padding for the bubble. Looking at the preview, the measures/placement are correct. But the image doesn't stretch horizontally (vertical stretch is ok, on the screenshot you can see the blue border - that's the image composable's rectangle, but the image inside it is not stretched). The image I'm using is SVG converted to vector drawable. I tried setting

ContentScale.FillWidth

(it gets stretched, but it's distorted) and

Modifier.fillMaxWidth()

(did nothing) on the image. The

Layout

itself has

fillMaxWidth

set. Any ideas how to fix it, or maybe there's a better approach?

Hm, but vector drawables do not stretch, you should use something like scale type (not sure it exists for Image composable) or maybe draw it directly on canvas

Yeah, I tried pretty much all of the options in

ContentScale

, but without success. I'll check how to do it with canvas, thanks for pointing out this. Probably for scaling

Modifier.drawLayer

would also be an option, then I'll need to divide the target width by the current one to get the scale ratio.

yep, drawLayer is also an option