IssueTracker

Jetpack Compose release version: 1.0.0-beta06

Android Studio Build: Android Studio Arctic Fox | 2020.3.1 Canary 15

Build #AI-203.7717.56.2031.7321754, built on April 29, 2021

Runtime version: 11.0.10+0-b96-7281165 x86_64

It seems that BottomSheetScaffold's content is overlapping topBar's elevation. Minimal code to reproduce:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun GoodElevation() {
    Scaffold(
        topBar = {
            TopAppBar(backgroundColor = MaterialTheme.colors.background) { Text(text = "The good") }
        },
    ) {
        Surface(modifier = Modifier.fillMaxSize()) {}
    }
}

@Composable
fun BadElevation() {
    val scaffoldState = rememberBottomSheetScaffoldState()
    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(backgroundColor = MaterialTheme.colors.background) { Text(text = "The bad") }
        },
        sheetContent = {
            Box(modifier = Modifier.height(250.dp)) { Text("whatever") }
        }
    ) {
        Surface(modifier = Modifier.fillMaxSize()) {}
    }
}

@Preview
@Composable
fun TheGoodPreview() {
    GoodElevation()
}

@Preview
@Composable
fun TheBadPreview() {
    BadElevation()
}