android - In jetpack compose how to resize text so it fits in one line - Stack Overflow

I'm doing my first jetpack compose project and in title screen and some other parts I want to have "header" texts that consists of one word and are bigger than usual text. When I was testing them on emulator it was fine but when I tried to test on my physical device few last characters were in next line because they didn't fit. So my question is, how can I resize the text so it fits in one line on every device.

here's my typography:

val Typography = Typography(
    headlineMedium = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 36.sp,
        lineHeight = 36.sp,
        letterSpacing = 1.sp
    ),
    labelLarge = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 32.sp,
        lineHeight = 32.sp,
        letterSpacing = 0.5.sp
    ),
    labelMedium = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 28.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.5.sp
    ),
    labelSmall = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Medium,
        fontSize = 24.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    ),
    titleMedium = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 36.sp,
        lineHeight = 50.sp,
        letterSpacing = 6.sp
    ),
    titleSmall = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 32.sp,
        lineHeight = 40.sp,
        letterSpacing = 4.sp
    ),
    titleLarge = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 40.sp,
        lineHeight = 60.sp,
        letterSpacing = 8.sp
    ), )

I'm doing my first jetpack compose project and in title screen and some other parts I want to have "header" texts that consists of one word and are bigger than usual text. When I was testing them on emulator it was fine but when I tried to test on my physical device few last characters were in next line because they didn't fit. So my question is, how can I resize the text so it fits in one line on every device.

here's my typography:

val Typography = Typography(
    headlineMedium = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 36.sp,
        lineHeight = 36.sp,
        letterSpacing = 1.sp
    ),
    labelLarge = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 32.sp,
        lineHeight = 32.sp,
        letterSpacing = 0.5.sp
    ),
    labelMedium = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 28.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.5.sp
    ),
    labelSmall = TextStyle(
        fontFamily = customFontFamily,
        fontWeight = FontWeight.Medium,
        fontSize = 24.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    ),
    titleMedium = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 36.sp,
        lineHeight = 50.sp,
        letterSpacing = 6.sp
    ),
    titleSmall = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 32.sp,
        lineHeight = 40.sp,
        letterSpacing = 4.sp
    ),
    titleLarge = TextStyle(
        fontFamily = stylizedCustomFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 40.sp,
        lineHeight = 60.sp,
        letterSpacing = 8.sp
    ), )

• android
• kotlin
• android-jetpack-compose

Share Improve this question Follow asked Jan 2 at 13:57 MirageDreamerMirageDreamer 1 1

• I think you are looking for AutoResizeText which is not available out of box in compose as of now. However you can follow below link. gist.github.com/inidamleader/b594d35362ebcf3cedf81055df519300 – Moinkhan Commented Jan 2 at 15:32

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Use BoxWithConstraints for adjusting the font size and getting screen size constraints. And for measuring purpose, you can use TextMeasurer or onTextLayout callback to determine if your texts are fitting within the available width and also set a minimum font size to avoid text becoming unreadable.