I have strange visual artefacts appearing when I add elevati kotlinlang #compose

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.

Structure:

Copy code

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

Before/After (+artifacts)

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

Adam Powell

06/02/2021, 5:25 PM

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

06/02/2021, 5:27 PM

I've also tried to add elevation only to the inner

white

Surface, but then this shadow gets clipped.

Adam Powell

06/02/2021, 5:28 PM

yes the outer surface would clip it as content

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

specifically not adding a clip to that outer column

dimsuz

06/02/2021, 5:30 PM

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.

oh, will try that, thanks

Yay, this worked! Viva Compose! 🙂

🦜 7

Adam Powell

06/02/2021, 5:40 PM

wow, that looks even nicer than I thought 😄

👌 1

Chris Sinco [G]

08/26/2021, 12:29 AM

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

dimsuz

08/26/2021, 12:17 PM

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

Copy code

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

👍 1

Chris Sinco [G]

08/26/2021, 4:49 PM

Looks great!

3 Views