https://kotlinlang.org logo
Title
y

Yofou

02/16/2021, 4:01 PM
Is there any reason when I have circle button with opacity an octogon apears inside?
@Composable
fun NavButton() {
    Button(
        onClick = {  },
        shape = CircleShape,
        modifier = Modifier.size(50.dp),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Gray.copy(.25f),
            contentColor = Color.White
        )
    ) {
//        Text("Test")
    }
}

https://i.gyazo.com/10d11bca3ece67959cc9a44ab6aa9667.png

d

Denis

02/16/2021, 4:05 PM
I can't see the picture well, but if it has any shadow, I suppose it's what you see there. I tried to make a floating action button (on Android) transparent, but got the same octagon
k

Kirill Grouchnikov

02/16/2021, 4:11 PM
Transparent / translucent content doesn't go well (at all, actually) with elevation drop shadows
y

Yofou

02/16/2021, 4:13 PM
@Denis Thanks for the suggestion, but I did end up testing by trying to forcing the elvatation and shadow modifer to be 0 and it still has that octogon affect inside, also if you click the link and scroll in, the octogon is very apparent
If it is shadow or elavation that's causing the octogon affect I can't seem to control it in anway
@Denis @Kirill Grouchnikov Actually I take this back, I wasn't thinking straight and as soon as I use the button elevation properity, instead of the modifier it fixes it, Thank you so much!
🎉 1
d

Denis

02/16/2021, 4:20 PM
@Kirill Grouchnikov, could you give any reasons for that? Is it because shadows are hard in general? (I know nothing about computer graphics)
k

Kirill Grouchnikov

02/16/2021, 5:35 PM
@romainguy has a presentation (or maybe slides?) on how the drop shadows are implemented in native code. It's basically a bunch of overlapping translucent shapes that create the overall effect. But that overlap only looks "right" with a fully opaque shape that "hides" the rest of the visuals.
:thank-you: 1
r

romainguy

02/16/2021, 5:36 PM
It’s not overlapping shapes no, it’s a mesh
But given the way it’s generated it indeed wouldn’t look right with translucent content, especially if translucency vary per pixel
(the effect is basically raycasting an area light through the vertices of the shadow caster’s outline)
:thank-you: 1
k

Kirill Grouchnikov

02/16/2021, 5:47 PM
There was a nice image I saw around the Lollipop timeframe. Was there a white paper or something on the implementation details?