IssueTracker

There is a report about it in kotlinlang Slack: https://kotlinlang.slack.com/archives/C01D6HTPATV/p1706005056105739

Thanks for the report!

The release notes documentation has been edited to clarify this change in behavior for line height.

To support non-standard text sizes, we encourage users to follow the Material design system and use a different type scale rather than changing the font size directly. Alternatively, users can overwrite the line height like so: style = LocalTextStyle.current.copy(lineHeight = TextUnit.Unspecified), or create a custom Typography entirely.

In my case, I have multiple font sizes in the same Text (using SpanStyle in AnnotatedString). There are legitimate reasons for this. For example, when combining Chinese and English (phonetic) together (for language-learning purposes).

@comment#5, Can you provide sample code and which version of Material 3 you are using? I am not able to reproduce the issue. With the recent changes, NavigationBar should be able to support text of any size, so long as the component is allowed to grow in height. See the attachment for an even more extreme example.

@comment#6, this is not a Compose issue. Please provide your feedback to the Photos team in the app.

I am using basic Scaffold and NavigationBar as below:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MyApplicationTheme {
                Scaffold(
                    bottomBar = {
                        NavigationBar {
                            items.forEach { item ->
                                NavigationBarItem(
                                    selected = false,
                                    onClick = {},
                                    icon = {
                                        Icon(
                                            painter = rememberVectorPainter(image = item.icon),
                                            contentDescription = null
                                        )
                                    },
                                    label = {
                                        Text(text = item.text)
                                    }
                                )
                            }
                        }
                    }
                ) { paddingValues ->
                    Text(
                        modifier = Modifier.padding(paddingValues),
                        text = "Scaffold content"
                    )
                }
            }
        }
    }

    private val items = listOf(
        MenuItem.Home,
        MenuItem.Share,
        MenuItem.Results,
        MenuItem.Messages,
        MenuItem.Settings
    )

    private sealed interface MenuItem {
        val icon: ImageVector
        val text: String

        object Home : MenuItem {
            override val icon = Icons.Filled.Home
            override val text: String = "Home"
        }

        object Share : MenuItem {
            override val icon = Icons.Filled.Share
            override val text = "Share"
        }

        object Results : MenuItem {
            override val icon = Icons.Filled.Face
            override val text = "Your results"
        }

        object Messages : MenuItem {
            override val icon = Icons.Filled.MailOutline
            override val text = "Messages"
        }

        object Settings : MenuItem {
            override val icon = Icons.Filled.Settings
            override val text = "App preferences"
        }
    }
}

And it does not work as expected as on device as Samsung S21 it looks bad, please find the screenshot:

Can you check what version of the Material 3 library you are using?

We use BOM 2023.09.00 version at the moment.

In the following shared activity class(BottomNavigationActivity), I've used BottomNavigation and BottomNavigationItem to recreate the Google Photos design for my test application. However, when I increase the system-level text size on an Android device, the text enlarges following nonlinear scaling curve. This results in a problem where the enlarged text can overlap with or obstruct the associated icon, making it difficult to interact with the elements as intended. Furthermore, when we play with the size of the label, the impact is even more pronounced and exacerbates the issue.

Compose component versions details

implementation("androidx.compose.ui:ui:1.5.1")
implementation("androidx.compose.material:material:1.5.1")
implementation("androidx.activity:activity-compose:1.7.2")
implementation("androidx.navigation:navigation-compose:2.7.2")

@comment#10: BOM 2023.09.00 uses androidx.compose.material3:material3:1.1.1, which as you can see from comment#4 does not include the fix yet. Please use material 3 version 1.2.0-alpha02 or later to receive the fix.

@comment#11: I see the issue now. This is the Material 2 component and we recommend that users upgrade to Material 3, but I'll look into a fix for Material 2.

Thank you for your response and for making the changes to Material 2 for this.

However, I attempted to implement the Material 3 NavigationBar instead of BottomNavigation but the outcome remained largely unchanged. I've included a screenshot and the relevant code for your reference.

Can you double-check your material3 library version? The library is versioned differently than the material library. I am not able to reproduce the issue with the latest material3 version.

Here is how my libs.versions.toml looks alike

material3 = "1.1.2"
material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }

And the Gradle file looks like

dependencies {
    implementation(libs.material3)
}

Please share the configuration which works for you. I will try that at my end. Because the one which i have is not helping me out.

As seen in comment#4, the fix is in material3 version 1.2.0-alpha02 and later. Try upgrading to a version past that (the latest is version 1.2.0-alpha09) and let me know if that resolves the issue for you.

Thank you for your feedback. Everything is functioning perfectly as anticipated with library 1.2.0-alpha02.

The following release(s) address this bug.It is possible this bug has only been partially addressed:

• androidx.compose.material:material:1.6.0-alpha08
• androidx.compose.material:material-android:1.6.0-alpha08
• androidx.compose.material:material-desktop:1.6.0-alpha08