Inline Text Content Compose (Text Drawable)

Sunish Rai
2 min readSep 3, 2022

--

We can add drawable inside Jepack compose Text. There is no any limitation in compose for adding any drawable. we can place drawable at any position to string and use same string in Text composable.

val annotatedString = buildAnnotatedString {
append("First Text")
appendInlineContent(id = "imageId")
append(" with a call icon")
}
val inlineContentMap = mapOf(
"imageId" to InlineTextContent(
Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
) {
Image(
imageVector = Icons.Default.Call,
modifier = Modifier.fillMaxSize(),
contentDescription = ""
)
}
)

Text(annotatedString, inlineContent = inlineContentMap)

Output:

Right Drawable:

val annotatedString = buildAnnotatedString {
append("This is text ")
append(" with a call icon")
appendInlineContent(id = "imageId")
}
val inlineContentMap = mapOf(
"imageId" to InlineTextContent(
Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
) {
Image(
imageVector = Icons.Default.Call,
modifier = Modifier.fillMaxSize(),
contentDescription = ""
)
}
)

Text(annotatedString, inlineContent = inlineContentMap)

Left Drawable:

val annotatedString = buildAnnotatedString {
appendInlineContent(id = "imageId")
append("This is text ")
append(" with a call icon")
}
val inlineContentMap = mapOf(
"imageId" to InlineTextContent(
Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
) {
Image(
imageVector = Icons.Default.Call,
modifier = Modifier.fillMaxSize(),
contentDescription = ""
)
}
)

Text(annotatedString, inlineContent = inlineContentMap)

--

--