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!

As you can check in the M3 [doc](https://m3.material.io/components/top-app-bar/overview#6414ed19-c273-4f32-94d5-5ef782303023): > **Elevation**: No drop shadow, instead a color fill creates separation from content — Gabriele Mariotti, Jan 08 '23 at 14:50

score 6 · Accepted Answer · answered Jan 07 '23 at 18:07

6

Have you tried it with a surface..?

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

Check the output :

answered Jan 07 '23 at 18:07

SURYA S R

320
8

Yes that looks like it works good. I can just add padding and have same result. Thank you! – Domagoj Ratko Jan 07 '23 at 18:15

Jetpack compose Scaffolds TopAppBar elevation

1 Answers1