Is there a way to add a shadow to a component but ...

# compose

[Dan Peluso]

Is there a way to add a shadow to a component but only on one side? I know there's the .shadow Modifier extension but I'm looking for one that can add a shadow to only the bottom edge

[mgrazianodecastro]

try this:

fun Modifier.advancedShadow(
    color: Color = Color.Black,
    alpha: Float = 0f,
    cornersRadius: Dp = 0.dp,
    shadowBlurRadius: Dp = 0.dp,
    offsetY: Dp = 0.dp,
    offsetX: Dp = 0.dp
) = drawBehind {

    val shadowColor = color.copy(alpha = alpha).toArgb()
    val transparentColor = color.copy(alpha = 0f).toArgb()

    drawIntoCanvas {
        val paint = Paint()
        val frameworkPaint = paint.asFrameworkPaint()

        frameworkPaint.color = transparentColor
        frameworkPaint.setShadowLayer(
            shadowBlurRadius.toPx(),
            offsetX.toPx(),
            offsetY.toPx(),
            shadowColor
        )

        it.drawRoundRect(
            0f,
            0f,
            this.size.width,
            this.size.height,
            cornersRadius.toPx(),
            cornersRadius.toPx(),
            paint
        )
    }
}

I got this solution in this channel, I don't remember quite from who

[romainguy]

It will only work from API 29

[mgrazianodecastro]

yep, the boss knows best /\

[Dan Peluso]

Thanks folks! Unfortunately we have a lower API level than that so looks like I need to keep searching lol

[romainguy]

You could use software rendering to generate the shadow in a bitmap

[romainguy]

Or you could use a 9 patch

[romainguy]

Or depending on the shape that casts the shadow you could use gradients