Adding icons to text in Jetpack compose with Kotlin and Android

The UI we are fixing
Step 1: id and buildAnnotatedString
Step 2: Create a map
Step 3: Add InlineContent to text
A more complicated example

The code

GitHub

My app on the Google play store

The app

Resources

Without InlineTextContent

With InlineTextContent

Notice how the text now nicely wraps around the icons, instead looking like a separate entity

1) Create an id and buildAnnotatedString

So we need to do two things in this step. First create an id which will represent the icon you are trying to place inside of the text. Second use buildAnnotatedString to create our text



val modId = "modIcon"
val text = buildAnnotatedString {

        appendInlineContent(modId, "[icon]")
        append("user message")

  }

We will talk more about appendInlineContent() in step 3 but just know that it what compose will use to swap out with our icon

2) Create a map

Now we need to create a map. This is the map that compose will use to swap out our ids with our composables. So inside of this map the keys will be our ids(modId in my case) and the values will be the icons



 val inlineContent = mapOf(
        Pair(
            // This tells the [CoreText] to replace the placeholder string "[icon]" by
            // the composable given in the [InlineTextContent] object.
            modId,
            InlineTextContent(
                // Placeholder tells text layout the expected size and vertical alignment of
                // children composable.
                Placeholder(
                    width = 20.sp,
                    height = 20.sp,
                    placeholderVerticalAlign = PlaceholderVerticalAlign.Center
                )
            ) {
                // This Icon will fill maximum size, which is specified by the [Placeholder]
                // above. Notice the width and height in [Placeholder] are specified in TextUnit,
                // and are converted into pixel by text layout.

                Icon(Icons.Filled.Face,"",tint = Color.Red,modifier = Modifier.fillMaxSize())
            }
        )
)

-a Placeholder is also needed for text layout to reserve space for our icon.

Also, notice the modifier on the Icon, Modifier.fillMaxSize(), we do this so it fills up all the space reserved by the Placeholder

3) Add InlineContent to text

when we add our inlineContent to text, Compose will try to find a InlineTextContent in the map we defined as inlineContent, whose key equals to our defined id.



Text(text = text,
        inlineContent = inlineContent,
        modifier = Modifier.fillMaxWidth().padding(5.dp),

    )

A more complicated example

So here is the actual code of the Composable that is running in my application. It adds AsyncImages conditionally to my text: ```kotlin

@Composable
fun ChatBadges(
username:String,
message: String,
isMod: Boolean,
isSub:Boolean,
color:Color,
textSize: TextUnit
){
//this should be the link to the actual image
val modBadge = "linkToTwitchsModIcon"
val subBadge = "linkToTwitchsSubIcon"
val modId = "modIcon"
val subId = "subIcon"
val text = buildAnnotatedString {
// Append a placeholder string "[icon]" and attach an annotation "inlineContent" on it.
if(isMod){
appendInlineContent(modId, "[icon]")
}
if(isSub){
appendInlineContent(subId, "[subicon]")
}
withStyle(style = SpanStyle(color = color, fontSize = textSize)) {
append(username)
}
withStyle(style = SpanStyle(color = Color.White)) {
append(message)
}

}

val inlineContent = mapOf(
    Pair(

        modId,
        InlineTextContent(

            Placeholder(
                width = 20.sp,
                height = 20.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.Center
            )
        ) {


            AsyncImage(
                model = modBadge,
                contentDescription = "Moderator badge",
                modifier = Modifier.fillMaxSize().padding(2.dp)
            )
        }
    ),
    Pair(

        subId,
        InlineTextContent(

            Placeholder(
                width = 20.sp,
                height = 20.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.Center
            )
        ) {


            AsyncImage(
                model = subBadge,
                contentDescription = "Subscriber badge",
                modifier = Modifier.fillMaxSize().padding(2.dp)
            )
        }
    )
)


Text(text = text,
    inlineContent = inlineContent,
    modifier = Modifier.fillMaxWidth().padding(5.dp),
    color = color,
    fontSize = textSize
)

}


### Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/AndroidTristan).