Question

I have a layout that has a ViewPager inside of a custom ScrollView and the ViewPager won’t scroll vertically. The custom ScrollView is used to fix the dreaded tab swiping with a ScrollView.

Yes, there is enough content for it to scroll and I’ve tried with and without the bottom buttons.

I’m using the ActionBar that has 3 tabs and the current code allows swiping left / right just fine.

My goal is to have the bottom bar for a couple action items such as save and cancel and the part between the ActionBar and the buttons at the bottom be the ViewPager that will scroll vertically.

I’ve tried too many combinations and am now sending this love letter to you. Any ideas? Any help is appreciated and feel free to ask for additional details if needed.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/footer"
        style="@android:style/Holo.ButtonBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/saveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Save" />

        <Button
            android:id="@+id/cancelButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Cancel" />
    </LinearLayout>

    <com.blah.hootiehoo.ViewPagerCompatScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/footer"
        android:fillViewport="true" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:scrollbarAlwaysDrawVerticalTrack="true"
            android:scrollbars="vertical" >

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:scrollbarAlwaysDrawVerticalTrack="true"
                android:scrollbars="vertical" >
            </android.support.v4.view.ViewPager>
        </LinearLayout>
    </com.blah.hootiehoo.ViewPagerCompatScrollView>

</RelativeLayout>

MainActivity.java

ViewPager mViewPager;
TabsAdapter mTabsAdapter;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);
    mViewPager = (ViewPager)findViewById(R.id.pager);

    // setup action bar for tabs
    ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setDisplayHomeAsUpEnabled(true);   

    mTabsAdapter = new TabsAdapter(this, mViewPager);

    Tab tab = actionBar.newTab();
    // tab setup
    mTabsAdapter.addTab(/*** stuff ***/);

    // add 2 more tabs, etc
}

ViewPagerCompatScrollView.java Got from here, at bottom

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

    public ViewPagerCompatScrollView(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);
    }
}

Answer 1

As per earlier comment:

Is it an option to swap the ScrollView and ViewPager around? From experience I know that a ScrollView inside a ViewPager works without any problems. So basically instead of wrapping the ViewPager by a ScrollView, give every ‘page’ a ScrollView as root.

Glad to hear that worked for you.