ViewPager scrolling issue.
However, as I mentioned in my previous article ViewPager is not very usable if it's nested into a container with vertical scrolling. E.g. ViewPager inside ScrollView or ListView with ViewPager as a list item view. Imagine the case: you drag the ViewPager's page to view the next one, and booms! page horizontal scrolling is interrupted and parent vertical scrolling begins.
Why? The issue is caused by intercepting of touch events from ViewPager by parent container. Parent scroll container listens for scroll touch events and if there vertical shift it steals the event from it's child views. It just thinks that user wants to scroll the parent container vertically. So, let's help him with a more accurate decision!
Solution.
Full source code of my ViewPager subclass that resolves scrolling directions much much better is available here: SmartViewPager.java
It doesn't require any special configuration or actions from you. Just use it instead of the regular ViewPager and your users will be happy with a new smooth and expected scrolling behavior! ;-)
So, how it's done? There are two extras to help.
- custom SimpleOnGestureListener subclass helps us to detect the initial direction of scrolling. If the X-axis shift greater than the Y-axis shift, it will tell ViewPager to call requestDisallowInterceptTouchEvent at the parent.
- if the scroll gesture was initiated horizontally then ViewPager will be "locked" until gesture completion (finger up). So the parent scroll container will not be able to intercept ViewPager's events. It's somewhat similar to iOS scroll view behavior which locks the scrolling axis when the scrolling direction (horizontal or vertical) was resolved.
Will that extras break the original parent vertical scrolling? No, don't worry, all scroll directions are perfectly accessible. Here is the sample video from my Urban Curiosity application:
Check out the next article to read more about the pitfalls you may encounter during 4-directions swipe navigation implementation: http://vision-apps.blogspot.com/2013/05/4-directions-swipe-navigation.html
Sample project is available at https://bitbucket.org/NxAlex/swipes-navigation-demo.
Sample project is available at https://bitbucket.org/NxAlex/swipes-navigation-demo.
Perfect! Works flawlessly.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi Pavan, thanks for your comment. I checked out your urls. The first one is purely about the basic ScrollView usage. Which is so simple in fact. ;-)
DeleteThe second one maybe useful for some newcomers to see how to make visual look styling.
The main goal of my article was to show how to deal with scrolling direction issues when you use scrolling containers together.
Is there a way to put a ScrollView inside one of the vertical fragments, like the CentralFragment? When I try, the vertical paging works but I am unable to scroll to the bottom of CentralFragment content. Do you have any thoughts on how to achieve this? Thanks!
ReplyDeleteI have the same problem. Did you solve your application?
DeleteThanks..it save my day :-)
ReplyDelete