enable/disable zoom in Android WebView

AndroidAndroid WebviewZoomingMulti Touch

Android Problem Overview

There are some methods in WebSettings related to zoom:

  • WebSettings.setSupportZoom
  • WebSettings.setBuiltInZoomControls

I noticed they work differently on some devices. For example, on my Galaxy S pinch to zoom is enabled by default, but on LG P500 it is disabled (And now I don't know how to enable ONLY pinch to zoom, but hide zooming buttons).

On P500 when I call setBuiltInZoomControls(true) I get both these variants working (multitouch and buttons).

How to enable multitouch zoom and disable zooming buttons on devices such an LG P500? (Also, I know the same problems are on HTC devices)

UPDATE: Here is almost full code for the solution

if (ev.getAction() == MotionEvent.ACTION_DOWN ||
        ev.getAction() == MotionEvent.ACTION_POINTER_DOWN ||
        ev.getAction() == MotionEvent.ACTION_POINTER_1_DOWN ||
        ev.getAction() == MotionEvent.ACTION_POINTER_2_DOWN ||
        ev.getAction() == MotionEvent.ACTION_POINTER_3_DOWN) {
    if (multiTouchZoom && !buttonsZoom) {
        if (getPointerCount(ev) > 1) {
            getSettings().setBuiltInZoomControls(true);
            getSettings().setSupportZoom(true);
        } else {
            getSettings().setBuiltInZoomControls(false);
            getSettings().setSupportZoom(false);
        }
    }
}

if (!multiTouchZoom && buttonsZoom) {
    if (getPointerCount(ev) > 1) {
        return true;
    }
}

This code is in my onTouchEvent overridden method of the WebView.

Android Solutions

Solution 1 - Android

On API >= 11, you can use:

wv.getSettings().setBuiltInZoomControls(true);
wv.getSettings().setDisplayZoomControls(false);

As per the SDK:

public void setDisplayZoomControls (boolean enabled)

> Since: API Level > 11 > > Sets whether the on screen zoom buttons are used. A combination of > built in zoom controls enabled and on screen zoom controls disabled > allows for pinch to zoom to work without the on screen controls

Solution 2 - Android

I've looked at the source code for WebView and I concluded that there is no elegant way to accomplish what you are asking.

What I ended up doing was subclassing WebView and overriding OnTouchEvent. In OnTouchEvent for ACTION_DOWN, I check how many pointers there are using MotionEvent.getPointerCount(). If there is more than one pointer, I call setSupportZoom(true), otherwise I call setSupportZoom(false). I then call the super.OnTouchEvent().

This will effectively disable zooming when scrolling (thus disabling the zoom controls) and enable zooming when the user is about to pinch zoom. Not a nice way of doing it, but it has worked well for me so far.

Note that getPointerCount() was introduced in 2.1 so you'll have to do some extra stuff if you support 1.6.

Solution 3 - Android

We had the same problem while working on an Android application for a customer and I managed to "hack" around this restriction.

I took a look at the Android Source code for the WebView class and spotted a updateZoomButtonsEnabled()-method which was working with an ZoomButtonsController-object to enable and disable the zoom controls depending on the current scale of the browser.

I searched for a method to return the ZoomButtonsController-instance and found the getZoomButtonsController()-method, that returned this very instance.

Although the method is declared public, it is not documented in the WebView-documentation and Eclipse couldn't find it either. So, I tried some reflection on that and created my own WebView-subclass to override the onTouchEvent()-method, which triggered the controls.

public class NoZoomControllWebView extends WebView {

    private ZoomButtonsController zoom_controll = null;

    public NoZoomControllWebView(Context context) {
        super(context);
        disableControls();
    }

    public NoZoomControllWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        disableControls();
    }

    public NoZoomControllWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        disableControls();
    }
    
    /**
     * Disable the controls
     */
    private void disableControls(){
    	if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) {
    		// Use the API 11+ calls to disable the controls
        	this.getSettings().setBuiltInZoomControls(true);
	    	this.getSettings().setDisplayZoomControls(false);
		} else {
			// Use the reflection magic to make it work on earlier APIs
			getControlls();
		}
    }

    /**
     * This is where the magic happens :D
     */
    private void getControlls() {
        try {
            Class webview = Class.forName("android.webkit.WebView");
            Method method = webview.getMethod("getZoomButtonsController");
            zoom_controll = (ZoomButtonsController) method.invoke(this, null);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        super.onTouchEvent(ev);
        if (zoom_controll != null){
		    // Hide the controlls AFTER they where made visible by the default implementation.
		    zoom_controll.setVisible(false);
		}
        return true;
    }
}

You might want to remove the unnecessary constructors and react on probably on the exceptions.

Although this looks hacky and unreliable, it works back to API Level 4 (Android 1.6).

As @jayellos pointed out in the comments, the private getZoomButtonsController()-method is no longer existing on Android 4.0.4 and later.

