hi all, I'm trying to use a BottomSheetScaffold to achieve an appearance similar to Google maps (see...

# compose

[abbic]

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

[abbic]

BottomSheetScaffold(
        scaffoldState = scaffoldState,
        topBar = {
            //***
        },
        content = {
            //***
        },
        sheetContent = {
            //***
        },
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetElevation = 16.dp
    )

[abbic]

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

[andrew]

That shadow I'm pretty sure is not system elevation, it's likely a drawable, or drawn as a part of the view

[andrew]

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

[andrew]

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
            )
        }
    }
}

[abbic]

oh wow, thanks! will it just work as is when applied to the bottomsheet content?

[andrew]

You gotta pass in parameters for how you want the shadow to look

[abbic]

for sure 😄

[andrew]

And remember, order matters too, be careful of clipping

[abbic]

indeed, thank you!

[andrew]

[andrew]

val shadowModifier = Modifier.coloredShadow(
        Color.Black, shape, offsetY = (-4).dp, shadowRadius = 2.dp, alpha = 0.12F
    )

[andrew]

Probably closer to what you want here

[abbic]

i'll let you know how i get on!

[andrew]

Anywhere where the shadows are softer than system elevation, is where it's used 🙂

[sharif saleh]

@abbic
how do you place the image on top of the bottomsheet and move it as the bottomsheet expands?
this part i mean

[andrew]

That's in Google maps

[andrew]

But you could probably put the bottom sheet contents and the image in a box, turn off clipping, and transform the image up