Is there something wrong with how I'm applying thi...

# compose

[Dan Peluso]

Is there something wrong with how I'm applying this button color? I want the color (white with a 10% alpha value) to be applied to the entire button, but it looks like it's layering another white 10% alpha on the text inside my button which makes it show up like this (picture in thread)

Button(
  colors = ButtonDefaults.buttonColors(
    backgroundColor = Colors.White10 
  ),
modifier = Modifier
   .clip(RoundedCornerShape(.5.radiusDp))
) { // a single text in the button with only text color declared

[Dan Peluso]

[Kirill Grouchnikov]

Is White10 a fully opaque color?

[Dan Peluso]

this is the value for White10 - not fully opaque

Color(0x1AFFFFFF)

[Kirill Grouchnikov]

Does this button have elevation? These partial snippets are not good. If you put the whole definition of your button (all the inner content, and expanding all the color references), it will remove the need for this guessing.

[Dan Peluso]

sorry - here is the full definition, not the button does not have elevation

Button(
    onClick = {  },
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color(0x1AFFFFFF) // white 10% alpha
    ),
    modifier = Modifier
        .clip(RoundedCornerShape(.5.radiusDp))

) {
    Text(
        text = "Today",
        color = Color.White
    )
}

[Oleksandr Balan]

Actually it has, the default one, see:

fun elevation(
        defaultElevation: Dp = 2.dp,
        pressedElevation: Dp = 8.dp,
        disabledElevation: Dp = 0.dp,
        hoveredElevation: Dp = 4.dp,
        focusedElevation: Dp = 4.dp,
)

You could disable it by setting to `null`:

Button(
    elevation = null,
)

Then the issue will gone.

I am not sure if it possible to have shadows for semi-transparent surfaces 🤷

[Kirill Grouchnikov]

No, you can't combine elevation with a translucent background fill

[Dan Peluso]

Thanks @Oleksandr Balan that did it!

[Tobias Suchalla]

If you know your backgrund color, you could also use

colors = ButtonDefaults.buttonColors(
    backgroundColor = Colors.White10.compositeOver(backgroundColor)
),

which effectively gives the button a solid color and thus a working shadow.

[Tobias Suchalla]

BTW, instead of passing Modifier.clip(RoundedCornerShape(.5.radiusDp), you should use the button's shape parameter:

Button(
    onClick = {  },
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Colors.White10.compositeOver(backgroundColor)
    ),
    shape = RoundedCornerShape(.5.radiusDp)
) {
    Text(
        text = "Today",
        color = Color.White
    )
}

Clipping is more expensive than drawing the shape directly (Link).