Wednesday, 7 April 2021

Starting WebView fit to scale, with pinch zoom

I am trying to load a url into a webview, its actually a screen share stream into a phone app.

I have a couple of issues I need help with.

  1. WebView starts always zoomed at the top left corner enter image description here

  2. There are zoom controls and fit to scale button, and after zooming you can move around by touch, however the two finger pinch zoom does not work.

  3. Adding the setWebViewClient as below, enables pinch zoom but gives two more problems; there are additional -+ buttons, and zooming by pinch the original -+/fit to scale buttons become zoomed as well

enter image description here

enter image description here

            screenShareWebView.settings.useWideViewPort = true
            screenShareWebView.settings.loadWithOverviewMode = true
            screenShareWebView.settings.setSupportZoom(true)
            screenShareWebView.settings.builtInZoomControls = true
            screenShareWebView.settings.displayZoomControls = true
            screenShareWebView.scrollBarStyle = WebView.SCROLLBARS_INSIDE_OVERLAY
            screenShareWebView.isScrollbarFadingEnabled = true

            screenShareWebView.settings.javaScriptEnabled = true //needs to be true or else it doesnt work

            screenShareWebView.loadUrl(it)

the pinch zoom is enabled (with the extra buttons) with

        screenShareWebView.setWebViewClient(object : WebViewClient() {
        override fun onPageFinished(view: WebView, url: String?) {
        val javascript ="javascript:document.getElementsByName('viewport'[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');"

            view.loadUrl(javascript)
        }
    })

So i need to start fit to scale, enable pinch zoom if possible and dont add extra buttons



from Starting WebView fit to scale, with pinch zoom

No comments:

Post a Comment