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

Dan Peluso

05/16/2022, 2:56 PM
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)
Copy code
Button(
  colors = ButtonDefaults.buttonColors(
    backgroundColor = Colors.White10 
  ),
modifier = Modifier
   .clip(RoundedCornerShape(.5.radiusDp))
) { // a single text in the button with only text color declared
k

Kirill Grouchnikov

05/16/2022, 2:58 PM
Is
White10
a fully opaque color?
d

Dan Peluso

05/16/2022, 2:59 PM
this is the value for White10 - not fully opaque
Copy code
Color(0x1AFFFFFF)
k

Kirill Grouchnikov

05/16/2022, 3:02 PM
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.
d

Dan Peluso

05/16/2022, 3:05 PM
sorry - here is the full definition, not the button does not have elevation
Copy code
Button(
    onClick = {  },
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color(0x1AFFFFFF) // white 10% alpha
    ),
    modifier = Modifier
        .clip(RoundedCornerShape(.5.radiusDp))

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

Oleksandr Balan

05/16/2022, 3:25 PM
Actually it has, the default one, see:
Copy code
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`:
Copy code
Button(
    elevation = null,
)
Then the issue will gone. I am not sure if it possible to have shadows for semi-transparent surfaces 🤷
👍 1
k

Kirill Grouchnikov

05/16/2022, 3:26 PM
No, you can't combine elevation with a translucent background fill
😞 1
d

Dan Peluso

05/16/2022, 5:26 PM
Thanks @Oleksandr Balan that did it!
👍 1
t

Tobias Suchalla

05/17/2022, 5:42 AM
If you know your backgrund color, you could also use
Copy code
colors = ButtonDefaults.buttonColors(
    backgroundColor = Colors.White10.compositeOver(backgroundColor)
),
which effectively gives the button a solid color and thus a working shadow.
BTW, instead of passing
Modifier.clip(RoundedCornerShape(.5.radiusDp)
, you should use the button's
shape
parameter:
Copy code
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).
today i learned 1
3 Views