Android Compose webview is stretched

Viewed 418

I want to create with Jetpack Compose a dinamic header that should resize when user scrolls on the main screen content section. The dynamic header works fine, but I have some problem with a WebView.: with Compose when the WebView is rendered, it is stretched and any popup shown to the user are out of the main viewport.

This is an implementation using the old-style XML layout:

Xml layout

We have on the top the fake green dynamic header. The webview is loaded with an initial popup centered into the available screen, as expected.

With compose, the result is the following:

Compose

On the top there is the fake gray dynamic header, but the webview is "stretched", and the initial popup is not centered.

This happens also with a stand-alone WebView, without the dynamic header on top, so this is not an issue created by the dynamic header.

Without dynamic header

The implementation of the WebView is pretty simple

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun PageBodyWithWebView(
    scrollState: ScrollState,
) {
    val context = LocalContext.current
    AndroidView(
        modifier = Modifier
            .verticalScroll(scrollState)
            .fillMaxWidth()
            .fillMaxHeight(), 
        factory = {
            WebView(context).apply {
                settings.javaScriptEnabled = true
                loadUrl(pageUrl)
            }
        })
}

So what is wrong with this? How we can center the webview, so the user can see all the popup as expected?

1 Answers
Related