CODEWITHSUNDEEP
androidandroid-jetpack-compose
Julsapargi Nursam
Julsapargi Nursam

Reputation: 385

How to remove default padding in Text Jetpack Compose

In the android view, we can add the TextView data by:

android:includeFontPadding="false"

What is the replacement for includeFontPadding in compose ?

Upvotes: 3

Views: 4937

Answers (1)

Abhimanyu
Abhimanyu

Reputation: 14937

Use

style = TextStyle(
    platformStyle = PlatformTextStyle(
        includeFontPadding = false,
    ),
),

And Opt-in using @OptIn(ExperimentalTextApi::class).

Note: PlatformTextStyle is deprecated with the following message.

Enables turning on and off for Android includeFontPadding .

includeFontPadding was added to Android in order to prevent clipping issues on tall scripts. However that issue has been fixed since Android 28. Jetpack Compose backports the fix for Android versions prior to Android 28. Therefore the original reason why includeFontPadding was needed in invalid on Compose.
This configuration was added for migration of the apps in case some code or design was relying includeFontPadding=true behavior and will be removed.

Source: https://issuetracker.google.com/issues/171394808

Compose version: "1.2.0-beta02"

Sample code and screenshot

Sample

@OptIn(ExperimentalTextApi::class)
@Composable
fun TextWithoutPadding() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize(),
    ) {
        Text(
            text = AnnotatedString("Sample Text"),
            fontSize = 64.sp,
            style = TextStyle(
                platformStyle = PlatformTextStyle(
                    includeFontPadding = true,
                ),
            ),
            modifier = Modifier
                .background(
                    color = Cyan,
                ),
        )
        Spacer(modifier = Modifier.height(16.dp))
        Text(
            text = AnnotatedString("Sample Text"),
            fontSize = 64.sp,
            style = TextStyle(
                platformStyle = PlatformTextStyle(
                    includeFontPadding = false,
                ),
            ),
            modifier = Modifier
                .background(
                    color = Cyan,
                ),
        )
    }
}

Refer to this article for a details explanation of this topic.
https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b

Upvotes: 6

Related Questions