Home / user interface / Solution for Android ViewPager inside a ScrollView

Solution for Android ViewPager inside a ScrollView

Posted by Unknown Minggu, 02 Juni 2013 0 komentar

I really like Android ViewPager component. It can be used in so many ways: from app navigation to gallery like screens.

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 that 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 here:
https://bitbucket.org/NxAlex/swipes-navigation-demo

Thanks for your attention! :-)

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Solution for Android ViewPager inside a ScrollView
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://androidillegal.blogspot.com/2013/06/solution-for-android-viewpager-inside.html. Terima kasih sudah singgah membaca artikel ini.