Partially color text and make it clickable in Jetpack Compose

Question

For the views declared in XML we could use SpannableStringBuilder as mentioned here https://stackoverflow.com/a/4897412/9715339 to color that partial string.

But with JetPack compose Text I am not able to achieve the same with only single Text.

I want something like this.

As you can see only "Sign up" text has different color and Also I would like to make it clickable.

This is how my text code looks at the moment

Text(text = "Don't have an account? Sign Up",
                        modifier = Modifier.align(Alignment.BottomCenter),
                        style = MaterialTheme.typography.h6,
                        color = MaterialTheme.colors.secondary,
                    )

Is this possible in jetpack compose?

For the separate color aspect, you are looking for `AnnotatedString`. I do not know whether there is a way to make that segment clickable. — CommonsWare, Apr 24 '21 at 14:28
@CommonsWare Yup, that was it. Thank you for pointing me in the right direction. — Mayur Gajra, Apr 24 '21 at 14:49

score 24 · Answer 1 · edited Jul 07 '23 at 15:21

So with the help of @CommonsWare's comment and the Compose documentation, I managed to create the same using AnnotatedString & ClickableText. Comments are added inline for anyone to understand.

@Composable
fun AnnotatedClickableText() {
    val annotatedText = buildAnnotatedString {
        //append your initial text
        withStyle(
            style = SpanStyle(
                color = Color.Gray,
            )
        ) {
            append("Don't have an account? ")

        }

        //Start of the pushing annotation which you want to color and make them clickable later
        pushStringAnnotation(
            tag = "SignUp",// provide tag which will then be provided when you click the text
            annotation = "SignUp"
        )
        //add text with your different color/style
        withStyle(
            style = SpanStyle(
                color = Color.Red,
            )
        ) {
            append("Sign Up")
        }
        // when pop is called it means the end of annotation with current tag
        pop()
    }

    ClickableText(
        text = annotatedText,
        onClick = { offset ->
            annotatedText.getStringAnnotations(
                tag = "SignUp",// tag which you used in the buildAnnotatedString
                start = offset,
                end = offset
            )[0].let { annotation ->
                //do your stuff when it gets clicked
                Log.d("Clicked", annotation.item)
            }
        }
    )
}

Thanks for providing this example. Currently clicking the text without a tag will throw `java.lang.IndexOutOfBoundsException: Index: 0, Size: 0` . To correct this, you would do the following as indicated by [these docs](https://developer.android.com/jetpack/compose/text#click-with-annotation) and use `.firstOrNull()?.let { annotation`. — kelvin, Sep 04 '21 at 08:32
Thanks for the comment above `pop()` "current tag". I've faced an issue when using multiple pushes whatever i clicked it only trigger the first pushed item. — adwardwo1f, Nov 30 '21 at 09:04
Instead of [0].let, use .forEach to handle more than one annotation — Sean, Jul 07 '22 at 17:08

Partially color text and make it clickable in Jetpack Compose

1 Answers1

Linked