Android compose material3 dropdown menu bug on landscape?

Question

Is this behaviour a bug with the experimental material3 features on Android 16?

When the app is portrait mode everything works correctly on Android 15 and 16.

When the app is in landscape mode Android 15 works correctly but Android 16 does not.

e.g. DropMenu on Android 15 Landscape is aligned with the Button
enter image description here

DropMenu on Android 16 Landscape is Not aligned with the Button

enter image description here

Compose Code

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.github.zardozz.material3scafold.ui.theme.Material3ScafoldTheme


class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Material3ScafoldTheme {
                Scaffold(modifier = Modifier.safeDrawingPadding(),
                    topBar = {
                    TopAppBar(
                        colors = topAppBarColors(
                            containerColor = MaterialTheme.colorScheme.primary,
                            titleContentColor = MaterialTheme.colorScheme.onSecondary,
                        ),
                        title = {
                            Text("Top app bar")
                        },
                        actions = {
                            ActionDropdownMenu()
                        },
                    )
                },
                ) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun ActionDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    IconButton(onClick = { expanded = !expanded }) {
        Icon(Icons.Filled.MoreVert,
            contentDescription = "More options",
            tint = Color.White)
    }
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
    ) {
        DropdownMenuItem(
            text = { Text("Option 1") },
            onClick = { /* Do something... */ }
        )
        DropdownMenuItem(
            text = { Text("Option 2") },
            onClick = { /* Do something... */ }
        )
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Material3ScafoldTheme {
        Greeting("Android")
    }
}

Or have I done something wrong?

I doubt you've done anything wrong. Could you try it on a device or an emulator without a camera punch hole or camera notch? Maybe like a Pixel 3a. I suspect the some edge to edge calculations are interfering with how the Dropdown/Popup is rendered on Android 16 — Mofe Ejegi
– Mofe Ejegi, Commented Mar 19 at 10:31
Thanks @MofeEjegi I've tried it on a Pixel 3a emulator and it works correctly, I've tried it with 3 button navigation off, without Modifier.safeDrawingPadding(), with a Box around the iconbutton and dropdown menu, nothing works. It seems to be a problem probably with Dropdownmenu and camera notches — Andrew
– Andrew, Commented Mar 19 at 10:51
Oh you've already tested it? Alright, I tried to provide an easier way to test in my answer, but like you've already seen, it's probably an issue you may have to report. Thanks for discovering it. — Mofe Ejegi
– Mofe Ejegi, Commented Mar 19 at 11:02

Mofe Ejegi · Accepted Answer · 2026-03-19 11:00:23Z

So I tried the scenario on different devices and emulators and noticed that the additional padding given to the DropDownMenu was equivalent to the size of the Camera cutout.

A simple way to check this would be:

Go to Settings > System > Developer options.
Look for "Display cutout" (sometimes called "Simulate a display with a cutout").
Select "Waterfall cutout". This will force the system to remove insets even in portrait, and especially in landscape.

And that gives you something like this:

With the Device default cutout, you get back to the original issue you had:

Manipulating insets doesn't seem to work in this situation so your best bet would be to report this as an issue on Google.

Reported to Google as issuetracker.google.com/issues/493938737

Collectives™ on Stack Overflow

Android compose material3 dropdown menu bug on landscape?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related