Trying to add a shadow to one item, but I notice that in every way I’ve tried so far, the shadow is ...

# compose

[Stylianos Gakis]

Trying to add a shadow to one item, but I notice that in every way I’ve tried so far, the shadow is interfering with the color of the item itself, instead of only showing around (so behind) the item itself. More in thread 🧵

[Stylianos Gakis]

Expected result looks something like this

[Stylianos Gakis]

But when I do this

Box(
  contentAlignment = Alignment.Center,
  modifier = Modifier
    .size(72.dp)
    .background(Color(0xFFF5F5F5), CircleShape) // tried background before shadow
    .shadow(
      elevation = 10.dp,
      shape = CircleShape,
    )
    .background(Color(0xFFF5F5F5), CircleShape) // tried background after shadow too
) {
  Canvas(Modifier.size(32.dp)) {
    drawCircle(recordingColor)
  }
}

I get this result instead

[Stylianos Gakis]

Them side by side. The “good” one is just using a vector resource which doesn’t seem to be affected at all by the shadow.

[Oleksandr Balan]

Maybe M3 tonal elevation does this?
https://m3.material.io/styles/elevation/overview

Do not know how to opt-out though 🙈

[Stylianos Gakis]

I wouldn’t think so, since in these cases I am using nothing from m3, shadow is a Modifier inside androidx.compose.ui.draw and I am using normal Boxes everywhere.
Even tried something like this

Box(
  contentAlignment = Alignment.Center,
) {
  Box(
    modifier = Modifier
      .size(72.dp)
      .shadow(
        elevation = 20.dp,
        shape = CircleShape,
        clip = false,
      ),
  )
  Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier.size(72.dp).background(Color(0xFFF5F5F5), CircleShape),
  ) {
    Box(
      Modifier.size(32.dp).background(MaterialTheme.colorScheme.error, CircleShape),
    )
  }
}

Same result 😅

I am just really interested how the image vector doesn’t get affected by this when calling it using just Image(painter = painterResource(R.drawable.ic_record))

[Stylianos Gakis]

Hmm I could be very stupid actually and the fact that they are next to each other means that one of them casts their shadow to the other one 😂
Putting them apart makes them look much closer to each other if not identical, so either I am seeing double, or I don’t know 😂 Will write here again if I am sure about what I am seeing here

[Stylianos Gakis]

Lesson learned. If I start a thread, and I see your face in the replies, I know I am doing something very silly 😅

[Oleksandr Balan]

Ahaha, lol 😅