Simplifying WebView in Compose with Accompanist WebView Wrapper

Photo by Szabo Viktor on Unsplash

In Android development, developers sometimes need to use WebView in their projects for various reasons. WebView already exists on the Android XML side. WebView already exists in Android Xml side but it does not exist in Jetpact Compose. However, there is a workaround to use WebView in Jetpack Compose. In this article, I will show you a newer way to implement WebView in Jetpack Compose. Let’s get started.

Older way

As I said before, there is no composable function for WebView in Jetpack Compose SDK yet. So, we need to use Android View library’s WebView class. (the next example is from here).

@Composable
fun WebView(
    modifier: Modifier = Modifier,
    url: String,
) {
    var backEnabled by remember { mutableStateOf(false) }
    var webView: WebView? = null
    AndroidView(
        modifier = modifier,
        factory = { context ->
            WebView(context).apply {
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
                webViewClient = object : WebViewClient() {
                    override fun onPageStarted(view: WebView, url: String?, favicon: Bitmap?) {
                        backEnabled = view.canGoBack()
                    }
                }
                settings.javaScriptEnabled = true

                loadUrl(url)
                webView = this
            }
        }, update = {
            webView = it
        })

    BackHandler(enabled = backEnabled) {
        webView?.goBack()
    }
}

Since we are using Android View library’s WebView class. We can use every function of WebView class. As you may noticed, there is a custom Webview client in the code above. If you want you can also add WebChromeClient to the WebView as well.

Newer way

Of course, the code above works fine, but it is not the easiest way to implement WebView in Jetpack Compose. Since composition requires state management, etc. Normally, developers want to handle as little stuff as possible in a project, especially in larger projects. I do not mean that the code above is bad; it is okay to use.

On the other hand, there is a newer way to implement WebView in Jetpack Compose. It is an Accompanist WebView wrapper that is composable. It, in fact, uses the Android View library’s WebView class under the hood. But it builds a much simpler interface around the WebView class. Let’s see how to use it.

First, we need to add Accompanist dependency to our project.

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-webview:<version>"
}

Then, we can use it like this.

@Composable
fun AccompanishWebClient(
    modifier: Modifier = Modifier,
    url: String,
) {

    val webViewState = rememberWebViewState(url = url)
    WebView(
        modifier = modifier,
        state = webViewState,
        captureBackPresses = true,
        onCreated = { it : WebView ->
            it.settings.javaScriptEnabled = true
        }
    )
}

As you can see, it is much simpler to use. We can also use custom WebChromeClient and WebViewClient as well. You can check the documentation for more information .

Conclusion

In this article, we explored two approaches to using WebView in Jetpack Compose. The older way involved utilizing the Android View library’s WebView class, providing full functionality but requiring manual handling. However, a newer and more convenient way emerged with Accompanist WebView wrapper composable. By adding the Accompanist dependency to our project, we gained a simplified interface that seamlessly integrated with Compose’s state management system.

LinkedIn

Love you all.

Stay tune for upcoming blogs.

Take care.