Search code examples
androidkotlinandroid-jetpack-composeandroid-emulator

Text Spacing Inconsistency Between Emulator and Real Device


I'm encountering a difference in text spacing between the design view in my emulator and the actual app running on a real device. The text appears to have more spacing between characters and lines in the emulator compared to the device (screenshots attached).

Text(
    modifier = Modifier.padding(25.dp).fillMaxSize(),
    text = "Park Street, San jose, California, United States ark Street, San jose, California, United States Park Street, San jose, California, United States ark Street, San jose, California, United States Park Street, San jose, California, United States ark Street, San jose, California, United States ",
    fontWeight = FontWeight.Normal,
    fontSize = 11.sp,
    color = DarkBlue1,
    overflow = TextOverflow.Ellipsis,
)

Also found out that if we run it as a preview it works in emulator but not as a full app run

Left: Emulator (Pixel 6a API 34)
Right: Real device
EMULATOR IMAGE REAL DEVICE IMAGE


Solution

  • I found the solution. The issue was due to includeFontPadding parameter in style tag. Update code as below to resolve it. Using same textview as the question

    Text(
         modifier = Modifier.padding(25.dp).fillMaxSize(),
         text = "Park Street, San jose, California, United States ark Street, San      jose, California, United States Park Street, San jose, California, United States      ark Street, San jose, California, United States Park Street, San jose, California,      United States ark Street, San jose, California, United States ",
         fontWeight = FontWeight.Normal,
         fontSize = 11.sp,
         color = DarkBlue1,
         overflow = TextOverflow.Ellipsis,
    
         platformStyle = PlatformTextStyle( includeFontPadding = false )
    
     )
    

    You can also use the same in compose material theme so it applies to whole app and you dont have to update in every Text instance like below.

    val fontStyle = TextStyle(
        platformStyle = PlatformTextStyle(
            includeFontPadding = false
        )
    )
    
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            displayLarge = fontStyle,
            displayMedium = fontStyle,
            displaySmall = fontStyle,
            headlineLarge = fontStyle,
            headlineMedium = fontStyle,
            headlineSmall = fontStyle,
            titleLarge = fontStyle,
            titleMedium = fontStyle,
            titleSmall = fontStyle,
            bodyLarge = fontStyle,
            bodyMedium = fontStyle,
            bodySmall = fontStyle,
            labelLarge = fontStyle,
            labelMedium = fontStyle,
            labelSmall = fontStyle,
        ),
        content = content
    )
    

    Answering my own question. Bruh..