Hello, everyone :wave: How would you implement this "labels over the image" behavior in Compose? Kno...

# compose

[henrikhorbovyi]

Hello, everyone 👋
How would you implement this "labels over the image" behavior in Compose?
Knowing that those values are variable

[Kirill Grouchnikov]

Modifier.drawWithContent

[henrikhorbovyi]

Hmm, in the image right ?

[Kirill Grouchnikov]

This modifier allows you to draw something before or after the main content has been drawn. That’s where you’d add your lines and texts, if that is what you’re asking.

What exactly is the question? How to position the texts? How to draw them? How to determine exactly where the texts and the lines should be for any arbitrary image that may or may not depict a car?

[henrikhorbovyi]

yeah, the drawWithContent gave me a idea, but my question is "*How to position the texts?"* relative to the image in way that if the size/density of the device changes the labels will be in the same place.

[Kirill Grouchnikov]

Do you know where each callout needs to be? Like in terms of width percentage and height percentage? That the front hood is at 20% width and 80% height, and the rear trunk at 85% width and 30% height?

If yes, you’d use those numbers along with the pixel / dp width and height of the canvas (size.width, size.height) to draw the lines and the texts. If not, that’s what you’d need to figure out first, which isn’t a Compose question.

[Kirill Grouchnikov]

You use the canvas / current density to convert pixels to dps if needed, but otherwise DrawScope.drawText accepts the usual sp values for text size in the style attribute.

[henrikhorbovyi]

Ok, got it
Thank you very much, Kirill