Android WebView inside ScrollView scrolls only scrollview

Question

In my app I have a ScrollView that contains some linearviews, some textviews and One Webview, then other linear layouts etc. The problem is that the WebView does not scroll. The Scroll listens only on ScrollView. Any suggestions??

---

<ScrollView >
    <TextView />
    <WebView />              <-- this does not scroll
    <TextView />
</ScrollView >

Fulmar

Answer 1

Here is the solution. Found online. I have subclassed WebView and i'm using the requestDisallowInterceptTouchEvent(true); method to allow my webview to handle the scroll event.

TouchyWebView.java

package com.mypackage.common.custom.android.widgets

public class TouchyWebView extends WebView {

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

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

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

    @Override
    public boolean onTouchEvent(MotionEvent event){
        requestDisallowInterceptTouchEvent(true);
        return super.onTouchEvent(event);
    }          
}

And in layout.xml

<com.mypackage.common.custom.android.widgets.TouchyWebView 
                android:id="@+id/description_web"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 />

Fulmar

This breaks once you touch outside of the WebView. – Warrantor

@mattblang touch once the webview again and then try to scroll it again. – Fulmar

Been looking around a bit for something to allow good webview/scrollview interaction, and this seems the best. I added a check in onTouchEvent() for "if (event.getPointerCount() > 1)" before calling the requestDisallowInterceptTouchEvent(true) method. This allows the entire page to be scrolled vertically, the webview to be scrolled horizontally, and pinch & zoom to apply only to the webview. – Sapodilla

this solution and using hardware accelerated = true in this activity, when pressing back crashes... if i disable hardware accelleration works but is going slow and html5 videos not playing.. – Jannery

Any Updates on this? I used it and its working but sometimes the webview does not catch the touch.. – Jae

works for me only changing: return super.onTouchEvent(event); with return false; in public boolean onTouchEvent(MotionEvent event) – Wally

It works fine when the WebView contains scrollable content. However, if it is not scrollable, it gets stuck disabling the parent ScrollView's scrolling... Has anybody dealt with that? – Pygmy

Answer 2

The solution provided by @panos works but it still has issues when used with ScrollView. The following enhanced version overcomes that problem.

public class TouchyWebView extends WebView {

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

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

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

     @Override
     public boolean onTouchEvent(MotionEvent event) {
         //Check is required to prevent crash
         if (MotionEventCompat.findPointerIndex(event, 0) == -1) {
         return super.onTouchEvent(event);
         }

         if (event.getPointerCount() >= 2) {
             requestDisallowInterceptTouchEvent(true);
         } else {
             requestDisallowInterceptTouchEvent(false);
         }

         return super.onTouchEvent(event);
    }

    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        requestDisallowInterceptTouchEvent(true);
    }

}

Additionally, you might want to have the following settings for your TouchyWebView.

mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setSupportZoom(true);
mWebView.getSettings().setBuiltInZoomControls(true);

Hemangioma

with your solution WebView is scrollable only by two fingers, with one finger only parent is scrolling... not so intuitive :/ – Airminded

Note MotionEventCompat.findPointerIndex(event, 0) is now deprecated, we should use event.findPointerIndex(0) instead. – Tannate

Answer 3

Panos solution is sufficient for me with one exception... My fixed-height (200dp) WebView may be empty or may have loaded lot of content. So it may be or may be not scrollable "itself". Panos solution is consuming MotionEvents always, so when WebView is empty and user touch WebView and try to scroll then WebView will not scroll (because there is no content) and scrollable parent also, cause WebView "swallows" MotionEvent - so nothing happens. I've added small if statement for expected behaviour:

@Override
public boolean onTouchEvent(MotionEvent event) {
    if(computeVerticalScrollRange() > getMeasuredHeight())
        requestDisallowInterceptTouchEvent(true);
    return super.onTouchEvent(event);
}

• when WebView is empty and not-vertical-scrollable then computeVerticalScrollRange() == getMeasuredHeight()
• when WebView have content longer than its height (is scrollable) then computeVerticalScrollRange() > getMeasuredHeight()

Airminded

