Android WebView in Compose Not Displaying Certain Pages Properly

Question

I'm facing an issue with the WebView in my Android Compose application. While the WebView works perfectly on iOS, in the browser, and with Flutter WebView on both Android and iOS, certain websites break and become unresponsive when using the WebView with Compose and Kotlin.

Here's the code I'm using:

@SuppressLint("SetJavaScriptEnabled")
@Composable
internal fun WebView(downloadListener: SDKDownloadListener, modifier: Modifier = Modifier) {
    var showSplash by remember { mutableStateOf(true) }

    Box(modifier = modifier) {
        AndroidView(
            factory = { context ->
                WebView(context).apply {
                    // Clear various caches and preferences
                    clearCache(true)

                    // Configure WebView settings
                    settings.apply {
                        javaScriptEnabled = true
                        domStorageEnabled = true
                        databaseEnabled = true
                        allowContentAccess = true
                        allowFileAccess = true
                    }

                    // Set WebView properties
                    webViewClient = WebViewClient()
                    webChromeClient = WebChromeClient()

                    // Set download listener
                    setDownloadListener(downloadListener)

                    // Add JavaScript interface
                    addJavascriptInterface(EventListenerJavascriptInterface(), JAVASCRIPT_INTERFACE)

                    // Load URL with POST data
                    postUrl("https://post.dev", body)
                }
            },
            modifier = Modifier.matchParentSize(),
        )

        // Splash screen with animation
        AnimatedVisibility(
            visible = showSplash,
            exit = slideOutVertically(targetOffsetY = { it }) + fadeOut(),
            modifier = Modifier.matchParentSize()
        ) {
            SplashView(onButtonPress = { showSplash = false })
        }
    }
}

Tried:

Clearing cache, setting javascript enabled, enabling database etc.
Checking for any JavaScript errors on the websites.

Despite these efforts, certain websites still break and are unresponsive. Has anyone encountered a similar issue or can provide insights into what might be going wrong? Any help would be appreciated!

Additional Information: The same websites work fine on iOS and in the browser. Flutter WebView works perfectly on both Android and iOS with the same websites.

yes im having exact same problem atm in a jetpack compose app (a login webpage not displaying correctly, but renders fine in say chrome). would love to know how to solve this too — ajonno
– ajonno, Commented May 15, 2024 at 13:23
@ajonno it seems that there's some issue with using WebView on Compose. I ended up porting my code to Kotlin + XML layouts — IncorrectMouse
– IncorrectMouse, Commented May 16, 2024 at 15:29
I solved mine by adding layoutParams. Tried to post this as an answer, but the mod deleted it. — Risal Fajar Amiyardi
– Risal Fajar Amiyardi, Commented Nov 18, 2024 at 1:38
The solution from @Ilya-gazman works. That should be accepted answer. — nitinkumarp
– nitinkumarp, Commented May 27 at 8:58

nitinkumarp · Accepted Answer · 2025-05-27 08:54:43Z

10

Yep, had the same issue, couldn't load local js files. The solution is to wrap it with a FrameLayout

val myWebView = remember {
     WebView(context).apply{
           //your settings here
      }
}
AndroidView(factory = {
    FrameLayout(it).apply {
        if (myWebView.parent != null) {
            (myWebView.parent as ViewGroup).removeView(myWebView)
        }
        addView(myWebView)
    }
}, modifier = Modifier.fillMaxSize())

edited May 27 at 8:54

nitinkumarp

2,1581 gold badge24 silver badges33 bronze badges

answered Feb 25 at 2:02

Ilya Gazman

32.5k25 gold badges151 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Atul Sharma May 12 at 10:27

Thanks! that's saved lot of hours and still don't know why the only compose didn't worked in certain cases btw this works like magic :)

Олексій Чорненький Sep 20 at 7:21

Thanks man! Five hours of problem solving that led nowhere. How did you arrive at this solution?

Ilya Gazman Oct 3 at 1:17

I spent 10 hours of my own ;)

oğuzhan · Accepted Answer · 2025-02-13 06:18:31Z

0

I think Webview doesn't work properly with just compose. You should use WebView in XML layout and inflate it in Compose function

Create xml layout
Open View Binding in module Gradle

buildFeatures { viewBinding = true }

Load XML with View Binding

   Column(
     // Load WebView from XML Layout without ViewBinding
     AndroidViewBinding(WebviewViewBinding::inflate) {
         setupWebView(this.webview)
         }
   }

answered Feb 13 at 6:18

oğuzhan

1245 bronze badges

Collectives™ on Stack Overflow

Android WebView in Compose Not Displaying Certain Pages Properly

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related