Android WebView: prevent double tap zoom

Question

I'd like to be able to override the doubleTap motion event to do nothing instead of zooming and unzooming. I read on another post that someone was able to get this to work by creating a custom WebView class and overriding stuff in there, but I can't seem to get onDoubleTap to fire no matter what, and double tap zooming is still happening regardless of this.

So far, my progress is that I can get the onDown event to fire properly (I see the msg in my debug output window).

Here's my codes, and at the very bottom of my post is a link to the version of my demo project that currently has a problem.

(main.xml)

<?xml version="1.0" encoding="utf-8"?>
<xonmp.hellowwebview.MyWebView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     />

(helloWebViewActivity.java)

package xonmp.hellowwebview;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import xonmp.cannedwebview.R;
import xonmp.hellowwebview.MyWebView;


public class HelloWebViewActivity extends Activity {
    //private WebView mWebView;
    private MyWebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Log.d("We Got Here", "By here I mean onCreate");

        //mWebView = (WebView) findViewById(R.id.webview);
        mWebView = (MyWebView) findViewById(R.id.webview);


        WebSettings config = mWebView.getSettings();
        config.setJavaScriptEnabled(true);
        config.setLoadWithOverviewMode(true);
        config.setUseWideViewPort(true);
        config.setBuiltInZoomControls(false);
        config.setSupportZoom(false); 
        // config.setUserAgentString("android-client"); 

        mWebView.loadUrl("http://www.google.com");
        mWebView.setWebViewClient(new HelloWebViewClient());
    }

    private class HelloWebViewClient extends WebViewClient{
        @Override
        public boolean shouldOverrideUrlLoading(WebView webview, String url){
            webview.loadUrl(url);
            return true;
        }
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event){
        if ((keyCode == KeyEvent.KEYCODE_BACK)&& mWebView.canGoBack()){
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode,  event);
    }
}

But my very own MyWebView.java class is still not letting me hook the onDoubleTab method

(MyWebView.java)

package xonmp.hellowwebview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.webkit.WebView;
import android.widget.Toast;


class MyWebView extends WebView { 
    boolean doubleTap = false;

    public MyWebView(Context context) {
        super(context);
    }

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

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Log.d("113133", "onTouchEvent Fired!");
        if(true){
            GestureDetector gd = new GestureDetector(sogl);
            gd.onTouchEvent(event);

            // disable double tap zooming
            if(doubleTap){
                doubleTap = false;
                return false;
            }
                return super.onTouchEvent(event);
        }

        return super.onTouchEvent(event);
    }/**/


    GestureDetector.SimpleOnGestureListener sogl = new GestureDetector.SimpleOnGestureListener() { 
        public boolean onDown(MotionEvent e){
            Log.d("ohmygosh", "ohmygosh - onDown");
            return false;
        }
        public boolean onDoubleTap(MotionEvent e) {
            doubleTap = true;
            Log.d("ohmygosh", "ohmygosh - onDoubleTap");
            return false;
        }
    };/**/

    /*
    @Override
    public boolean onTouchEvent(MotionEvent event){
        Log.d("113133", "onTouchEvent Fired!");
        //float myF = 9/0;

        return true;
    }/**/
}

Here's a github link (You'll need to change the load url to something like google probably).

Thanks so much if you can help!

Edit: I decided to start fiddling with the config settings again, and I came up with this as a workable solution:

    WebSettings config = mWebView.getSettings();
    config.setJavaScriptEnabled(true);
    //config.setLoadWithOverviewMode(true);
    //config.setUseWideViewPort(true);
    config.setBuiltInZoomControls(false);
    config.setSupportZoom(false); 
    // config.setUserAgentString("android-client");

    mWebView.setInitialScale(80);

I don't know exactly how setInitialScale works though... I have a bad feeling that if on another page things aren't exactly the same width as what I have going on here, it will be zoomed wrong.

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Could you try disabling the support for zoom in the Webview ?

If that doesn't work check this other StackOverflow

edited May 23 '17 at 12:05

Community

1
1

answered Aug 21 '12 at 01:28

André Oriani

3,553
22
29

bapho · Answer 2 · 2015-02-11T19:03:45.327

If possible, replace the static meta tag in your html:

<script>
 var meta = document.createElement("meta");
 meta.setAttribute('name','viewport');
 meta.setAttribute('content','width=device-width, user-scalable=no');
 document.getElementsByTagName('head')[0].appendChild(meta); 
</script>

Additionally you can use a nice script: FastClick
It won't wait for tap events so its faster.

<script type="application/javascript" src="fastclick.js"></script>

    <script language="javascript">

        window.addEventListener('load', function() {
            FastClick.attach(document.body);
        }, false);

</script>

Then set a double tap listener to your gesture detector. (in custom WebView)

gestureDetector.setOnDoubleTapListener(new OnDoubleTapListener() {

    @Override
    public boolean onSingleTapConfirmed( MotionEvent e ) {
        return false;
    }

    @Override
    public boolean onDoubleTapEvent( MotionEvent e ) {

        return true;
    }

    @Override
    public boolean onDoubleTap( MotionEvent e ) {

        return true;
    }
});

Override the onTouchEvent method (in custom WebView):

@Override
public boolean onTouchEvent( MotionEvent event ) {

    boolean gestureHandled = gestureDetector.onTouchEvent(event);
    int actionMask = event.getActionMasked() & MotionEvent.ACTION_MASK;
    int index = ( event.getAction() & MotionEvent.ACTION_POINTER_INDEX_MASK) >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
    int pointId = event.getPointerId(index);

    // ignore move events
    if (actionMask == MotionEvent.ACTION_MOVE) {

        return super.onTouchEvent(event);
    }

    // cancel detected double taps
    if (gestureDetector.onTouchEvent(event)) {
        event.setAction(MotionEvent.ACTION_CANCEL);
        super.onTouchEvent(event);
        return true;
    }

    // if you want to ignore multi touch events/taps
    if (pointId != 0) {

        System.out.println("KEY multiple points detected");
        return true;
    }

    // use single taps
    if (event.getAction() == MotionEvent.ACTION_UP) {

        event.setAction(MotionEvent.ACTION_CANCEL);
        super.onTouchEvent(event);
        event.setAction(MotionEvent.ACTION_DOWN);
        super.onTouchEvent(event);
        event.setAction(MotionEvent.ACTION_UP);
        return true;
    }

return super.onTouchEvent(event);
}

Android WebView: prevent double tap zoom

2 Answers2