https://kotlinlang.org logo
#compose
Title
# compose
a

abbic

04/04/2022, 8:55 AM
hi all, I'm trying to use a BottomSheetScaffold to achieve an appearance similar to Google maps (see attached pics). it's simple enough to add the bottom sheet content with rounded edges, but I am having trouble replicating the shadow effect that you see in the screens provided. Will provide code samples in reply
Copy code
BottomSheetScaffold(
        scaffoldState = scaffoldState,
        topBar = {
            //***
        },
        content = {
            //***
        },
        sheetContent = {
            //***
        },
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetElevation = 16.dp
    )
sheet elevation doesnt accomplish anything, there is a very small shadow (doesnt look like google maps) when the sheet is "peeking", but once expanded the border isnt visible, as it has a white background on white content
a

andrew

04/04/2022, 3:20 PM
That shadow I'm pretty sure is not system elevation, it's likely a drawable, or drawn as a part of the view
I have a shadow modifier that utilizes canvas that I can provide that lets you parameterize this if you want the shadow to be predominant like this
Copy code
fun Modifier.coloredShadow(
    color: Color,
    shape: Shape,
    alpha: Float = 0.2F,
    shadowRadius: Dp = 0.dp,
    offsetY: Dp = 0.dp,
    offsetX: Dp = 0.dp,
) = composed {
    val density = LocalDensity.current

    val shadowColor = remember(color, alpha) { color.copy(alpha).toArgb() }
    val paint = remember(shadowRadius, offsetX, offsetY, shadowColor, density) { Paint().apply {
        val frameworkPaint = asFrameworkPaint()

        with(density) {
            frameworkPaint.color = Color.Transparent.toArgb()
            frameworkPaint.setShadowLayer(
                shadowRadius.toPx(),
                offsetX.toPx(),
                offsetY.toPx(),
                shadowColor
            )
        }
    }}

    drawBehind {
        drawIntoCanvas {
            it.drawOutline(
                shape.createOutline(size, layoutDirection, density),
                paint
            )
        }
    }
}
a

abbic

04/04/2022, 3:30 PM
oh wow, thanks! will it just work as is when applied to the bottomsheet content?
a

andrew

04/04/2022, 3:30 PM
You gotta pass in parameters for how you want the shadow to look
a

abbic

04/04/2022, 3:30 PM
for sure 😄
a

andrew

04/04/2022, 3:32 PM
And remember, order matters too, be careful of clipping
a

abbic

04/04/2022, 3:32 PM
indeed, thank you!
a

andrew

04/04/2022, 3:33 PM
Copy code
val shadowModifier = Modifier.coloredShadow(
        Color.Black, shape, offsetY = (-4).dp, shadowRadius = 2.dp, alpha = 0.12F
    )
Probably closer to what you want here
a

abbic

04/04/2022, 3:35 PM
i'll let you know how i get on!
a

andrew

04/04/2022, 3:36 PM
Anywhere where the shadows are softer than system elevation, is where it's used 🙂
126 Views