How to disable horizontal scrolling in Android webview

Question

I want to have only vertical scrolling in my webview and don't want any horizontal scrolling.

webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

This helped me to solve the scrolling issue.

But using this made my webview looking wierd. Height of all the edit text squeezed (Vertically) and is looking bad.

Is there any other way I can disable horizontal scrolling from client side?
Using SINGLE_COLUMN how can we avoid issue with webview height changes? I want the vertical look and feel to be same as what it used to be without SINGLE_COLUMN

best answer here http://stackoverflow.com/questions/8635498/any-way-to-stop-webview-built-in-scrolling/24182524#24182524 — Zar E Ahmer, Jun 12 '14 at 10:49

score 35 · Answer 1 · edited Aug 20 '17 at 14:35

35

Here is how I disable horizontal scrolling only for a webview.

webView.setHorizontalScrollBarEnabled(false);
webView.setOnTouchListener(new View.OnTouchListener() {
    float m_downX;
    public boolean onTouch(View v, MotionEvent event) {

        if (event.getPointerCount() > 1) {
            //Multi touch detected
            return true;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                // save the x
                m_downX = event.getX();
                break;
            }
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP: {
                // set x so that it doesn't move
                event.setLocation(m_downX, event.getY());
                break;
            }

        }
        return false;
    }
});

Basically intercept the touch event and don't allow the x value to change. This allows the webview to scroll vertically but not horizontally. Do it for y if you want the opposite.

edited Aug 20 '17 at 14:35

vovahost

34,185
17
113
116

answered Sep 18 '12 at 21:07

vee

720
7
8

But It disabled clicking action in the Webview. Any help? – Sami Eltamawy Aug 28 '13 at 20:15
@vee : Cannot resolve symbol m_downX . what is m_downX my android studio doesn't recognize that – Amir.KH Apr 29 '15 at 22:41
1

@Amir.KH its variable name. Simply add it – Gelldur Jul 05 '15 at 09:49
This also disables clicking in the webview for me. – Tom Kincaid Jul 18 '16 at 15:07
@TomKincaid it does not disable clicking, this works – Nicholas Ng Jul 29 '16 at 10:37

score 32 · Accepted Answer · answered Jun 16 '12 at 14:06

32

This is a hack, but one that has worked for me successfully in the past. Surround your WebView in a vertically oriented ScrollView:

<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"    >
  <WebView
    android:id="@+id/mywebview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
</ScrollView>

and then disable all scrolling in your WebView.

To disable your WebView's scrolling, you can use this code:

 // disable scroll on touch
webview.setOnTouchListener(new View.OnTouchListener() {

    public boolean onTouch(View v, MotionEvent event) {
      return (event.getAction() == MotionEvent.ACTION_MOVE);
    }
});

answered Jun 16 '12 at 14:06

SBerg413

14,515
6
62
88

7

If i am not wrong it will disable both horizontal and vertical scrolling – Vipul Jun 16 '12 at 14:07
2

Nope - the vertical ScrollView will allow for scrolling of the WebView's vertical content. – SBerg413 Jun 16 '12 at 14:08
@SBerg: Thanks for the suggestion. This solution is working fine :).. I was just wondering whether this is the only way to block horizontal scrolling. – SK. Jun 18 '12 at 09:57
1

but when I use loadDataWithBaseUrl to load html text it cuts off content horizontally. any solution ? – Ketan Ahir Dec 04 '13 at 05:39
3

Implementing the above setOnTouchListener will disable scrolling in both directions! – slott May 11 '14 at 13:14
This prevents all scrolling for me. – Tom Kincaid Jul 18 '16 at 15:09

score 3 · Answer 3 · answered Nov 14 '13 at 10:05

3

I just tried this and it worked like a charm, I didn't know it's this simple, just one line:

mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Source: http://sharecoding.wordpress.com/2012/02/16/programmatically-disable-scroll-function-on-android-webview/

answered Nov 14 '13 at 10:05

Leo

1,433
23
40

3

The algorithm is now deprecated: http://developer.android.com/reference/android/webkit/WebSettings.LayoutAlgorithm.html – Luke Vo Dec 02 '13 at 05:14

score 3 · Answer 4 · answered May 31 '18 at 16:22

Solution based on @vee answer, but more convenient:

public class WebViewTouchListener implements View.OnTouchListener {
    private float downX;

    @Override
    public boolean onTouch(final View v, final MotionEvent event) {
        if (event.getPointerCount() > 1) {
            //multi touch
            return true;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                // set x so that it doesn't move
                event.setLocation(downX, event.getY());
                break;
        }
        return false;
    }
}

And just use it with a WebView:

 webView.setHorizontalScrollBarEnabled(false);
 webView.setOnTouchListener(new WebViewTouchListener());

score 0 · Answer 5 · edited May 23 '17 at 11:53

Following the answer by vee, here is a vertical-only WebView class. You can use it as a view element inside xml to keep your code cleaner.

package com.yourpackage.views;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebView;

/**
 * custom {@link WebView} which only scrolls vertically but not horizontally
 */
