Is there any possible way to handle image opening in web view

Question

I faced a problem, and hope somebody would be kind and give me a hand with it. The problem is: I've got a webView in my application to open links on some news within my app (and I don't want to open them with browser or anything like that). And this news sometimes contains images. When user tap on those images, they opens in the same size area as main news. And it looks quite bad.

[in picture bottom you can see top of the opened image][1] [1]: https://i.stack.imgur.com/6M4fg.jpg

I already have a fragment in my structure to open images by url, but I don't know how to handle this "on-image" click in webView and grab image url from it to go to my ImageView fragment.

I read a bit about using javascript to take id from page html code, but there are no unique id's in html for those pictures.

Answer 1

You can provide your own WebViewClient and override shouldOverrideUrlLoading and then intercept click on a image. Some example how it can looks like:

webView.webViewClient = object: WebViewClient() {
        override fun shouldOverrideUrlLoading(
            view: WebView?,
            request: WebResourceRequest?
        ): Boolean {
            return if (isImage(request)) {
                openImageViewFragment(request.url)
                false // indicates that webview shouldn't do anything with the request
            } else {
                super.shouldOverrideUrlLoading(view, request)
            }
        }
    }