I have strange visual artefacts appearing when I a...

# compose

[dimsuz]

I have strange visual artefacts appearing when I add elevation to the outer Surface of my Composable. I suspect this is due to the fact that this Surface has a semi-transparent color. Is this a current limitation? Or is this some other mechanizm which I've triggered and incorrectly use?

Please checkout screenshot and my composable structure in the thread.

[dimsuz]

Structure:

Surface(
  color = Colors.white30,
  shape = Shapes.large,
  elevation = 20.dp,// when adding this line, artifacts appear
) {
  Column {
    Surface(color = Colors.white) {
      CurrencyList()
    }
    Actions()
  }
}

[dimsuz]

Before/After (+artifacts)

[dimsuz]

Would be grateful for an explanation and/or a way to add elevation properly

[Adam Powell]

Android has historically considered casting a shadow behind a transparent element to be a request for undefined behavior, and elevation is a request to cast a shadow

[dimsuz]

I've also tried to add elevation only to the inner white Surface, but then this shadow gets clipped.

[Adam Powell]

yes the outer surface would clip it as content

[Adam Powell]

you might get closer to the results you're looking for by using a background on the column and omitting the containing surface

[Adam Powell]

specifically not adding a clip to that outer column

[dimsuz]

I've tried to incorporate horizontal side-padding into this composable, but then it's unclear to me how to structure it so that inner white one gets the shadow and the bigger semi-transparent one gets the padding.

[dimsuz]

oh, will try that, thanks

[dimsuz]

Yay, this worked!

Viva Compose! 🙂

[Adam Powell]

wow, that looks even nicer than I thought 😄

[Chris Sinco [G]]

So you added elevation to the inner Surface and removed it from the containing one while retaining a transparent background color?

[dimsuz]

Yes! And I followed Adam's advice and also removed outer surface completely so it's now

Column(background with shape and semitransparent color as seen on bottom buttons) {
  Surface(with elevation)
  Actions()
}

[Chris Sinco [G]]

Looks great!