Android Jetpack Compose with Material 3 - Is there a way to automatically collapse action items to the overflow menu?

Question

The official docs for a Material 3 TopAppBar say:

When there are more than three interactive icons, the less important ones can be collapsed into an overflow menu. The overflow menu then takes the place of a third action.

Is there a mechanism that programmatically does this based on screen size and layout? Or are they referring to the designer manually choosing different TopAppBar implementations based on the different potential screen sizes?

Searching "TopAppBar collapse" only discusses the concept of how the bar is visible or not visible when scrolling vertically.

Answer 1

I think they are referring to what is considered best practices when designing such TopAppBars in Android independently from the screen sizes, and it is up to the designer to choose which icons should go in the overflow menu and which other should stay visible.

And in the TopAppBar implementation, there is no option to do it programmatically, you have to manually do that in the parameter called actions:

TopAppBar(
            title = {
                Text(
                    "Simple TopAppBar",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {

                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            }
        )

And within the actions, you can choose to provide OverflowMenu to design your Menu alongside other icons in that Row.

Hope this answers your question 🙏