Monospace numbers in the Jetpack Compose Text component

Question

I'm using a custom font within my Jetpack Compose app and would like to monospace the numbers within a specific Text component.

With standard Android TextView, this can be done using the fontFeatureSetting="tnum" attribute (https://stackoverflow.com/a/41143337/2521749).

How can you do this with Jetpack Compose?

score 6 · Accepted Answer · answered Aug 31 '21 at 08:08

buildAnnotatedString is needed to customize different parts of a string.

If you need to apply some text style to the whole Text, you can use style argument.

Text(
    text = String.format(Locale.ROOT, "%02d:%02d", mins, secs),
    style = LocalTextStyle.current.copy(fontFeatureSettings = "tnum"),
)

I'm using LocalTextStyle.current here, which is the default style for Text, but you can replace it with the one you need, like one of your theme typography: MaterialTheme.typography.h4

Yep, this is better. Thanks Phillip! – amenon Aug 31 '21 at 15:57 — amenon, Aug 31 '21 at 15:57

score 2 · Answer 2 · answered Aug 31 '21 at 00:49

This can be done using an annotated string and SpanStyle.

    Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(fontFeatureSettings = "tnum")) {
                append(String.format(Locale.ROOT, "%02d:%02d", mins, secs))
            }
        }
    )

By default, numbers are displayed using the propotional-nums setting which allows the number to take only as much space as it needs. tabular-num or tnum forces all numbers to take up the same amount of space for the given font size. This allow you to render numbers in a monospaced-like format which is useful for views that update the numbers or for a table-like view that displays numbers.

The result is a view that will take up the same amount of space no matter the number displayed in it:

Awesome. Too bad it didn't work for hexadecimal numbers as well. — Hakanai, Feb 26 '23 at 03:54

score 1 · Answer 3 · answered Jan 12 '23 at 10:55

1

This works for me

val fontFamily = FontFamily(Typeface(android.graphics.Typeface.MONOSPACE))
buildAnnotatedString.addStyle(SpanStyle(fontFamily = fontFamily), start, end)

answered Jan 12 '23 at 10:55

QiXi

59
5

score 0 · Answer 4 · answered Feb 01 '23 at 18:56

val textStyle = TextStyle(
    fontSize = textWithoutScale(size = 26f),
    color = gray900,
    fontWeight = FontWeight.Normal,
    textAlign = TextAlign.Start,
    letterSpacing = 7.sp,
    fontFamily = FontFamily(Typeface.MONOSPACE) //Here's the magic!
)

Monospace numbers in the Jetpack Compose Text component

4 Answers4

Linked