public class VerticalScrollWebview extends WebView implements View.OnTouchListener {

    // the initial touch points x coordinate
    private float touchDownX;

    public VerticalScrollWebview(Context context) {
        super(context);

        // make vertically scrollable only
        makeVerticalScrollOnly();
    }

    public VerticalScrollWebview(Context context, AttributeSet attrs) {
        super(context, attrs);

        // make vertically scrollable only
        makeVerticalScrollOnly();
    }

    public VerticalScrollWebview(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // make vertically scrollable only
        makeVerticalScrollOnly();
    }

    /**
     * make this {@link WebView} vertically scroll only
     */
    private void makeVerticalScrollOnly() {
        // set onTouchListener for vertical scroll only
        setOnTouchListener(this);

        // hide horizontal scroll bar
        setHorizontalScrollBarEnabled(false);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {

        // multitouch is ignored
        if (motionEvent.getPointerCount() > 1) {
            return true;
        }

        // handle x coordinate on single touch events
        switch (motionEvent.getAction()) {
            // save the x coordinate on touch down
            case MotionEvent.ACTION_DOWN:
                touchDownX = motionEvent.getX();
                break;

            // reset the x coordinate on each other touch action, so it doesn't move
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                motionEvent.setLocation(touchDownX, motionEvent.getY());
                break;

        }

        // let the super view handle the update
        return false;

    }
}

score 0 · Answer 6 · edited Sep 06 '17 at 04:12

I know its late but i hope it will help someone, please use the class mentioned below in-order to disable horizontal scroll.

public class CustomWebView extends WebView implements View.OnTouchListener {

    // the initial touch points x coordinate
    private float touchDownX;
    private OnScrollChangedCallback mOnScrollChangedCallback;

    public CustomWebView(final Context context) {
        super(context);

        // make vertically scrollable only
        makeVerticalScrollOnly();
    }

    public CustomWebView(final Context context, final AttributeSet attrs) {
        super(context, attrs);

        // make vertically scrollable only
        makeVerticalScrollOnly();
    }

    public CustomWebView(final Context context, final AttributeSet attrs, final int defStyle) {
        super(context, attrs, defStyle);

        // make vertically scrollable only
        makeVerticalScrollOnly();
    }

    @Override
    protected void onScrollChanged(final int l, final int t, final int oldl, final int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollChangedCallback != null) mOnScrollChangedCallback.onScroll(l, t);
    }

    public OnScrollChangedCallback getOnScrollChangedCallback() {
        return mOnScrollChangedCallback;
    }

    public void setOnScrollChangedCallback(final OnScrollChangedCallback onScrollChangedCallback) {
        mOnScrollChangedCallback = onScrollChangedCallback;
    }

    /**
     * Impliment in the activity/fragment/view that you want to listen to the webview
     */
    public static interface OnScrollChangedCallback {
        public void onScroll(int l, int t);
    }

    /**
     * make this {@link WebView} vertically scroll only
     */
    private void makeVerticalScrollOnly() {
        // set onTouchListener for vertical scroll only
        setOnTouchListener(this);

        // hide horizontal scroll bar
        setHorizontalScrollBarEnabled(false);
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {

        // multitouch is ignored
        if (motionEvent.getPointerCount() > 1) {
            return true;
        }

        // handle x coordinate on single touch events
        switch (motionEvent.getAction()) {
            // save the x coordinate on touch down
            case MotionEvent.ACTION_DOWN:
                touchDownX = motionEvent.getX();
                break;

            // reset the x coordinate on each other touch action, so it doesn't move
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                motionEvent.setLocation(touchDownX, motionEvent.getY());
                break;

        }

        // let the super view handle the update
        return false;

    }
}

That's Enam · Answer 7 · 2019-03-17T17:38:08.980

0

 webView.setHorizontalScrollBarEnabled(false);

Define whether the horizontal scrollbar should be drawn or not. The scrollbar is not drawn by default.

edited Mar 17 '19 at 17:38

answered Mar 17 '19 at 14:43

That's Enam

286
2
3
16

score 0 · Answer 8 · answered May 11 '22 at 09:14

Solution with kotlin extension approuch

import android.view.MotionEvent
import android.view.View
import android.webkit.WebView


fun WebView.disableHorizontalScroll() {
    isHorizontalScrollBarEnabled = false
    setOnTouchListener(WebViewTouchListener())
}

private class WebViewTouchListener : View.OnTouchListener {
    private var downX = 0f
    override fun onTouch(v: View?, event: MotionEvent): Boolean {
        if (event.pointerCount > 1) {
            //multi touch
            return true
        }
        when (event.action) {
            MotionEvent.ACTION_DOWN -> downX = event.x
            MotionEvent.ACTION_MOVE, MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> event.setLocation(downX, event.y)
        }
        return false
    }
}

score -1 · Answer 9 · answered Nov 29 '17 at 12:12

-1

  webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);

in Android 7.1

answered Nov 29 '17 at 12:12

Martin Pfeffer

12,471
9
59
68

How to disable horizontal scrolling in Android webview

9 Answers9

Linked