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

dimsuz

06/02/2021, 5:22 PM
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.
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
a

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
d

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

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
d

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
a

Adam Powell

06/02/2021, 5:40 PM
wow, that looks even nicer than I thought 😄
👌 1
c

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?
d

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
c

Chris Sinco [G]

08/26/2021, 4:49 PM
Looks great!
3 Views