A modern programming language that makes developers happier.

kotlinlang

floating_button.png

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
        )
    }```

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

Remove elevation or remove the 0.3 alpha from the background color.