I'm struggling a bit with getting a shadow to show for an image (like an elevated profile photo). I'...

# compose

[alexsullivan114]

I'm struggling a bit with getting a shadow to show for an image (like an elevated profile photo). I'm using the shadow modifier as follows:

@Composable
@Preview
private fun ProfileItem() {
  Box(modifier = Modifier.background(Color.White).padding(20.dp)) {
    Image(
        painter = painterResource(id = R.drawable.charles),
        contentScale = ContentScale.Crop,
        contentDescription = "Profile Image",
        modifier = Modifier
            .size(48.dp)
            .shadow(8.dp, CircleShape)
    )
  }
}

This results in a circular avatar-esque image, but there's no shadow.

However, if I swap out the Image Composable with a Text Composable, I see a shadow:

@Composable
@Preview
private fun ProfileItem() {
  Box(modifier = Modifier.background(Color.White).padding(20.dp)) {
    Text("Testing shadow", modifier = Modifier.size(48.dp).shadow(8.dp, CircleShape))
  }
}

I've tried playing around with padding, nesting boxes, and using a surface instead of the shadow modifier, all without any luck.

I'm sure I'm missing something obvious - any ideas?

[Chris Sinco [G]]

Hmm I see your shadow in Preview in Arctic Fox Canary 15. What do you see?

[alexsullivan114]

Interesting - I see the circular image but no shower around it. The images I'm using are quite large...could that be impacting things?

[alexsullivan114]

This is what I'm getting for reference:

[Chris Sinco [G]]

I don’t think it should since the shape in the shadow modifier will clip the image. How large is your image?

[Chris Sinco [G]]

One way I test if the shadow is there is my adding an alpha modifier right before it

[Chris Sinco [G]]

So you can see if it’s actually being drawn

[Chris Sinco [G]]

[alexsullivan114]

Oh that is interesting

[alexsullivan114]

I'm seeing something similar to the above

[alexsullivan114]

[alexsullivan114]

So I'm not sure how to interpret this - it looks like there is a shadow there. Maybe it's just so faint that I'm not seeing it with my naked eye?

[alexsullivan114]

Maybe I'm just kind of blind?

[Chris Sinco [G]]

What does the shadow look like on a physical device?

[Chris Sinco [G]]

I wonder if the rendering looks different on Preview between macOS and Windows. Since this what I see on macOS which shows a clearer shadow on the bottom edges

[Chris Sinco [G]]

Maybe I’m just kind of blind?

Ha no I think the challenge with the shadow system is it’s based on the elevation value, so sometimes it’s not always clearly there when it’s actually there. We don’t have an easy way right now to make the shadow more obvious at the moment (related thread)

[alexsullivan114]

It's not really any different on device. I think I can convince myself that I actually see the shadow now - thank you!

Another thing I'm not really grokking is like how to make the shadow more intense. And by intense I mean see more/darker shadow beneath/around the item in question. Like, if I bump elevation up to 100 or something crazy I don't see much difference, which is confusing to me.

[Chris Sinco [G]]

Another thing I’m not really grokking is like how to make the shadow more intense.

Yeah it’s not as straightforward as other systems like CSS but for a reason (see linked thread with response from Romain)

[Chris Sinco [G]]

Though the developer/designer need is real!

[romainguy]

With higher elevation your shadow will spread more but will also get “brighter”

[romainguy]

Here’s a quick and dirty visualization using a 3D renderer so you understand what happens:

[romainguy]

[romainguy]

The white rectangle is the light source, the circle our image

[romainguy]

This is with a low elevation (circle close to the background)

[romainguy]

Now with high elevation:

[romainguy]

[romainguy]

You can see how the shadow spreads more but become more diffuse/fuzzy

[romainguy]

(the dark area — the umbra — is not visible in your case because the “camera” is pointing straight down)

[Chris Sinco [G]]

How does one change the light source / “camera” position?

[romainguy]

You can’t change the camera position but you can move the light source since API 28 I think?

[romainguy]

1 sec

[romainguy]

Ah it requires to create your own HardwareRenderer

[romainguy]

val renderer = HardwareRenderer()
renderer.setSurface(targetSurface)
renderer.setContentRoot(rootRenderNode)
// Ambient shadow, direct shadow
renderer.setLightSourceAlpha(0.1f, 0.5f)

// Position X, Y, Z, radius
renderer.setLightSourceGeometry(
        width() / 2f, 0f, toPx(600f), toPx(800f))

[alexsullivan114]

I think that makes sense from a purely physics point of view. It almost feels like rather than moving the light source position, I want to like...increase the intensity of the light. That feels like it would make the shadow more itense?

[alexsullivan114]

Also I added a new word to my vocabulary: umbra! 🎉

[alexsullivan114]

Also those visualizations are great/very helpful, thank you!

[romainguy]

Increasing the light intensity won’t make the shadow darker no