Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 824
Sean Avatar asked Mar 09 '21 15:03

Sean


People also ask

Is Jetpack Compose stable now?

New stable features and APIsSeveral features and APIs were added as stable. Highlights include: The APIs LazyHorizontalGrid and LazyVerticalGrid let you place lists of items in a grid.

Why Jetpack Compose is better than XML?

Compose allows you to do more with less code compared to XML. Compose is Intuitive. This means that you just need to tell Compose what you want to show the user. Compose is compatible with all your existing code: you can call Compose code from Views and Views from Compose.

What is mutable state Jetpack Compose?

mutableStateOf creates an observable MutableState<T> , which is an observable type integrated with the compose runtime. interface MutableState<T> : State<T> { override var value: T. } Any changes to value will schedule recomposition of any composable functions that read value .


1 Answers

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

like image 52
Stefano Sansone Avatar answered Oct 08 '22 17:10

Stefano Sansone