Add vertical scrolling to a section of android viewPager

Question

I have a viewPager that I populate using a FragmentStatePagerAdapter. It works fine, can go through populated pages horizontally.

However the middle section of each page on the viewPager is made up of a listView. This listview will sometimes not fit into the designated area, I need to be able to scoll vertically. But I cannot scroll vertically on this section of the viewPager at the moment.

It looks like the viewPager is consuming all the scroll events (both horizontal and vertical).

I do not want a vertical viewPager; I have seen a few answers to that on StackOverflow.

I want only the section in the middle of the viewPager to scroll vertical, and this section is a listView

This is the mainlayout for the tab with a viewPager:

           <LinearLayout 
            android:id="@+id/history"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:background="@color/fdi_gray">
            <android.support.v4.view.ViewPager
                 android:id="@+id/historyFragment_container"
                 android:layout_weight="0.85"
                 android:layout_width="fill_parent"
                 android:layout_height="0dip"/> 
             <include layout="@layout/page_indicator_history"
                android:layout_height="0dip"
                android:layout_width="fill_parent"
                android:layout_weight="0.05"
                android:background="@color/darker_gray"                 
                android:layout_marginTop="2dp"/>
       </LinearLayout>

And the layout out that is used by the ViewPager adapter to populate above viewPager is this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/spaceHolderLocations"> 
<TextView
    android:id="@+id/locationName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_marginTop="10dp"
    android:layout_centerHorizontal="true"
    android:textStyle="bold"
    android:textSize="17sp"/>
 <TextView
    android:id="@+id/latlon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_below="@+id/locationName"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="3dp"
    android:layout_centerHorizontal="true"/>

 <View
     android:id="@+id/listViewStart"
     android:layout_width="match_parent"
     android:layout_height="0.5dip"
     android:layout_marginLeft="3dp"
     android:layout_marginRight="3dp"
     android:layout_below="@+id/latlon"          
     android:background="@color/white" />

<ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/fdi_gray"
    android:layout_below="@+id/listViewStart"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:divider="@color/white"
    android:dividerHeight="0.5dip"
    android:padding="1dp">       
</ListView>  
<View
     android:id="@+id/listViewEnd"
     android:layout_width="match_parent"
     android:layout_height="0.5dip"
     android:layout_marginLeft="3dp"
     android:layout_marginRight="3dp"
     android:layout_below="@android:id/list"         
     android:background="@color/white" /> 
<TextView
    android:id="@+id/curingLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/listViewEnd"
    android:gravity="center"
    android:text="@string/curingLabel"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="30dp"        
    android:textSize="17sp"/>
 <TextView
    android:id="@+id/curingValue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/curingLabel"
    android:layout_marginLeft="30dp"
    android:layout_alignBottom="@+id/curingLabel"
    android:textStyle="bold"        
    android:textSize="17sp"/>       

Please note the listview in the above layout.

That's the section of the ViewPager that I want to be able to scroll on; but cannot, I can only scroll horizontally through the pages not vertically through the listView content if it doesn’t fit the page.

This question came close but it's not what I'm looking for: link

Thanks.

Answer 1

Implement the following functionality. I hope it helps you.

    mList = (ListView) findViewById(R.id.list);
    mList.setOnTouchListener(new View.OnTouchListener () {

    @Override
            public boolean onTouch(View v, MotionEvent event) {
                mList.getParent().requestDisallowInterceptTouchEvent(true);
                return false;
}
    });

When a touch event occurs, parent always get to intercept the event. Here the parent is View Pager. What you are trying to do here is, when a touch on list view appears, request the parent not to intercept the touch event. This way, the touch event will be received by the Child, which here is ListView, and thus scrolls accordingly.

Answer 2

Basically you cannot set the height of your list view to be "wrap content". give a fixed height, or choose a different layout like linearlayout and set its weight to 1 will be another solution. if you set it to wrap content, it will just take all the space and go beyond the screen.