IssueTracker

Snackbars are placed horizontally misaligned in Scaffolds when using contentWindowInsets for edge-to-edge mode. They should be placed with regards to both left and right insets so there is no overlap with system UI areas, but they are currently always left aligned inside Scaffold.

Details:

Jetpack Compose version:

BOM 2024.09.02 (androidx.compose.material:material:1.7.2)

in conjunction with androidx.activity.activity:1.9.2

Material Library Version (M2, M3 or Both?): M2

Material Compose component used:

Scaffold(contentWindowInsets = ...)

Android Studio Build: Koala 2024.1.2 Patch 1

Kotlin version: 1.9.25

Steps to Reproduce or Code Sample to Reproduce:

1. Enabled edge-to-edge mode in an activity
2. Place a Scaffold in its layout and pass content window insets to it
3. Show a snackbar using SnackbarHostState in the scaffold

The snackbar that is shown is always placed misaligned to the left side of the scaffold, disregarding any left inset that is set through contentWindowInsets. The snackbar appears to be measured correctly as its width respects the left and right inset values, but it is placed without any left margin that would be needed for the left inset. This causes the snackbar to overlap with the navigation bar or display cutout area.

See this code snippet for an MRE:

class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {
            SnackbarDemoTheme {
                val scaffoldState = rememberScaffoldState()
                val coroutineScope = rememberCoroutineScope()

                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    scaffoldState = scaffoldState,
                    topBar = {
                        TopAppBar(
                            title = { Text("Snackbar insets") },
                            windowInsets = AppBarDefaults.topAppBarWindowInsets
                        )
                    },
                    contentWindowInsets = ScaffoldDefaults.contentWindowInsets
                ) { innerPadding ->
                    Box(
                        modifier = Modifier.fillMaxSize().padding(innerPadding),
                        contentAlignment = Alignment.Center
                    ) {
                        Button(
                            onClick = {
                                coroutineScope.launch {
                                    scaffoldState.snackbarHostState.showSnackbar("Snackbar placement with insets")
                                }
                            }
                        ) {
                            Text("Show snackbar")
                        }
                    }
                }
            }
        }
    }
}

Using contentWindowInsets = ScaffoldDefaults.contentWindowInsets the snackbar overlaps with the navigation bar on a phone rotated sideways. If you change it to contentWindowInsets = WindowInsets.safeDrawing the same behavior happens with the display cutout area too.

I've attached screenshot showing the issue for both inset types.