Taking screenshot of Webview (AndroidView) in Jetpack Compose

Question

I am planning to replace all the fragments in my project with composables. The only fragment remaining is the one with a WebView in it. I need a way to get it's screenshot whenever user clicks report button

    
Box(Modifier.fillMaxSize()) {

    Button(
        onClick = this@ViewerFragment::onReportClick,
    )

    AndroidView(factory = { context ->
        MyWebView(context).apply {
            loadDataWithBaseURL(htmlString)
                
            addJavascriptInterface(JavaScriptInterface(), "JsIf")
        }
    }
    )
}

Previously; I used to pass the webview from view binding to a utility function for capturing the screenshot.

fun onReportClick() {
    val screenshot = ImageUtil(requireContext()).getScreenshot(binding.myWvViewer)
    .
    .
}

Docs recommend "Constructing the view in the AndroidView viewBlock is the best practice. Do not hold or remember a direct view reference outside AndroidView." So what could be the best approach?

Answer 1

Check out this answer on how to take a screenshot of any compose view.

In case you need to take screenshot of the full web view(including not visible part), I'm afraid that's an exceptional case when you have to store in remember variable and pass it into your handler:

var webView by remember { mutableStateOf<WebView?>(null) }
AndroidView(
    factory = { context ->
        WebView(context).apply {
            // ...
            webView = this
        }
    },
)
Button(onClick = {
    onReportClick(webView!!)
}) {
    Text("Capture")
}