Top app bar with a background color shows as expected, but if I set it to transparent then I get thi...

# compose

[Colton Idle]

Top app bar with a background color shows as expected, but if I set it to transparent then I get this inset/shadowed look. Am I misusing TopAppBar in some way? I just want to be able to show the content underneath it 😅

TopAppBar(
    backgroundColor = Color.Red //Works as expected
    backgroundColor = Color.Transparent //Doesn't work as expected

[Nthily]

Yes, it seems that setting to Color.Transparent will have elevation, you can set the elevation in the TopAppBar parameter to 0.dp again, and it can be the expected effect

[Colton Idle]

oooh. weird! TIL Thanks

[Chris Sinco [G]]

This effect is actually seen with anything that has elevation > 0.dp when the background has any transparency

[cb]

@Andrey Kulikov as we discussed this the other day

[Colton Idle]

@Chris Sinco [G] just weird that it looks inset! That's what threw me off.

[Chris Sinco [G]]

Yeah… it creates some illustrating optical illusions. Like this one below - my colleague thought were were introducing padding randomly via background colors 😆

[Chris Sinco [G]]

Code

Card(
    modifier = Modifier
        .size(width = 192.dp, height = 56.dp),
        .elevation = 12.dp,
    backgroundColor = Color.Transparent,
) {
    Row(
       verticalAlignment = Alignment.CenterVertically,
       horizontalArrangement = Arrangement.Center
    ) {
       content()
    }
}

[Albert Chang]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1622654756178300?thread_ts=1622654565.176700&cid=CJLTWPH7S

[Chris Sinco [G]]

I’ve found what can help is using the drawBehind modifier as an overlay, in cases where designers give you colors with transparency meant to be used as fill colors for a component that also has elevation

[Chris Sinco [G]]

But in that linked thread, that wouldn’t work so well if you are trying to get that nice background gradient showing through as well

[Colton Idle]

Alright. But the right solution here is to just set elevation to 0?

[Albert Chang]

If you don't need the shadow then yes.

[Colton Idle]

Yep. No shadow. 👌

[Andrey Kulikov]

There is also possible workaround I described here: https://issuetracker.google.com/issues/196728025

[Colton Idle]

Thanks. Glad I wasn't going crazy. I wonder if it's worth having a lint check for this to help guide others. I think in most cases when someone wants a transparent topAppBar it's because you want to put some sort of image underneath.

In that same vain... Are there any examples of a transparent topAppBar with large image behind it that transforms into a solid colored topAppBar on scroll? I.e. collapsing toolbar