HorizontalScrollView inside SwipeRefreshLayout

Question

I implemented the new SwipeRefreshLayout component in my application and it works well with any vertical views, like ListView, GridView and ScrollView.

It behaves very bad with horizontal views, like HorizontalScrollView. When scrolling to the right or left, the SwipeRefreshLayout view caches the touch, prevents the HorizontalScrollView from receiving it and starts scrolling vertically to perform the refresh.

I tried solving this issue as I previously solved issues with vertical ScrollView with ViewPager inside, using requestDisallowInterceptTouchEvent but it didn't work. I also noticed that this method is overridden in the original SwipeRefreshLayout class without returning the super. Google's developer left a comment instead "//Nope." :)

Because SwipeRefreshLayout component is relatively new, I couldn't find a solution that fixes the horizontal scroll issue while still allowing the swipe to refresh view to track and handle vertical scrolling so I thought I'll share my solution with hopes it will spare someone an hour or two.

This issue seems to be fixed in _1.2.0-alpha01_ – Muntashir Akon Aug 01 '20 at 06:02 — Muntashir Akon, Aug 01 '20 at 06:02

Lior Iluz · Accepted Answer · 2015-08-17T09:32:45.723

168

I solved it by extending SwipeRefreshLayout and overriding its onInterceptTouchEvent. Inside, I calculate if the X distance the user has wandered is bigger than the touch slop. If it does, it means the user is swiping horizontally, therefor I return false which lets the child view (the HorizontalScrollView in this case) to get the touch event.


public class CustomSwipeToRefresh extends SwipeRefreshLayout {

    private int mTouchSlop;
    private float mPrevX;

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

        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPrevX = MotionEvent.obtain(event).getX();
                break;

            case MotionEvent.ACTION_MOVE:
                final float eventX = event.getX();
                float xDiff = Math.abs(eventX - mPrevX);

                if (xDiff > mTouchSlop) {
                    return false;
                }
        }

        return super.onInterceptTouchEvent(event);
    }
}

edited Aug 17 '15 at 09:32

answered Jun 02 '14 at 08:07

Lior Iluz

26,213
16
65
114

8

Amazing. Thanks for a great solution! I probably never would have figured this out. You just need to drop the custom widget in place of the original swipe refresh layout in the xml file and it works! This should probably be patched into the Android source! – Meanman Nov 05 '14 at 11:59
I had a similar problem. I am using a `com.baoyz.swipemenulistview.SwipeMenuListView` nested inside the `SwipeRefreshLayout`, and if I swipe to the left purely, it reveals my "delete" button for list items. But if my left swipe is even ever so slightly downward sloping, the swipe down refresh layout captures the gesture and doesn't let the swipe-left listeners get invoked fully. With your custom implementation, it all works! – Shiprack Jan 27 '16 at 12:23
1

Why not just use mPrevX = event.getX(); instead of mPrevX = MotionEvent.obtain(event).getX(); ? MotionEvent.obtain(event) will create a motion event that needs to be recycled unless memory leak will be caused. – Viky Leaf Jan 04 '17 at 07:09
You missed a constructor super(context, attrsSet) – Denis Makovsky Sep 11 '17 at 08:45
Updated kotlin version without memory leak: https://gist.github.com/EdwardvanRaak/7d431f83801c72355d31598f4d8f1c66 – Edward van Raak Oct 07 '19 at 12:33
@EdwardvanRaak so you basically copied https://stackoverflow.com/a/24453194/444324 and converted to Kotlin. – Lior Iluz Oct 07 '19 at 14:32
1

No... I took your code, removed the extra `MotionEvent.obtain()` call that wasn't doing anything + caused a warning about a possible memory leak. Then I converted to kotlin and added additional code to detect if the top of the recyclerview is actually reached. Because with your current code this causes a bug where first scrolling to the bottom of a recyclerview causes pull to refresh to trigger accidentally as well (after scrolling the list up again). – Edward van Raak Oct 09 '19 at 12:22

Twibit · Answer 2 · 2014-08-27T14:41:42.720

28

If you do not memorize the fact that you already declined the ACTION_MOVE event, you will eventually take it later if the user go back near your initial mPrevX.

Just add a boolean to memorize it.

public class CustomSwipeToRefresh extends SwipeRefreshLayout {

    private int mTouchSlop;
    private float mPrevX;
    // Indicate if we've already declined the move event
    private boolean mDeclined;

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

        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPrevX = MotionEvent.obtain(event).getX();
                mDeclined = false; // New action
                break;

            case MotionEvent.ACTION_MOVE:
                final float eventX = event.getX();
                float xDiff = Math.abs(eventX - mPrevX);

                if (mDeclined || xDiff > mTouchSlop) {
                    mDeclined = true; // Memorize
                    return false;
                }
        }

        return super.onInterceptTouchEvent(event);
    }
}

edited Aug 27 '14 at 14:41

answered Jun 27 '14 at 13:34

Twibit

2,254
2
14
12

How to produce the problem you describe? I had no issues with @LiorIluz's answer. – shkschneider Feb 10 '15 at 17:07
3

It happens when you start dragging a view horizontally and come back to your start point. When you come back, you catch the event. A simple way to reproduce is to drag left, drag down and drag right. – Twibit Feb 10 '15 at 17:22
Indeed. Thanks for the explaination, I reproduced it. And your solution worked. Nice catch ;) – shkschneider Feb 10 '15 at 17:37
3

