Hey folks I m trying to add a shadow to a `Box` with a `Circ kotlinlang #compose

. My shadow is displayed but it isn’t the same shadow applied around all my shape. Can it be possible to avoid a bigger shadow at the bottom and to have the exact same shadow around all the box?

Copy code

@Composable
fun CircleProgress(
    angle: Int
) {
    Box(
        Modifier
            .fillMaxSize()
            .padding(80.dp)
            .shadow(elevation = 8.dp, shape = CircleShape)
            .background(color = Color.White, shape = CircleShape)
            .padding(10.dp)
            .drawBehind {
                drawArc(
                    color = Color.Red,
                    startAngle = -90f,
                    sweepAngle = angle.toFloat(),
                    useCenter = false,
                    style = Stroke(width = 30f, cap = StrokeCap.Round)
                )
            }
    )
}

Thanks in advance!

romainguy

03/05/2021, 8:47 PM

Elevation shadows use a light source positioned by the system that’s towards the top of the screen

In recent versions of Android you can move the light source position though (but only if you create your own renderer I believe)

🥲 1

gpaligot

03/05/2021, 8:54 PM

Guess I don’t have another choice to create a shadow without worrying about the positioning of the light source?

romainguy

03/05/2021, 9:05 PM

You could generate a shadow yourself (circular gradient, image, etc.)

But in general I would recommend using the standard shadow system to remain consistent throughout the app and the rest of the system

(you’ll also notice that shadows will be different depending on where your shadow caster is on screen since we take the position of the light into account)

gpaligot

03/05/2021, 9:43 PM

Yes, I tried to use a circular gradient but the render isn’t perfect.

I’m agree that in most case, using standard shadow system is better than custom shadow but there is some cases where a light source in the middle of the screen can be great.. ^^