Hey folks! I would use second pair of eyes :eyes:. I am working on a “rich text view” which would al...

# compose

[josefdolezal]

Hey folks! I would use second pair of eyes 👀. I am working on a “rich text view” which would allow me to render additional content (images, for simplicity) along standard text. I use Compose’s Text with annotated string and embed images using inlineContent . What I am unable to do is to correctly align embedded content on text’s base line. Details in 🧵

[josefdolezal]

The illustration shows the desired state vs what I get when change placeholderVerticalAlign of InlineTextContent ’s Placeholder . The ideal state is that the green part of item is always above baseline (orange line) and the red part is always below it (note that height’s of red & green parts are pre-computed for each item).

[josefdolezal]

Is Text the best way for that or is there another API which would give me more control over text’s layout?

[ildar.i [Android]]

There is a BasicText - it provides more customization

From the looks of it you can set green part ‘Above baseline’ and then slap red part below it (just throwing out thoughts)

[ildar.i [Android]]

you can also use translationY from graphicsLayer (see https://medium.com/mobile-app-development-publication/have-fun-with-jetpack-compose-graphicslayer-modifier-e39c12a4791f)

[josefdolezal]

Thanks! I’ll look into BasicText.. Red and Green is a single composable, I only used different colors to demonstrate placeholder’s alignment behavior.. I’ll create a gist of what I have now

[josefdolezal]

This is simplified implementation:
https://gist.github.com/josefdolezal/f1db3c9e5783ec0cfc56290b7ffe2dfb