[FIXED] Remove font padding in Android Compose

Issue

I'm having problems with Japanese font types. Specifically with the font Noto Sans JP. When I apply the font to Text, I see that the vertical padding of the font seems too wide.

src="https://i.stack.imgur.com/0TssL.png" alt="Example" />

Here is my text display code:

Text(
    text = "地域のお得は\nすべてここに",
    style = Typography.h4,
)

// Typography
val Typography = Typography(
    ...
    h4 = TextStyle(
        fontFamily = NotoSans,
        fontWeight = FontWeight.Normal,
        fontSize = 34.sp,
        letterSpacing = 0.25.sp
    ),
    ...
)

// Import font
private val NotoSans = FontFamily(
    Font(R.font.noto_sans_black, FontWeight.Black),
    Font(R.font.noto_sans_light, FontWeight.Light),
    Font(R.font.noto_sans_bold, FontWeight.Bold),
    Font(R.font.noto_sans_thin, FontWeight.Thin),
    Font(R.font.noto_sans_medium, FontWeight.Medium),
    Font(R.font.noto_sans_regular, FontWeight.Normal),
)

Link font: Noto Sans JP

I want to remove vertical padding of Text. With Android Baseview, there is includeFontPadding = false attribute to remove font padding. But with Android Compose I can't find any properties with similar functionality.

So in Android Compose, is there a way to remove the vertical padding of the font?

Solution

I found the solution for my question. By using Compose 1.2.0-alpha07 and above, you can use PlatformTextStyle api to set includeFontPadding.

Try to the below code:

private val NotoSans = FontFamily(
    Font(R.font.noto_san_jp_black, FontWeight.Black),
    Font(R.font.noto_san_jp_light, FontWeight.Light),
    Font(R.font.noto_san_jp_bold, FontWeight.Bold),
    Font(R.font.noto_san_jp_thin, FontWeight.Thin),
    Font(R.font.noto_san_jp_medium, FontWeight.Medium),
    Font(R.font.noto_san_jp_regular, FontWeight.Normal),
)

val Typography = Typography(
    headlineLarge = Typography().headlineLarge.copy(
        fontFamily = NotoSans,
    )
)

@OptIn(ExperimentalTextApi::class)
/* ... */

Text(
    text = "地域のお得は\nすべてここに",
    style = MaterialTheme.typography.headlineLarge.copy(
        platformStyle = PlatformTextStyle(
            includeFontPadding = false
        )
    /* ... */
    )
)

The result when includeFontPadding = false:

The result when includeFontPadding = true or no using it:

More information:

Fixing Font Padding in Compose Text - Medium

Answered By - Dương Minh
Answer Checked By - Marie Seifert (JavaFixing Admin)