androidandroid-jetpackandroid-jetpack-composeandroid-jetpack-compose-text

How to highlight specific word of the text in jetpack compose?


I wanted to know how to highlight the specific part of the text in jetpack compose. I tried Html.fromHtml() like this

Text(text = Html.fromHtml(" <font color='red'> Hello </font> World").toString())

But it didn't work. Is there any way I can do this in compose?


Solution

  • You can use the AnnotatedString to display the text with multiple styles.

    Something like:

    Text(buildAnnotatedString {
        withStyle(style = SpanStyle(color = Color.Red)) {
            append("Hello")
        }
        append(" World ")
    })
    

    enter image description here