CODEWITHSUNDEEP
androidandroid-jetpack-compose
Dương Minh
Dương Minh

Reputation: 2421

Remove font padding in Android Compose

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.

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?

Upvotes: 2

Views: 3335

Answers (2)

Dương Minh
Dương Minh

Reputation: 2421

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:

includeFontPadding = false

The result when includeFontPadding = true or no using it:

includeFontPadding = true or not using

More information:

Fixing Font Padding in Compose Text - Medium

Upvotes: 1

Silverback
Silverback

Reputation: 96

The Japanese font Noto Sans JP does show an unusual amount of extra white-space or gap above the first line of text when displayed on a screen:

NotoSans-font-with-gap

However, this gap can be reduced by including a negative padding offset in the Text() composable - see 'modifier' parameter below:

@Composable
fun Greeting() {
    Text(
        text = "地域のお得は\nすべてここに",
        fontFamily = NotoSans,
        style = Typography.h4,
        textAlign = TextAlign.Center,
        modifier = Modifier
            .padding(top = 0.dp).offset(y = (-30).dp)
    )
}

This results in the same text being displayed, but without the gap:

NotoSans-font-without-gap

If you would like to adjust the line spacing between the lines then you can add the "lineHeight" parameter to either the TextStyle() composable in the 'Type.kt' file or the Text() composable in the 'MainActivity.kt' file, as required; e.g. in this instance "lineHeight = 80.sp":

NotoSans-font-with-line-spacing

Hope this is helpful to someone!

Upvotes: 0

Related Questions