IssueTracker

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

• androidx.compose.material:material:1.5.0-beta01
• androidx.compose.material3:material3:1.2.0-alpha02
• androidx.compose.material3:material3-android:1.2.0-alpha02

Hi, For sure it is better, but with 5 items we can still reproduce this without even the larger font. Could you please fix that so the text do not overlap the icon?

It seems with the introduction of enhanced font scaling capabilities up to 200% in Android 14, the issue persists. You can refer to the provided Google Photos image for more information.

Google Photo APP version: 6.54.0.566308615

As mentioned in the release note, the system has embraced a non-linear scaling curve. This approach yields a situation in which larger text components do not undergo scaling in proportion to smaller text components. For instance, a header text element may remain unaffected by size changes, while the smaller text positioned below the header may enlarge. Similarly, it appears the BottomNavigation component at the bottom is also influenced by this non-linear scaling in a similar manner. And thus text is cut-off by the image placed in the group.

@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