Is there any reason when I have circle button with...

# compose-desktop

[Yofou]

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▾

[Denis]

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

[Kirill Grouchnikov]

Transparent / translucent content doesn't go well (at all, actually) with elevation drop shadows

[Yofou]

@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

[Yofou]

If it is shadow or elavation that's causing the octogon affect I can't seem to control it in anway

[Yofou]

@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!

[Denis]

@Kirill Grouchnikov, could you give any reasons for that? Is it because shadows are hard in general? (I know nothing about computer graphics)

[Kirill Grouchnikov]

@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.

[romainguy]

It’s not overlapping shapes no, it’s a mesh

[romainguy]

But given the way it’s generated it indeed wouldn’t look right with translucent content, especially if translucency vary per pixel

[romainguy]

(the effect is basically raycasting an area light through the vertices of the shadow caster’s outline)

[Kirill Grouchnikov]

There was a nice image I saw around the Lollipop timeframe. Was there a white paper or something on the implementation details?