How to change textstyle to Material headline?-CodePudding

How to changes text style Material headline?

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

thanks

CodePudding user response：

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
)