Why not just use mPrevX = event.getX(); instead of mPrevX = MotionEvent.obtain(event).getX(); ? MotionEvent.obtain(event) will create a motion event that needs to be recycled unless memory leak will be caused. – Viky Leaf Jan 13 '17 at 09:25
How do you use this class in this row `mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);` If I replace SwipeRefreshLayout with CustomSwipeToRefresh it crashes. – Sam Tyurenkov Oct 14 '19 at 22:21

score 1 · Answer 3 · answered Oct 15 '18 at 08:20

The solution proposed by Lior Iluz with overriding onInterceptTouchEvent() has a serious issue. If the content scrollable container is not fully scrolled-up, then it may be not possible to activate swipe-to-refresh in the same scroll-up gesture. Indeed, when you start scrolling the inner container and move finger horizontally more then mTouchSlop unintentionally (which is 8dp by default), the proposed CustomSwipeToRefresh declines this gesture. So a user has to try once more to start refreshing. This may look odd for the user.

I extracted the source code of the original SwipeRefreshLayout from the support library to my project and re-wrote the onInterceptTouchEvent(). The new class name is TouchSafeSwipeRefreshLayout

private boolean mPendingActionDown;
private float mInitialDownY;
private float mInitialDownX;
private boolean mGestureDeclined;

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    ensureTarget();
    final int action = ev.getActionMasked();
    int pointerIndex;

    if (mReturningToStart && action == MotionEvent.ACTION_DOWN) {
        mReturningToStart = false;
    }

    if (!isEnabled() || mReturningToStart || mRefreshing ) {
        // Fail fast if we're not in a state where a swipe is possible
        if (D) Log.e(LOG_TAG, "Fail because of not enabled OR refreshing OR returning to start. "+motionEventToShortText(ev));
        return false;
    }

    switch (action) {
        case MotionEvent.ACTION_DOWN:
            setTargetOffsetTopAndBottom(mOriginalOffsetTop - mCircleView.getTop());
            mActivePointerId = ev.getPointerId(0);

            if ((pointerIndex = ev.findPointerIndex(mActivePointerId)) >= 0) {

                if (mNestedScrollInProgress || canChildScrollUp()) {
                    if (D) Log.e(LOG_TAG, "Fail because of nested content is Scrolling. Set pending DOWN=true. "+motionEventToShortText(ev));
                    mPendingActionDown = true;
                } else {
                    mInitialDownX = ev.getX(pointerIndex);
                    mInitialDownY = ev.getY(pointerIndex);
                }
            }
            return false;

        case MotionEvent.ACTION_MOVE:
            if (mActivePointerId == INVALID_POINTER) {
                if (D) Log.e(LOG_TAG, "Got ACTION_MOVE event but don't have an active pointer id.");
                return false;
            } else if (mGestureDeclined) {
                if (D) Log.e(LOG_TAG, "Gesture was declined previously because of horizontal swipe");
                return false;
            } else if ((pointerIndex = ev.findPointerIndex(mActivePointerId)) < 0) {
                return false;
            } else if (mNestedScrollInProgress || canChildScrollUp()) {
                if (D) Log.e(LOG_TAG, "Fail because of nested content is Scrolling. "+motionEventToShortText(ev));
                return false;
            } else if (mPendingActionDown) {
                // This is the 1-st Move after content stops scrolling.
                // Consider this Move as Down (a start of new gesture)
                if (D) Log.e(LOG_TAG, "Consider this move as down - setup initial X/Y."+motionEventToShortText(ev));
                mPendingActionDown = false;
                mInitialDownX = ev.getX(pointerIndex);
                mInitialDownY = ev.getY(pointerIndex);
                return false;
            } else if (Math.abs(ev.getX(pointerIndex) - mInitialDownX) > mTouchSlop) {
                mGestureDeclined = true;
                if (D) Log.e(LOG_TAG, "Decline gesture because of horizontal swipe");
                return false;
            }

            final float y = ev.getY(pointerIndex);
            startDragging(y);
            if (!mIsBeingDragged) {
                if (D) Log.d(LOG_TAG, "Waiting for dY to start dragging. "+motionEventToShortText(ev));
            } else {
                if (D) Log.d(LOG_TAG, "Dragging started! "+motionEventToShortText(ev));
            }
            break;

        case MotionEvent.ACTION_POINTER_UP:
            onSecondaryPointerUp(ev);
            break;

        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            mIsBeingDragged = false;
            mGestureDeclined = false;
            mPendingActionDown = false;
            mActivePointerId = INVALID_POINTER;
            break;
    }

    return mIsBeingDragged;
}

See my example project on Github.

score 0 · Answer 4 · answered Aug 29 '14 at 08:31

If you use the Tim Roes EnhancedListView

See this issues. I was very usefull for me because they add a fonction who detect when the swipe begin and when the swipe finish.

When swipe begin, i disable the SwipeRefreshLayout and when swipe finish, i enble the swipeRefreshLayout.

Dale King · Answer 5 · 2020-07-16T21:56:34.787

Here is what I did:

class HorizontalScrollViewWithDragListener
    @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null) : HorizontalScrollView(context, attrs) {
    var draggingState: Boolean = false
        set(value) {
            if (field != value) {
                field = value
                listener?.invoke(value)
            }
        }

    var listener: ((draggingState: Boolean) -> Unit)? = null

    override fun onInterceptTouchEvent(ev: MotionEvent) =
        super.onInterceptTouchEvent(ev)
            .also { draggingState = it }


    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(ev: MotionEvent) =
        super.onTouchEvent(ev)
            .also {
                if(ev.action == MotionEvent.ACTION_UP) {
                    draggingState = false
                }
            }
}

Then I just do this in setup code:

   myScrollView.listener = { refreshView.isEnabled = !it }

HorizontalScrollView inside SwipeRefreshLayout

5 Answers5

Linked