Partially color text and make it clickable in Jetpack Compose

user_9715339 0
Viewed 7084

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.

Partial color text

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?

android-jetpack-compose-text android-jetpack-compose android
1 Answers

So with the help of @CommonsWare's comment and this document https://developer.android.com/jetpack/compose/text#click-with-annotation

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)
                }
            }
        )
    }
user_97153390
Related