androidkotlinuser-interfaceandroid-jetpack-compose

Android Development: Theme typography doesn't work on button text


I'm using jetpack compose, kotlin, on Android Studio Hedgehog 2023.1.1 Patch 2. my app's targetSdk = 34

The attached image pretty much sums up the problem. After setting a custom theme with a custom typography, the theme's typography doesn't work on the text of a button.

colors of the theme work on buttons normally, only the typography isn't working. fonts work on buttons if i explicitly specify them, but they're supposed to work automatically due to theme

i tried different fonts, same problem. here's my implementation of the theme:

in Theme.kt file

@Composable
fun CutomTheme(
    content: @Composable () -> Unit
) {
    // irrelevant color-related code
    MaterialTheme(
        colorScheme = colorScheme,
        typography = CustomTypography,
        content = content
    )
}

in CustomTypography definition

val CustomTypography = Typography(
    bodyLarge = TextStyle(
        fontFamily = ReemKufi,
        fontWeight = FontWeight.Bold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    )
)

attached image of problem


Solution

  • The default TextStyle in Button (material 3) is not bodyLarge, it is labelLarge.,

    Another way you can see this is if you open the source code for Button you can see that the defined default text style is labelLarge:

    ProvideTextStyle(value = MaterialTheme.typography.labelLarge)