It's work for me. But if you are using Tencent X5WebView widget, onTouchEvent callback doesn't invoke. So just extends google webkit.WebView instead of extends X5WebView – Harquebusier

Answer 4

Working off the solutions of @Panos and @Dipendra I still had some issues with a mapview inside a scrollview. It would not consistently scroll vertically and the methods were deprecated so I worked out this trick I use with mapview inside of scrollviews and works great. I hope this can help a few of you.

public class TouchyWebView extends WebView {
ViewParent mViewParent;

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

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

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

public void setViewParent(@Nullable final ViewParent viewParent) { //any ViewGroup
    mViewParent = viewParent;
}


@Override
public boolean onTouchEvent(MotionEvent event) {

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (null == mViewParent) {
                getParent().requestDisallowInterceptTouchEvent(true);
            } else {
                mViewParent.requestDisallowInterceptTouchEvent(true);
            }
            break;
        case MotionEvent.ACTION_UP:
            if (null == mViewParent) {
                getParent().requestDisallowInterceptTouchEvent(false);
            } else {
                mViewParent.requestDisallowInterceptTouchEvent(false);
            }
            break;
        default:
            break;
    }
    return super.onTouchEvent(event);
}

@Override
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
    super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
    requestDisallowInterceptTouchEvent(true);


}

}

I also followed @Dipendra advice about settings the controls.

mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setSupportZoom(true);
mWebView.getSettings().setBuiltInZoomControls(true);

Bairn

Answer 5

Just add one line in class file

mWebview.setNestedScrollingEnabled(true);

or add in Webview tag in XML

android:nestedScrollingEnabled="true"

Warning: only for API 21 and 21+

Postprandial

Or ViewCompat.setNestedScrollingEnabled(mWebView, true) – Joubert

This doesn't work. I am not sure whether @Nikunj is aware of Android developemennt or not but to clarify a little bit nestedScrolling on works for those view which support nested scrolling and not for all the views. And webView doesn't support nested scrolling. Please delete this answer to avoid any confusion – Basidiomycete

Answer 6

still happens in react-native-webview, issue tracked here https://github.com/react-native-community/react-native-webview/issues/22

Speculation

Answer 7

This is more comfortable for me.

public class NestedWebView extends WebView implements NestedScrollingChild {
private final String TAG = getClass().getSimpleName();
private NestedScrollingChildHelper mChildHeper;

public NestedWebView(@NonNull Context context) {
    super(context);
    mChildHeper=new NestedScrollingChildHelper(this);
    setNestedScrollingEnabled(true);
}
public NestedWebView(@NonNull Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    mChildHeper=new NestedScrollingChildHelper(this);
    setNestedScrollingEnabled(true);
}
public NestedWebView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mChildHeper=new NestedScrollingChildHelper(this);
    setNestedScrollingEnabled(true);
}
public NestedWebView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    mChildHeper=new NestedScrollingChildHelper(this);
    setNestedScrollingEnabled(true);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
    startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL);
    return super.onTouchEvent(event);
}
@Override
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
    super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
    stopNestedScroll();
}
@Override
public void stopNestedScroll() {
    super.stopNestedScroll();
}
@Override
public boolean startNestedScroll(int axes) {
    return super.startNestedScroll(axes);
}
@Override
public void setNestedScrollingEnabled(boolean enabled) {
    super.setNestedScrollingEnabled(enabled);
}

}

Moonwort

Answer 8

You can change into 3 layouts:

1. First TextView - header
2. WebView - main layout
3. Second TextView - footer

WebView web = (WebView) findViewById(R.id.webView);
View header = getLayoutInflater().inflate(R.layout.header_layout, null);
View footer = getLayoutInflater().inflate(R.layout.foorer_layout, null);
web.addHeaderView(headerComment);
web.addFooterView(footerComment);

Cynthy

My scroll view is there because those items don't fit in the screen. In my example I added only one textview above and one textview below. But in reality there are other relative layouts, there imageviews, webview is somewhere in the middle and the others... So I need the scroll view so I can see everything. – Fulmar

Try this solution – Cynthy

WebView does not have "addHeaderView" or "addFooterView" methods, ListView has these methods. So this is not a solution. – Denbighshire