CODEWITHSUNDEEP
androidandroid-jetpack-compose
Sean
Sean

Reputation: 3035

Why does Jetpack Compose not capitalize text in buttons?

The docs seem to think buttons should be all caps https://developer.android.com/reference/kotlin/androidx/compose/material/Typography#button but in practice, they aren't. (Using 1.0.0-beta01)

How can change my theme so button text is capitalized?

Upvotes: 13

Views: 4063

Answers (1)

Stefano Sansone
Stefano Sansone

Reputation: 2709

There seems to be no property in the TextStyle class yet that allows you to set the uppercase. The only workaround I have found is to modify my Typography theme for button and use the fontFeatureSettings property of TextStyle to set the small caps to all characters with fontFeatureSettings = "c2sc, smcp"

Example Typography.kt

val Typography = Typography(
    button = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.W500,
        fontSize = 16.sp,
        fontFeatureSettings = "c2sc, smcp"
    )
)

From the docs

The advanced typography settings provided by font. The format is the same as the CSS font-feature-settings attribute: https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop

Note from CSS font-variant Property

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

Not a very beautiful solution but it is something. Tested with 1.1.0-alpha01

Upvotes: 10

Related Questions