Horizontally Scrolling WebView Inside ViewPager

Question

There have been a few questions asked on this issue, but none have given a true solution that is working for us. We have a ViewPager containing a dynamic number of webviews (inside fragments) that will sometimes need to be scrolled horizontally.

The problem we're seeing is that when scrolling horizontally, those scroll events (or drag, or fling) are being intercepted by the ViewPager, which then prompts a page switch in the direction of the action.

The WebView is either not reporting the width of its content to its parent, or the ViewPager is indiscriminately capturing the actions before it should.

I tried using the computeHorizontalScroll() solutions, which seemed promising, but that method is always returning 0 and does me no good.

Why is there not a method to get the actual content width of the WebView's HTML content like there is with getContentHeight()? This would give us what we need, but unfortunately it's not provided in the API.
Has anyone seen a workaround for this issue that actually works?

Here is a useful link. [Extended Webview](https://stackoverflow.com/questions/7774642/scroll-webview-horizontally-inside-a-viewpager) — Abdul Ahad, Oct 06 '17 at 13:01
Thanks, but that link is in the question. Didn't work for me. Answer below did. — airowe, Oct 06 '17 at 14:55

airowe · Accepted Answer · 2017-10-04T17:16:22.103

So, I ended up developing a solution by disallowing propagation of touch events to the ViewPager and scrolling pages when the overScrollBy event of the WebView is triggered. You can determine the direction you want to scroll in by checking the deltaX of the event. Here's a kotlin solution:

override fun overScrollBy(deltaX: Int, deltaY: Int, scrollX: Int, scrollY: Int, scrollRangeX: Int, scrollRangeY: Int, maxOverScrollX: Int, maxOverScrollY: Int, isTouchEvent: Boolean): Boolean {
    if(parent.parent is WebViewPager) {
        val viewPager: WebViewPager = (parent.parent as WebViewPager)
        if(viewPager.scrollState == ViewPager.SCROLL_STATE_IDLE) {
            if(deltaX > 0) {
                if(checkAdapterLimits(1, viewPager.currentItem)) //right
                    (parent.parent as ViewPager).setCurrentItem(viewPager.currentItem + 1,true)
            }
            else {
                if(checkAdapterLimits(-1, viewPager.currentItem)) //left
                    (parent.parent as ViewPager).setCurrentItem(viewPager.currentItem - 1,true)
            }
        }
    }
    return false
}

override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
    parent.requestDisallowInterceptTouchEvent(true)

    return super.onInterceptTouchEvent(event)
}

private fun checkAdapterLimits(direction: Int, position: Int) : Boolean {
    return if(direction < 0) //left
        position >= 1
    else //right
        position < (parent.parent as ViewPager).adapter.count - 1

}

Edited, in order to stop scrolling to just one page at a time, you need to check the scroll state of the ViewPager to make sure it's idle.

You'll need to add a property to your custom ViewPager and toggle it with an OnPageChangedListener on the ViewPager instance you're using.

ViewPager:

class WebViewPager(context: Context, attrs: AttributeSet) : ViewPager(context, attrs) {

var scrollState: Int = SCROLL_STATE_IDLE

fun setDurationScroll(millis: Int) {
    try {
        val viewpager = ViewPager::class.java
        val scroller = viewpager.getDeclaredField("mScroller")
        scroller.isAccessible = true
        scroller.set(this, OwnScroller(context, millis))
    } catch (e: Exception) {
        e.printStackTrace()
    }

}

inner class OwnScroller(context: Context, durationScroll: Int) : Scroller(context, DecelerateInterpolator()) {

    private var durationScrollMillis = 1

    init {
        this.durationScrollMillis = durationScroll
    }

    override fun startScroll(startX: Int, startY: Int, dx: Int, dy: Int, duration: Int) {
        super.startScroll(startX, startY, dx, dy, durationScrollMillis)
    }
}

}

OnPageChangedListener:

viewPager!!.setDurationScroll(300)
    viewPager!!.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {

        override fun onPageScrollStateChanged(state: Int) {
            viewPager.scrollState = state
        }

        override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {

        }
        override fun onPageSelected(position: Int) {

        }

    })

Here's a gist with some updates to this solution. Hope it helps! https://gist.github.com/airowe/fb5c59f94fdfb5f1eb0b776a398a68f3 — airowe, Oct 25 '17 at 03:23
The code on your gist works well for horizontal scrolling, but it disables vertical scrolling. — March3April4, Apr 06 '20 at 03:01

score 2 · Answer 2 · edited May 23 '17 at 12:02

2

The ViewPager is the parent of your WebView. You can try to detect the swipe motion in your ViewPager and pass it directly to it's child.

You can check the official documentation for Managing Touch Events and you can check this Stack Overflow discussion. Check the accepted answer and more specifically the onInterceptTouchEvent() method.

That can give you some ideas.

edited May 23 '17 at 12:02

Community

1
1

answered Jan 26 '17 at 14:26

Todor Kostov

1,789
1
13
20

Unfortunately, this is not the solution I'm looking for. This is determining whether the ViewPager has reached its outer limits. I'm trying to detect when an action goes outside the bounds of the visible area of a WebView and determine whether there is still more scrolling area (action should be consumed) or whether we've reached the end of that scrolling area (action should be propagated up to the ViewPager). – airowe Jan 26 '17 at 14:44

Horizontally Scrolling WebView Inside ViewPager

2 Answers2