Styling a clickable text like TikTok in Android with Jetpack Compose

Table of contents

1. UI we are making
2. Styling the text
3. Making text clickable

My app on the Google Playstore

• HERE

GitHub code

• HERE

Introduction

• This series will be an informal demonstration of any problems I face or any observations I make while developing Android apps. Each blog post in this series will be unique and separate from the others, so feel free to look around.

The UI we will be recreating

• Todays tutorial we will be recreating this UI:

• Some of you might notice it is the UI from TikTok's login page

• Specifically we are going to be recreating the text and we do so in two steps:

1) Styling only one section of the text.
2) Making the only the styled section of the text clickable.

1) Styling only one section of the text.

• To do this we will be using the buildAnnotatedString function. Which allows us to do this:

 val highlightedText = buildAnnotatedString {
        append("Don't have an account?")
        withStyle(style= SpanStyle(color= Color(0xFFe63946))){
            append(" Sign up")
        }
    }

• As you can see from the code above we are using append() to add normal strings to our highlightedText variable. withStyle() in combination with append() allows us to only edit a certain section of the text. This will give us our desired text.

2) Making the only the styled section of the text clickable.

• This is where things get a little more complicated, mainly because we will be using the ClickableText composable:

ClickableText(
            onClick ={ offset ->
                //changeVisiblility()
                Timber.tag("offsets").d("character -> $offset")
                if(offset >=20){
                    clickFunction()
                }
                     },
            text = highLightedText,
            style = MaterialTheme.typography.subtitle1
        )

• Notice the onClick{offset ->} function and the offset variable. This corresponds to the index of the letter which the user pressed. So for the text Don't have an account? Sign up there are 30 characters. Our code then states, as long as the user is clicking at the 20th index or higher we want clickFunction() to run. Now I used the 20th index to give our user a little bit of wiggle room, incase they don't press exactly where we want them to.

Conclusion

• Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.