How to set text size according to the screen size in Jetpack Compose?

124 views Asked by At

In my app I use one typography

val Typography = Typography(
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Light,
        fontSize = 18.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp,
        hyphens = Hyphens.Auto,
        lineBreak = LineBreak.Paragraph
    )
)

and it works fine. Now I added a support for different screen sizes (val windowSize = calculateWindowSizeClass(this)). Now I need to adjust text sizes in my app according to the current screen size.

How can I do it globally? Currently, I check the screen size for each Text view and set the wisched size, which is not effective and requires a lot of work, which looks like this:

...
val fontSize = when(windowSize.widthSizeClass) {
        WindowWidthSizeClass.Compact -> 14.sp
        WindowWidthSizeClass.Medium -> 16.sp
        WindowWidthSizeClass.Expanded -> 18.sp
        else -> 14.sp
}

Text(text = "Some text...", fontSize = fontSize)
...

Is there an affective way to set the text size globally for all Text views within the app,for example something like this:

val Typography = when(windowSize.widthSizeClass) {
    WindowWidthSizeClass.Compact -> Typography(
        bodySmall = TextStyle(  // --------------------> Small for compact screens
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Light,
            fontSize = 14.sp,
            lineHeight = 20.sp,
            letterSpacing = 0.5.sp,
            hyphens = Hyphens.Auto,
            lineBreak = LineBreak.Paragraph
        )
    )
    WindowWidthSizeClass.Medium -> Typography(
        bodyMedium = TextStyle(  // --------------------> Medium for medium screens
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Light,
            fontSize = 16.sp,
            lineHeight = 22.sp,
            letterSpacing = 0.5.sp,
            hyphens = Hyphens.Auto,
            lineBreak = LineBreak.Paragraph
        )
    )
    WindowWidthSizeClass.Expanded -> Typography(
        bodyLarge = TextStyle(  // --------------------> Large for Expanded screens
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Light,
            fontSize = 18.sp,
            lineHeight = 24.sp,
            letterSpacing = 0.5.sp,
            hyphens = Hyphens.Auto,
            lineBreak = LineBreak.Paragraph
        )
    )
    else -> bodySmall = TextStyle(  // --------------------> Small for compact screens
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Light,
            fontSize = 14.sp,
            lineHeight = 20.sp,
            letterSpacing = 0.5.sp,
            hyphens = Hyphens.Auto,
            lineBreak = LineBreak.Paragraph
        )
}

Is there a way to get it optimally done?

0

There are 0 answers