Hello ! I’m trying to implement a `WebView` inside...

# compose-android

[Eslam Hussein]

Hello ! I’m trying to implement a WebView inside a ModalBottomSheet using Jetpack Compose and could use some guidance on managing the scroll behavior.
Here’s what I’m aiming for:
1. When the bottom sheet is half-expanded and the user scrolls up inside the WebView, the sheet should expand to full height.
2. When the sheet is fully expanded and the user scrolls down (with the WebView at the top), it should collapse back to half-expanded.
3. WebView should scroll smoothly when the sheet is fully expanded, without being blocked by the sheet.
4. The sheet should still be draggable to dismiss when fully expanded.
5. I need to track the WebView’s scroll position to trigger expansion or collapse accordingly.
Has anyone tackled something similar? Any ideas or tips on how to coordinate the scroll behavior between WebView and the bottom sheet in Compose?
Thanks in advance! 🙏

@Composable
internal fun MapDrawerWebSheetDialog(
    modifier: Modifier = Modifier,
    url: String

) {

    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false
    )

    BackHandler(
        onBack = {
            CommunityPlugin.navigator?.popBackStack()
        }
    )

    ModalBottomSheetWrapper(
        onDismissRequest = { CommunityPlugin.navigator?.popBackStack()},
        shouldDismissOnBackPress = true,
        sheetState = sheetState,
        modifier = Modifier.fillMaxSize()
    ) {
        val lazyListState = rememberLazyListState()

        LazyColumn(
            state = lazyListState,
            modifier = Modifier.fillMaxSize()
        ) {
            item {
                AndroidView(
                    factory = { ctx ->
                        WebView(ctx).apply {
                            layoutParams = ViewGroup.LayoutParams(
                                ViewGroup.LayoutParams.MATCH_PARENT,
                                ViewGroup.LayoutParams.MATCH_PARENT
                            )
                            applySettings()
                            webViewClient = WebViewClient()

                            isHorizontalScrollBarEnabled = true
                            overScrollMode = WebView.OVER_SCROLL_IF_CONTENT_SCROLLS

                            loadUrl(url)
                        }
                    },
                    modifier = Modifier
                        .fillMaxSize()
                )
            }
        }
    }

}

[Zach Klippenstein (he/him) [MOD]]

Please keep long code snippets to the thread, thanks!

[Zach Klippenstein (he/him) [MOD]]

I think you might be hitting this? https://issuetracker.google.com/issues/148731508

[Colton Idle]

WebView in compose + scrolling is painful.

for example At the moment, you can't do a pull to refresh in compose + webview without issues either. I guess it is the bug that zach posted about above.

[Eslam Hussein]

thanks i will check it 🙂