How to add elevation shadow to SmallTopAppBar in Material3?

Question

How do I add an elevation drop shadow to the SmallTopAppBar in Material3? With the TopAppBar in Material2, you simply had to specify the elevation parameter, but how do you do it with Material3?

Answer 1

The M3 toolbars no longer use a shadow to elevate themselves. In M3 the color changes as you scroll to differentiate the toolbar from the rest of the content.

There is a sample available in the docs

Answer 2

Working with jetpack compose you typically have 3 options for shadow elevation:

1. The composable itself has a shadow elevation (Material3 uses color as mentioned by Ben)
2. The use of Modifier.shadow(elevation = X.dp)
3. Wrapping whatever is needed in a Surface composable which will give you most of the UI freedom needed (Though at this point might as well make a custom element yourself)

Hope I was able to help!