androidandroid-jetpack-composespannablestringspannableandroid-jetpack-compose-text

How adding ImageSpan in jetpack compose Text


As we know, AnnotatedString in JetpackCompose has provided some API of Android's SpannedString.

but I didn't find any way/workaround to inline ImageSpan to a Text (except using AndroidView)


Solution

  • Putting images inside text can be done using AnnotatedString and inlineContent parameter of Text Composable.

    You can basically put any content there as long as you can define its size up-front in Placeholder.

    Here is how it looks with an Image put in the middle of the text: enter image description here

    val annotatedString = buildAnnotatedString {
        append("This is 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)