DEV Community

Cover image for Styling a clickable text like TikTok in Android with Jetpack Compose
Tristan Elliott
Tristan Elliott

Posted on • Edited on

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

GitHub code

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:

TikTok login 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.

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. <a name="click"></a>
- This is where things get a little more complicated, mainly because we will be using the [ClickableText](https://developer.android.com/jetpack/compose/text#get-click-position) composable:
Enter fullscreen mode Exit fullscreen mode

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](https://twitter.com/AndroidTristan). 
















Enter fullscreen mode Exit fullscreen mode

Top comments (0)