Jetpack Compose: Allow gestures to pass through Scaffold

1.2k Views Asked by At

I'm building an app using Scaffold for the home screen. I have a requirement that the Scaffold is over a map. (I'm using Google Maps for that. I'm using the implementation from the "Crane" app from the Compose sample apps.) The reason for this is so that even when the tab is changed, the map will remain the same.

enter image description here

I've successfully added the map and the scaffold over the top but I've run into a problem. I cannot drag the map when the scaffold is on top of it.

I know the problem isn't the map because if I remove the Scaffold then I can drag the map. I also know the problem isn't that the scaffold catches clicks because I added a clickable box under the Scaffold and was able to detect clicks on it.

I suspect that maybe the Scaffold's drawer gesture detection is consuming the gestures but I set drawerGesturesEnabled to false and still no luck.

Does anyone out there know why I can't drag my Google MapView through the Scaffold? Or have any suggestions how I might get around it?

2

There are 2 best solutions below

0
On

I had a similar issue with Webview within scaffold content and when I disabled gestures on the scaffold the scroll improved on the webview.

             Scaffold(
                drawerGesturesEnabled = false, 

The bad thing is that the drawercontent then needs to be shown by commands

0
On

I had a similar use case to cover and this worked for me. You should use BackdropScaffold

val backdropState = rememberBackdropScaffoldState(BackdropValue.Revealed)
val frontLayerHeightDp = LocalConfiguration.current.screenHeightDp / 3

BackdropScaffold(
    modifier = modifier,
    scaffoldState = backdropState,
    peekHeight = 0.dp,
    headerHeight = frontLayerHeightDp.dp,
    frontLayerShape = BottomSheetShape,
    frontLayerScrimColor = Color.Transparent,
    appBar = {},
    backLayerContent = {
        BackContent()
    },
    frontLayerContent = {
        FrontContent()
    }
)

As BackContent I used the new GoogleMap composable, just check the example on github is really easy to use.