Search code examples
androidkotlinandroid-jetpack-composeandroid-compose-textfield

How to change textstyle to Material headline?


How to changes text style Material headline?

Text("Lorem Ipsum",
      style = TextStyle() // ????
)

thanks


Solution

  • In M2 TextStyles are accessed via MaterialTheme.typography

    For example:

    Text(
         text = "Lorem Ipsum",
         style = MaterialTheme.typography.h1
    )
    

    You can customize them in your theme. Something like:

    val MyTypography = Typography(
        h1 = TextStyle(
            fontFamily = Rubik,
            fontWeight = FontWeight.W300,
            fontSize = 96.sp
        ),
        body1 = TextStyle(
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp
        )
        /*...*/
    )
    MaterialTheme(typography = MyTypography, /*...*/)
    

    In M3 the approach is similar. You can define your custom TextStyle in the Theme:

    val replyTypography = Typography(
        titleLarge = TextStyle(
            fontWeight = FontWeight.SemiBold,
            fontSize = 22. sp,
            lineHeight = 28. sp,
            letterSpacing = 0. sp
        ),
        titleMedium = TextStyle(
            fontWeight = FontWeight.SemiBold,
            fontSize = 16. sp,
            lineHeight = 24. sp,
            letterSpacing = 0.15.sp
        ),
    )
    
    MaterialTheme(
        typography = replyTypography,
    ) {
        // M3 app Content
    }
    

    and then apply them:

    Text(
        text = "Lorem Ipsum",
        style = MaterialTheme.typography.titleLarge
    )