When using `AnnotatedString`, I can specify a background for parts of the text with `SpanStyle.backg...

# compose

[Zoltan Demant]

When using AnnotatedString, I can specify a background for parts of the text with SpanStyle.background ... is it possible to specify how that background is rendered somehow, i.e. Id like it to have rounded corners?

[Alex Styl]

Couldn't find a way to do this using annotated strings (really hope there is a way), but I was able to achieve the same result using FlowRow with a very small horizontal spacing

[Zoltan Demant]

It does seem impossible using the current API 😞 If you dont mind sharing - how are you doing it with a FlowRow, one Text per char?

[Alex Styl]

FlowRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
                        Text(
                            text = socialHandle,
                            modifier = Modifier.alignByBaseline(),
                            fontWeight = FontWeight.Medium
                        )
                        Text("added the", modifier = Modifier.alignByBaseline())
                        Text(
                            text = label,
                            fontWeight = FontWeight.Medium,
                            modifier = Modifier
                                .alignByBaseline()
                                .clip(MaterialTheme.shapes.small)
                                .background(tint)
                                .clickable {/* TODO */ }
                                .padding(horizontal = 4.dp, vertical = 2.dp)
                        )
                        Text("label on $time", modifier = Modifier.alignByBaseline())
                }

=

[Alex Styl]

this is how it looks on narrower window

[Zoltan Demant]

Ahh, gotcha! Thanks for the inspo 😃

[Zoltan Demant]

Created a feature request for it: https://issuetracker.google.com/issues/298540705 Feel free to 🌟

[mohamed rejeb]

Check this you need some work to achieve the result that you want but you can do any custom layout you want https://github.com/saket/ExtendedSpans

[Zoltan Demant]

Thats super interesting, thanks for the link!

[Rick Regan]

This is a little clunky but I’ve done something similar based on https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/InlineTextContent . Where the example has Box you could instead have Text(modifier = Modifier.background(color = …, shape = RoundedCornerShape(...))). Then use Text(text = …, inlineContent = …) (the example uses BasicText but `Text`works too).

For the width and height in PlaceHolder I use the font size.

[Zoltan Demant]

Some pretty neat solutions on here, thank you all. Are you able to get the sizing just right with that too, @Rick Regan? Thats my biggest worry with "faking it"; the highlighted text in my case is part of a word/sentence and even the slightest difference will be noticeable.

[Rick Regan]

That might possibly be an issue. When I said “something similar” I am inserting icons into an annotated string. They may be slightly off (I can’t tell though) but look good for my purposes.

[Zoltan Demant]

Given all of this, I think Ill just stick to the rectangular background that SpanStyle.background offers, and hope for a shape parameter to arrive sometime in the future. Feel free to star the issue if you feel the same! I appreciate all the ideas shared, Ive definitely learned a few new concepts today thanks to them! 😃

[Rick Regan]

I tried it with text. It did not line up well like the icon did (plus getting the width right is trickier than with an icon).