How to enable zoom controls and pinch zoom in a WebView?

139
votes

The default Browser app for Android shows zoom controls when you're scrolling and also allows for pinch zooming. How can I enable this feature for my own Webview?

I've tried: 

webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);

but neither of the features get enabled as a result. Btw I've set a WebChromeClient and a WebViewClient for the Webview if that makes a difference.

Thanks!

6
androidwebview

6 Answers

310
votes

Strange. Inside OnCreate method, I'm using

webView.getSettings().setBuiltInZoomControls(true);

And it's working fine here. Anything particular in your webview ?

108
votes

Use these:

webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setDisplayZoomControls(false);
36
votes

Check if you don't have a ScrollView wrapping your Webview.

In my case that was the problem. It seems ScrollView gets in the way of the pinch gesture.

To fix it, just take your Webview outside the ScrollView.

7
votes

Inside OnCreate, add:

 webview.getSettings().setSupportZoom(true);
 webview.getSettings().setBuiltInZoomControls(true);
 webview.getSettings().setDisplayZoomControls(false);

Inside the html document, add:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes">
</head>
</html>

Inside javascript, omit:

//event.preventDefault ? event.preventDefault() : (event.returnValue = false);
5
votes

To enable zoom controls in a WebView, add the following line:

webView.getSettings().setBuiltInZoomControls(true);

With this line of code, you get the zoom enabled in your WebView, if you want to remove the zoom in and zoom out buttons provided, add the following line of code:

webView.getSettings().setDisplayZoomControls(false);
4
votes

Try this code, I get working fine. 

 webSettings.setSupportZoom(true);
 webSettings.setBuiltInZoomControls(true);
 webSettings.setDisplayZoomControls(false);