Colton Idle

    Colton Idle

    1 year ago
    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

    Nthily

    1 year ago
    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

    Colton Idle

    1 year ago
    oooh. weird! TIL Thanks
    Chris Sinco [G]

    Chris Sinco [G]

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

    cb

    1 year ago
    @Andrey Kulikov as we discussed this the other day
    Colton Idle

    Colton Idle

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

    Chris Sinco [G]

    1 year ago
    Yeah… it creates some illustrating optical illusions. Like this one below - my colleague thought were were introducing padding randomly via background colors 😆
    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()
        }
    }
    Chris Sinco [G]

    Chris Sinco [G]

    1 year ago
    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
    Colton Idle

    Colton Idle

    1 year ago
    Alright. But the right solution here is to just set elevation to 0?
    Albert Chang

    Albert Chang

    1 year ago
    If you don't need the shadow then yes.
    Colton Idle

    Colton Idle

    1 year ago
    Yep. No shadow. 👌
    Andrey Kulikov

    Andrey Kulikov

    1 year ago
    There is also possible workaround I described here: https://issuetracker.google.com/issues/196728025
    Colton Idle

    Colton Idle

    1 year ago
    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