Android - ViewPager in ScrollView

One of the most famous question about Android is how can we put a ViewPager into the ScrollView. Yes i know, put a scrollable into an another scrollable is not a good idea in Android. And Google says never do that. But, what can we do? For example iOS guys can do that very easily and when your customer see this property in iOS app, wants the same property in Android app. Ok, let's see what can we do about that?

The important think is scroll gesture. When we scroll vertically or horizontally, viewpager never knows what is happening. Because, scroll gestures are handled by scrollview. So, if we can steal scroll event from the scrollview, we can inform viewpager about scrolling.

To steal scroll event from the scrollview, we have to create our custom scrollview and create our gesture detector. And in our gesture detector, we have to check gesture direction. If gesture direction is vertical, release gesture to be handled by scrollview. If gesture direction is horizontal, prevent the event to be handled by viewpager.

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)
               && 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) > Math.abs(distanceX));
    }
}

That's all. Put your viewpager into this custom scrollview in layout.

<com.muratonnet.sample.widget.CustomScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        ...

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="250dp" />

        ...

    </LinearLayout>

</com.muratonnet.sample.widget.CustomScrollView>

You can find source code and sample usage on