Scroll Webview inside a Scroll View

Question

What I have:
Right now I have a Scroll view as a parent. Inside this scroll view, I am using a WebView that loads a URL and then shows text in it. Here is my xml:

<ScrollView
    android:id="@+id/parentScroll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/Heading" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp" >

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@drawable/webview" />
    </RelativeLayout>
</ScrollView>

What I want:
I want to scroll webView inside it. When I touch the webView, unfortunately the parent scroll view gets called. I have to keep Parent scroll view also but besides this I want to scroll WebView content inside it when I touch on webView.

How can I do this?

score 6 · Answer 1 · answered Apr 09 '15 at 10:49

Create a Custom Touch Intercepting Webview

CustomWebview.java

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

public class CustomWebview extends WebView {

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

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

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

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

in layout.xml

<com.package.custom.widgets.CustomWebview
                android:id="@+id/view_extra"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 />

score 4 · Answer 2 · answered Sep 24 '12 at 14:51

4

According to Android design documents you should never put a scrolling container inside a scrolling container if they scroll the same direction. It's not meant to handle such a thing.

answered Sep 24 '12 at 14:51

CaseyB

24,780
14
77
112

2

@CaseyB... But its my requirement.. i have to keep webView in a scroll view. U have any idea about this ?? – Noman Sep 24 '12 at 14:53
2

Then I'm afraid your requirements are wrong, you should never need to do this. – Joseph Earl Sep 24 '12 at 14:59
2

Can you reference the document? – Steven Sep 03 '13 at 19:01
1

I agree to that and tired of listening to this text book comment, hence the new nested scrolling flags and coordinator layouts since android team at google realized that making such generic comment is not the way to go and nested scrolling should be handled in efficient way. – ksarmalkar Sep 23 '15 at 13:58

score 2 · Answer 3 · answered Jan 15 '16 at 16:17

I had the same problem. You should set your webView Height equal as its content. for this do this:
add this lines to your onCreate method in Activity:

webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                webView.loadUrl("javascript:MyApp.resize(document.body.getBoundingClientRect().height)");

                super.onPageFinished(view, url);
            }
        });
webView.addJavascriptInterface(this, "MyApp");

and add this method to your activity:

@JavascriptInterface
    public void resize(final float height) {
        MainActivity.this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                webView.setLayoutParams(new LinearLayout.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density)));
            }
        });
    }

Jeremy Edwards · Answer 4 · 2012-09-24T15:19:36.073

Nested scrollable widgets are generally discouraged. It is a confusing user experience because it's easy to scroll the wrong thing. Say I intend to scroll the outer scroll region but I touched the inner region first and flinged really hard. Then the inner one will scroll and I'll be like huh? Why didn't it scroll?

Even if one scrolls horizontal and the other is vertical the gesture recognizers might confuse one for another so you get the same effect. It's a valid use case but it's still iffy and I'd avoid it. (IE: Humans don't perfectly swipe vertically and horizontally properly, it's usually with an angle.)

I would push to change the design to break out the scrollable areas. Ideally 1 scrollable item per page. Even propose one yourself and provide to the designer both experiences and see which one they choose.

To express how this will suck. Look at this example. This isn't a solution but just to show the experience.

<ScrollView
    android:id="@+id/parentScroll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/Heading" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" android:orientation="vertical"
    android:padding="5dp" >
    <TextView
        android:id="@+id/topText"
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:text="@string/lotsoftext" />
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/webview" />
    <TextView
        android:id="@+id/topText"
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:text="@string/lotsoftext" />
</RelativeLayout>

@Jermey Edwards.. Thanks you my friend for such explanation but unfortunately its my requirement..i have to put webView inside scroll view..so that when i click on webView it should scroll vertically and when i click outside webView the whoel screen shall scroll. Do u have any idea about this ?? — Noman, Sep 24 '12 at 15:01
@Jeremy Edwards look at the my solution please, it does provide the workaround for placing webview inside a scrollview [here](http://stackoverflow.com/a/12963499/1152250) — rus1f1kat0R, Oct 19 '12 at 02:31

Scroll Webview inside a Scroll View

4 Answers4

Linked