HorizontalScrollView within ScrollView Touch Handling

Question

I have a ScrollView that surrounds my entire layout so that the entire screen is scrollable   The first element I have in this ScrollView is a HorizontalScrollView block that has features that can be scrolled through horizontally   I ve added an ontouchlistener to the horizontalscrollview to handle touch events and force the view to  snap  to the closest image on the ACTION UP event   So the effect I m going for is like the stock android homescreen where you can scroll from one to the other and it snaps to one screen when you lift your finger   This all works great except for one problem   I need to swipe left to right almost perfectly horizontally for an ACTION UP to ever register   If I swipe vertically in the very least  which I think many people tend to do on their phones when swiping side to side   I will receive an ACTION CANCEL instead of an ACTION UP   My theory is that this is because the horizontalscrollview is within a scrollview  and the scrollview is hijacking the vertical touch to allow for vertical scrolling     How can I disable the touch events for the scrollview from just within my horizontal scrollview  but still allow for normal vertical scrolling elsewhere in the scrollview   Here s a sample of my code      public class HomeFeatureLayout extends HorizontalScrollView       private ArrayList lt ListItem gt  items   null      private GestureDetector gestureDetector      View OnTouchListener gestureListener      private static final int SWIPE MIN DISTANCE   5      private static final int SWIPE THRESHOLD VELOCITY   300      private int activeFeature   0       public HomeFeatureLayout Context context  ArrayList lt ListItem gt  items           super context           setLayoutParams new LayoutParams LayoutParams FILL PARENT  LayoutParams WRAP CONTENT            setFadingEdgeLength 0           this setHorizontalScrollBarEnabled false           this setVerticalScrollBarEnabled false           LinearLayout internalWrapper   new LinearLayout context           internalWrapper setLayoutParams new LayoutParams LayoutParams FILL PARENT  LayoutParams FILL PARENT            internalWrapper setOrientation LinearLayout HORIZONTAL           addView internalWrapper           this items   items          for int i   0  i lt  items size   i                 LinearLayout featureLayout    LinearLayout  View inflate this getContext   R layout homefeature null               TextView header    TextView  featureLayout findViewById R id featureheader               ImageView image    ImageView  featureLayout findViewById R id featureimage               TextView title    TextView  featureLayout findViewById R id featuretitle               title setTag items get i  GetLinkURL                 TextView date    TextView  featureLayout findViewById R id featuredate               header setText  FEATURED                Image cachedImage   new Image this getContext    items get i  GetImageURL                 image setImageDrawable cachedImage getImage                 title setText items get i  GetTitle                 date setText items get i  GetDate                 internalWrapper addView featureLayout                     gestureDetector   new GestureDetector new MyGestureDetector             setOnTouchListener new View OnTouchListener                  Override             public boolean onTouch View v  MotionEvent event                    if  gestureDetector onTouchEvent event                         return true                                    else if event getAction      MotionEvent ACTION UP    event getAction      MotionEvent ACTION CANCEL                        int scrollX   getScrollX                        int featureWidth   getMeasuredWidth                        activeFeature     scrollX    featureWidth 2   featureWidth                       int scrollTo   activeFeature featureWidth                      smoothScrollTo scrollTo  0                       return true                                    else                      return false                                                         class MyGestureDetector extends SimpleOnGestureListener            Override         public boolean onFling MotionEvent e1  MotionEvent e2  float velocityX  float velocityY                try                     right to left                  if e1 getX   - e2 getX    gt  SWIPE MIN DISTANCE  amp  amp  Math abs velocityX   gt  SWIPE THRESHOLD VELOCITY                        activeFeature    activeFeature  lt   items size   - 1    activeFeature   1 items size   -1                      smoothScrollTo activeFeature getMeasuredWidth    0                       return true                                        left to right                 else if  e2 getX   - e1 getX    gt  SWIPE MIN DISTANCE  amp  amp  Math abs velocityX   gt  SWIPE THRESHOLD VELOCITY                        activeFeature    activeFeature  gt  0   activeFeature - 1 0                      smoothScrollTo activeFeature getMeasuredWidth    0                       return true                                  catch  Exception e                       nothing                           return false

User · Answer

Thank you Joel for giving me a clue on how to resolve this problem.

I have simplified the code(without need for a GestureDetector) to achieve the same effect:

public class VerticalScrollView extends ScrollView {
    private float xDistance, yDistance, lastX, lastY;

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

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                xDistance = yDistance = 0f;
                lastX = ev.getX();
                lastY = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                final float curX = ev.getX();
                final float curY = ev.getY();
                xDistance += Math.abs(curX - lastX);
                yDistance += Math.abs(curY - lastY);
                lastX = curX;
                lastY = curY;
                if(xDistance > yDistance)
                    return false;
        }

        return super.onInterceptTouchEvent(ev);
    }
}

User · Answer

Thanks to Neevek his answer worked for me but it doesn t lock the vertical scrolling when user has started scrolling the horizontal view ViewPager  in horizontal direction and then without lifting the finger scroll vertically it starts to scroll the underlying container view ScrollView   I fixed it by making a slight change in Neevak s code   private float xDistance  yDistance  lastX  lastY   int lastEvent -1   boolean isLastEventIntercepted false   Override public boolean onInterceptTouchEvent MotionEvent ev        switch  ev getAction              case MotionEvent ACTION DOWN              xDistance   yDistance   0f              lastX   ev getX                lastY   ev getY                  break           case MotionEvent ACTION MOVE              final float curX   ev getX                final float curY   ev getY                xDistance    Math abs curX - lastX               yDistance    Math abs curY - lastY               lastX   curX              lastY   curY               if isLastEventIntercepted  amp  amp  lastEvent   MotionEvent ACTION MOVE                   return false                             if xDistance  gt  yDistance                                      isLastEventIntercepted true                  lastEvent   MotionEvent ACTION MOVE                  return false                                 lastEvent ev getAction         isLastEventIntercepted false      return super onInterceptTouchEvent ev

