Is there a way to style an AnnotatedString with a background that is not just a color (e.g. have a b...

# compose

[Janne Mareike Koschinski]

Is there a way to style an AnnotatedString with a background that is not just a color (e.g. have a border with rounded corners, as in the JetChat mockup, but not implemented in the JetChat sample)? This would be quite useful for me (in exactly that use case even, in a chat app).

An example of what that'd look like would be monospace like im Slack web and desktop (although Slack Android also can't handle that correctly)

[Zach Klippenstein (he/him) [MOD]]

I don’t believe there’s a way to do that with just AnnotatedString, but you could use the TextLayoutResult to calculate the bounds of the text you want to draw the background around and then just use another composable to draw it

[Vipulyaara]

I believe you can use Placeholder in TextLayoutResult to include any composable in text

A placeholder is a rectangle box inserted into text, which tells the text processor to leave an empty space. It is typically used to insert inline image, custom emoji, etc into the text paragraph.

[Zach Klippenstein (he/him) [MOD]]

A placeholder takes its own space though, it’s good for things like inserting your own custom emoji. I don’t think you can use it to draw behind other text.

[Janne Mareike Koschinski]

But the placeholder might contain a surface containing another text, right?

[Janne Mareike Koschinski]

It'd be nice if this was somewhat automated

[Zach Klippenstein (he/him) [MOD]]

Sure, but that text may not layout correctly - eg because a placeholder is a rectangle, if the text inside it gets wrapped, it would wrap within itself and not flow with the outer text. Also placeholders’ sizes have to be specified before the text gets measured, so you’d have to do an explicit text measurement yourself somehow for the inner text before passing it as a placeholder.

There are probably more weird edge cases I haven’t thought of. It’s just not what placeholders are designed to do.

[Janne Mareike Koschinski]

Yeah, it doesn't seem like an ideal solution

[Janne Mareike Koschinski]

But composing text and composables together in a reflowing environment is a use case that should definitely be supported by jetpack compose, hopefully it'll be in some future version.

Well I guess it'll have to be, as it's required for mixed text/chip input anyway, right?

[Zach Klippenstein (he/him) [MOD]]

It is, using techniques like the first thing I suggested. The ClickableText composable in the foundation library uses the same trick: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]compose/foundation/text/ClickableText.kt;l=70?q=ClickableText