How to use inline content in Text in Compose

Assume your PM asked you to create a component where you want to add an arrow after Title text. Something like below

Your first thought? Using a Row to build this

However, there’s one problem with this approach. As soon as the title grows (in length), the arrow will not look at the end of the text, but rather at the end of a whole Text component. Something like below

After seeing this UI, your PM will not be happy. But not to worry

Meet InlineTextContent, which stores a composable to be inserted into the text layout.

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

So, our final code will look like this

Now, this will produce following output, as per our requirement.

Finally, You’re Happy. Your PM is Happy. Everyone is Happy. And if you follow me, I’ll be Happy as well. 😄