However, it doesn't need to. Using conditional execution, we can check if we're on a device with API Level 11+ and use the exposed functionality (see @Yuttadhammo answer) to hide the controls.

I updated the example code above to do exactly that.

Solution 4 - Android

Ive modifiet Lukas Knuth's solution a little:

  1. There's no need to subclass the webview,

  2. the code will crash during bytecode verification on some Android 1.6 devices if you don't put nonexistant methods in seperate classes

  3. Zoom controls will still appear if the user scrolls up/down a page. I simply set the zoom controller container to visibility GONE

    wv.getSettings().setSupportZoom(true); wv.getSettings().setBuiltInZoomControls(true); if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) { // Use the API 11+ calls to disable the controls // Use a seperate class to obtain 1.6 compatibility new Runnable() { public void run() { wv.getSettings().setDisplayZoomControls(false); } }.run(); } else { final ZoomButtonsController zoom_controll = (ZoomButtonsController) wv.getClass().getMethod("getZoomButtonsController").invoke(wv, null); zoom_controll.getContainer().setVisibility(View.GONE); }

Solution 5 - Android

Lukas Knuth have good solution, but on android 4.0.4 on Samsung Galaxy SII I still look zoom controls. And I solve it via

if (zoom_controll!=null && zoom_controll.getZoomControls()!=null)
{
   // Hide the controlls AFTER they where made visible by the default implementation.
   zoom_controll.getZoomControls().setVisibility(View.GONE);
}

instead of

if (zoom_controll != null){
   // Hide the controlls AFTER they where made visible by the default implementation.
   zoom_controll.setVisible(false);
}

Solution 6 - Android

The solution you posted seems to work in stopping the zoom controls from appearing when the user drags, however there are situations where a user will pinch zoom and the zoom controls will appear. I've noticed that there are 2 ways that the webview will accept pinch zooming, and only one of them causes the zoom controls to appear despite your code:

User Pinch Zooms and controls appear:

ACTION_DOWN
getSettings().setBuiltInZoomControls(false); getSettings().setSupportZoom(false);
ACTION_POINTER_2_DOWN
getSettings().setBuiltInZoomControls(true); getSettings().setSupportZoom(true);
ACTION_MOVE (Repeat several times, as the user moves their fingers)
ACTION_POINTER_2_UP
ACTION_UP

User Pinch Zoom and Controls don't appear:

ACTION_DOWN
getSettings().setBuiltInZoomControls(false); getSettings().setSupportZoom(false);
ACTION_POINTER_2_DOWN
getSettings().setBuiltInZoomControls(true); getSettings().setSupportZoom(true);
ACTION_MOVE (Repeat several times, as the user moves their fingers)
ACTION_POINTER_1_UP
ACTION_POINTER_UP
ACTION_UP

Can you shed more light on your solution?

Solution 7 - Android

Improved Lukas Knuth's version:

public class TweakedWebView extends WebView {

	private ZoomButtonsController zoomButtons;

	public TweakedWebView(Context context) {
		super(context);
		init();
	}

	public TweakedWebView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public TweakedWebView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	private void init() {
		getSettings().setBuiltInZoomControls(true);
		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
			getSettings().setDisplayZoomControls(false);
		} else {
			try {
				Method method = getClass()
						.getMethod("getZoomButtonsController");
				zoomButtons = (ZoomButtonsController) method.invoke(this);
			} catch (Exception e) {
				// pass
			}
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		boolean result = super.onTouchEvent(ev);
		if (zoomButtons != null) {
			zoomButtons.setVisible(false);
			zoomButtons.getZoomControls().setVisibility(View.GONE);
		}
		return result;
	}

}

Solution 8 - Android

hey there for anyone who might be looking for solution like this.. i had issue with scaling inside WebView so best way to do is in your java.class where you set all for webView put this two line of code: (webViewSearch is name of my webView -->webViewSearch = (WebView) findViewById(R.id.id_webview_search);)

// force WebView to show content not zoomed---------------------------------------------------------
    webViewSearch.getSettings().setLoadWithOverviewMode(true);
    webViewSearch.getSettings().setUseWideViewPort(true);
Categories
Recommended Android Solutions
Recommended Android Webview Solutions
Recommended Zooming Solutions

Previous Solution:

Eclipse gets stuck when trying to launch Android app

AndroidEclipseDelegates

Next Solution:

For loop in Objective-C

Objective CSyntax

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEugene NacuView Question on Stackoverflow
Solution 1 - AndroidyuttadhammoView Answer on Stackoverflow
Solution 2 - Androidgngr44View Answer on Stackoverflow
Solution 3 - AndroidLukas KnuthView Answer on Stackoverflow
Solution 4 - AndroidJacob NordfalkView Answer on Stackoverflow
Solution 5 - AndroidMihail MView Answer on Stackoverflow
Solution 6 - AndroidPeteView Answer on Stackoverflow
Solution 7 - AndroidyanchenkoView Answer on Stackoverflow
Solution 8 - AndroidPerhpethuaView Answer on Stackoverflow