d

    dimsuz

    1 year ago
    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:
    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

    Adam Powell

    1 year ago
    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

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

    Adam Powell

    1 year ago
    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

    1 year ago
    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! 🙂
    Adam Powell

    Adam Powell

    1 year ago
    wow, that looks even nicer than I thought 😄
    Chris Sinco [G]

    Chris Sinco [G]

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

    dimsuz

    1 year ago
    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]

    Chris Sinco [G]

    1 year ago
    Looks great!