User · Answer

I think I found a simpler solution  only this uses a subclass of ViewPager instead of  its parent  ScrollView   UPDATE 2013-07-16  I added an override for onTouchEvent as well  It could possibly help with the issues mentioned in the comments  although YMMV   public class UninterceptableViewPager extends ViewPager        public UninterceptableViewPager Context context  AttributeSet attrs            super context  attrs               Override     public boolean onInterceptTouchEvent MotionEvent ev            boolean ret   super onInterceptTouchEvent ev           if  ret              getParent   requestDisallowInterceptTouchEvent true           return ret              Override     public boolean onTouchEvent MotionEvent ev            boolean ret   super onTouchEvent ev           if  ret              getParent   requestDisallowInterceptTouchEvent true           return ret            This is similar to the technique used in android widget Gallery s onScroll    It is further explained by the Google I O 2013 presentation Writing Custom Views for Android   Update 2013-12-10  A similar approach is also described in a post from Kirill Grouchnikov about the  then  Android Market app

User · Answer

Update  I figured this out  On my ScrollView  I needed to override the onInterceptTouchEvent method to only intercept the touch event if the Y motion is   the X motion  It seems like the default behavior of a ScrollView is to intercept the touch event whenever there is ANY Y motion  So with the fix  the ScrollView will only intercept the event if the user is deliberately scrolling in the Y direction and in that case pass off the ACTION CANCEL to the children   Here is the code for my Scroll View class that contains the HorizontalScrollView   public class CustomScrollView extends ScrollView       private GestureDetector mGestureDetector       public CustomScrollView Context context  AttributeSet attrs            super context  attrs           mGestureDetector   new GestureDetector context  new YScrollDetector             setFadingEdgeLength 0               Override     public boolean onInterceptTouchEvent MotionEvent ev            return super onInterceptTouchEvent ev   amp  amp  mGestureDetector onTouchEvent ev                 Return false if we re scrolling in the x direction       class YScrollDetector extends SimpleOnGestureListener            Override         public boolean onScroll MotionEvent e1  MotionEvent e2  float distanceX  float distanceY                             return Math abs distanceY   gt  Math abs distanceX

User · Answer

It wasn t working well for me  I changed it and now it works smoothly  If anyone interested   public class ScrollViewForNesting extends ScrollView       private final int DIRECTION VERTICAL   0      private final int DIRECTION HORIZONTAL   1      private final int DIRECTION NO VALUE   -1       private final int mTouchSlop      private int mGestureDirection       private float mDistanceX      private float mDistanceY      private float mLastX      private float mLastY       public ScrollViewForNesting Context context  AttributeSet attrs              int defStyle            super context  attrs  defStyle            final ViewConfiguration configuration   ViewConfiguration get context           mTouchSlop   configuration getScaledTouchSlop               public ScrollViewForNesting Context context  AttributeSet attrs            this context  attrs 0              public ScrollViewForNesting Context context            this context null                    Override     public boolean onInterceptTouchEvent MotionEvent ev                  switch  ev getAction                  case MotionEvent ACTION DOWN                  mDistanceY   mDistanceX   0f                  mLastX   ev getX                    mLastY   ev getY                    mGestureDirection   DIRECTION NO VALUE                  break              case MotionEvent ACTION MOVE                  final float curX   ev getX                    final float curY   ev getY                    mDistanceX    Math abs curX - mLastX                   mDistanceY    Math abs curY - mLastY                   mLastX   curX                  mLastY   curY                  break                     return super onInterceptTouchEvent ev   amp  amp  shouldIntercept                private boolean shouldIntercept            if  mDistanceY  gt  mTouchSlop    mDistanceX  gt  mTouchSlop   amp  amp  mGestureDirection    DIRECTION NO VALUE               if Math abs mDistanceY   gt  Math abs mDistanceX                    mGestureDirection   DIRECTION VERTICAL                            else                  mGestureDirection   DIRECTION HORIZONTAL                                   if mGestureDirection    DIRECTION VERTICAL               return true                    else              return false

User · Answer

Neevek s solution works better than Joel s on devices running 3 2 and above  There is a bug in Android that will cause java lang IllegalArgumentException  pointerIndex out of range if a gesture detector is used inside a scollview  To duplicate the issue  implement a custom scollview as Joel suggested and put a view pager inside  If you drag  don t lift you figure  to one direction  left right  and then to the opposite  you will see the crash  Also in Joel s solution  if you drag the view pager by moving your finger diagonally  once your finger leave the view pager s content view area  the pager will spring back to its previous position  All these issues are more to do with Android s internal design or lack of it than Joel s implementation  which itself is a piece of smart and concise code    http   code google com p android issues detail id 18990

User · Answer

This finally became a part of support v4 library  NestedScrollView  So  no longer local hacks is needed for most of cases I d guess

User · Answer

I ve found out that somethimes one ScrollView regains focus and the other loses focus  You can prevent that  by only granting one of the scrollView focus       scrollView1   ScrollView  findViewById R id scrollscroll       scrollView1 setAdapter adapter       scrollView1 setOnTouchListener new View OnTouchListener               Override         public boolean onTouch View v  MotionEvent event                scrollView1 getParent   requestDisallowInterceptTouchEvent true               return false

[android] HorizontalScrollView within ScrollView Touch Handling

Examples related to android

Examples related to ontouchlistener

Examples related to android-scrollview

Examples related to horizontalscrollview