https://kotlinlang.org logo
Title
m

mkrussel

04/20/2023, 8:13 PM
I'm trying to create a floating button with a background that has an alpha and an icon on it. What I'm seeing is that there is a box cut out of the background or on top that is changing the color and the change in not in the vector drawable I'm loading. I've tried different settings for tints and content color, but nothing seems to get rid of it.
Code
private val floatingBackgroundColor = Color.Black.copy(alpha = 0.30f)

    FloatingActionButton(
        onClick = onClick,
        shape = MaterialTheme.shapes.medium,
        backgroundColor = floatingBackgroundColor,
        contentColor = Color.Unspecified,
        modifier = modifier
    ) {
        Icon(
            painter = painterResource(id = icon),
            contentDescription = contentDescription,
            tint = Color.Unspecified
        )
    }
k

kevindmoore

04/20/2023, 8:16 PM
Maybe use transparent color for tint?
m

mkrussel

04/20/2023, 8:21 PM
Tried that and it didn't work.
l

Louis Pullen-Freilich [G]

04/20/2023, 9:19 PM
Looks like it’s coming from the elevation, elevation shadows with non-opaque colors look like this because of how elevation is rendered. Try removing the elevation
k

Kirill Grouchnikov

04/20/2023, 9:56 PM
Remove elevation or remove the 0.3 alpha from the background color.
m

mkrussel

04/20/2023, 10:14 PM
The elevation fixed it, thanks.