TopAppBar does not drop shadow

Question

I have a TopAppBar within my Scaffold in my composable, but it is not droping a shadow as it is supposed to do:

@Composable
fun MainScreen(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = stringResource(id = R.string.appName)) },
            )
        }
    ) {
        Text("Composable content")
    }
}

Even if I manually set an elevation it does not drop any shadow:

    TopAppBar(
        title = { Text(text = stringResource(id = R.string.appName)) },
        elevation = 4.dp
    )

What needs to be done so the AppBar drops a shadow?

user_10511409 · Answer

Can you try this in Box ?

Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.White,
    ) {
        Column (){
            Box(modifier = Modifier.height(80.dp)) {
                TopAppBar(
                    backgroundColor = Color.White,
                    title = { Text("Title") },
                    elevation = 10.dp
                )
            }
            Text(text = "Composable content", style = TextStyle(
                color = Color.Black
            ))
        }
    }

user_12084802 · Answer

For those looking for the shadow)

If we look in the layout inspector we can see that topbar will be below content in the hierarchy. And no matter what elevation you will use no shadow will appear. At least in compose 1.1.1.

So to see the shadow move TopAppBar from Scaffold parameter to bottom of your content composable

Scaffold() {
Box(){
... some content
TopAppBar()
}
}

TopAppBar does not drop shadow

2 Answers