https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

08/25/2021, 8:02 PM
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 😅
Copy code
TopAppBar(
    backgroundColor = Color.Red //Works as expected
    backgroundColor = Color.Transparent //Doesn't work as expected
n

Nthily

08/25/2021, 8:22 PM
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
c

Colton Idle

08/25/2021, 8:29 PM
oooh. weird! TIL Thanks
c

Chris Sinco [G]

08/25/2021, 9:43 PM
This effect is actually seen with anything that has elevation > 0.dp when the background has any transparency
c

cb

08/25/2021, 9:45 PM
@Andrey Kulikov as we discussed this the other day
c

Colton Idle

08/25/2021, 11:30 PM
@Chris Sinco [G] just weird that it looks inset! That's what threw me off.
c

Chris Sinco [G]

08/25/2021, 11:42 PM
Yeah… it creates some illustrating optical illusions. Like this one below - my colleague thought were were introducing padding randomly via background colors 😆
Code
Copy 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()
    }
}
c

Chris Sinco [G]

08/26/2021, 12:30 AM
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
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
c

Colton Idle

08/26/2021, 1:07 AM
Alright. But the right solution here is to just set elevation to 0?
a

Albert Chang

08/26/2021, 1:32 AM
If you don't need the shadow then yes.
1
c

Colton Idle

08/26/2021, 1:49 AM
Yep. No shadow. 👌
a

Andrey Kulikov

08/26/2021, 12:00 PM
There is also possible workaround I described here: https://issuetracker.google.com/issues/196728025
c

Colton Idle

08/26/2021, 12:24 PM
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
2 Views