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?
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 ")
})
Check this function below. Here paragraph is your string source and searchQuery is the specific text you want to highlight.
This provides you a dynamic state for text and search highlights.
@Composable
fun getData(): StateFlow<AnnotatedString?> {
val span = SpanStyle(
color = MaterialTheme.colorScheme.onPrimaryContainer,
fontWeight = FontWeight.SemiBold,
background = MaterialTheme.colorScheme.primaryContainer
)
return combine(paragraph, searchQuery) { text, query ->
buildAnnotatedString {
var start = 0
while (text.indexOf(query, start, ignoreCase = true) != -1 && query.isNotBlank()) {
val firstIndex = text.indexOf(query, start, true)
val end = firstIndex + query.length
append(text.substring(start, firstIndex))
withStyle(style = span) {
append(text.substring(firstIndex, end))
}
start = end
}
append(text.substring(start, text.length))
toAnnotatedString()
}
}.stateIn(viewModelScope, SharingStarted.WhileSubscribed(), null)
}