Jetpack compose Scaffolds TopAppBar elevation

Question

Trying to add elevation to my TopAppBar in Scaffold topBar. Using Jetpack compose, material 3.

This is how it worked before:

TopAppBar(
        title = {
            Text(text = title)
        },
        elevation = 3.dp //Not valid anymore
    )

Current allowed parameters in TopAppBar are:

public fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier,
    navigationIcon: @Composable () -> Unit,
    actions: @Composable() (RowScope.() -> Unit),
    windowInsets: WindowInsets,
    colors: TopAppBarColors,
    scrollBehavior: TopAppBarScrollBehavior?
): Unit

This is what I have:

This is what I need:

It could be done before using parameter to pass elevation but that is not option anymore.

What would be solution to elevate whole TopAppBar? Thanks in advance!

Profusion

As you can check in the M3 doc: > Elevation: No drop shadow, instead a color fill creates separation from content – Excision

Answer 1

Have you tried it with a surface..?

Scaffold(topBar = {
    Surface(shadowElevation = 3.dp) {
        SmallTopAppBar(title = {
            Text(
                text = "title"
            )
        })
    }
}) {
// Content
}

Check the output :

Propend

Yes that looks like it works good. I can just add padding and have same result. Thank you! – Profusion

Do we really need to wrap it additional Surface? – Smithy

Answer 2

this works very well for me:

TopAppBar(modifier = Modifier
            .padding(10.dp)
            .shadow(
                elevation = 5.dp,
                spotColor = Color.DarkGray,
                shape = RoundedCornerShape(10.dp)
            ))

Hampden

Answer 3

**Add Elevation with Modifier like below **

TopAppBar(
    modifier = Modifier.shadow(elevation=elevation),
     title = {
        Text(
            text = tittle,
            style = TextStyle(color = MaterialTheme.colorScheme.secondary)
        )
    })

Oligarchy