feature: add set background color option for android client

TerryGlen commented 4 months ago

When using the android webview client there is a brief white flicker as content loads. This is especially noticeable when loading a webpage with a dark background onto a Composable with the same background. This PR adds the option to set the client background color and sets the default to Transparent. This removes the white flicker on startup but also gives the user the ability to override it if needed.

Sample with flicker before changes: https://github.com/KevinnZou/compose-webview-multiplatform/assets/32306780/b049dada-03ff-4bc4-b404-e86379335edb

Sample without flicker after changes:

https://github.com/KevinnZou/compose-webview-multiplatform/assets/32306780/baf52bde-2204-4c6b-bf98-d3169e68735c

Reproducible Code:

val html =
        """
        <html>
        <head>
            <title>Flicker Sample: Blue</title>
            <style>
                body {
                    background-color: 0000FF; 
                    }
            </style>
        </head>
        <body>
            <h1>Flicker Sample</h1>
        </body>
        </html>
        """
@Composable
fun WebViewFlickerSample(){
    val webViewState = rememberWebViewStateWithHTMLData(html)
    Column(Modifier.fillMaxSize().background(Color.Blue)) {
        WebView(
            state = webViewState,
            modifier = Modifier.padding(16.dp).fillMaxSize(),
        )
    }
}

KevinnZou commented 4 months ago

@TerryGlen Thank you for your contribution! I sincerely appreciate it.

msasikanth commented 4 months ago

This kind of flickering also occurs on iOS as well. Might be a good idea to resolve this there as well? I can look into it and raise a PR

KevinnZou commented 4 months ago

@msasikanth Sure! You are welcome to do it! We can make it a common setting!

KevinnZou / compose-webview-multiplatform

feature: add set background color option for android client #89