Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-material3

How to add elevation shadow to SmallTopAppBar in Material3?


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?


Solution

  • 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!