How to have multiple styles within Jetpack Compose Text
2 min readJan 5, 2023
This article will talk about how to have multiple styles within a single Text using Jetpack Compose.
Remember how every time you needed to have multiple styles applied to a single TextView in XML you stumbled upon a solution that either used Html.fromHtml or SpannableString together with some index magic.
Well, those days are over. Using Jetpack Compose we can easily achieve that with AnnotatedString . We can build it with buildAnnotatedString and just pass it to Text composable.
Will give us:
The nice thing is that if you set a color to the text directly, for example, the AnnotatedString will use it by default as well. You can then still override it with SpanStyle later.
Will give us:
Things you can also customise with SpanStyle are:
- color
- fontSize
- fontWeight
- fontStyle
- fontFamily
- background
- textDecoration
- shadow
- and many more!
