Add icon to ClickableText in JetpackCompose

Question

I have an AnnotatedString which I use in ClickableText:

val annotatedText = buildAnnotatedString {
        withStyle(
            style = SpanStyle(
                color = colorResource(R.color.blue_color))
            )
        ) {
            append(text = "Some text here")
        }

ClickableText( text = annotatedText, maxLines = 2...)

Now I'd like to add an Icon at the end of my ClickableText. How could I do this?

This will help you https://stackoverflow.com/questions/67605986/add-icon-at-last-word-of-text-in-jetpack-compose — RaBaKa 78, Jan 17 '22 at 13:48
Thanks, I've found it already, but I'm dealing with ClickableText, not Text. Unfortunately there is no inlineContent property in ClickableText — Helios, Jan 17 '22 at 14:36

score 4 · Accepted Answer · answered Jan 18 '22 at 02:40

Current ClickableText doesn't support inlineContent. I think you can create one which look as same as ClickableText except it support inlineContent for adding the icon (follow answer here).

@Composable
fun CustomClickableText(
    ...
    inlineContent: Map<String, InlineTextContent> = mapOf(),
) {
    ...

    BasicText(
        ...,
        inlineContent = inlineContent
    )
}

This way help you easy to refactor if ClickableText support inlineContent in future.
Or, you can use Text with Modifier.pointerInput to handle click event.

Add icon to ClickableText in JetpackCompose

1 Answers1