How to get several ViewPagers into a ScrollView?

Question

I am trying to implement a layout, which contains a list of ViewPagers. Each ViewPager is swipeable independently. See the link to the picture below.

picture of the layout

I tried with ScrollView and a LinearLayout with ViewPagers inside it, but I only get one ViewPager shown. Is it even possible to get several ViewPagers on one screen?

my code so far: main.xml

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

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

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager2"
            android:layout_width="wrap_content"
            android:layout_height="100dp" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager3"
            android:layout_width="wrap_content"
            android:layout_height="100dp" />
    </LinearLayout>

</ScrollView>

MainActivity

public class MainActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ViewPagerAdapter adapter2 = new ViewPagerAdapter( this );
        ViewPager pager = (ViewPager)findViewById( R.id.viewpager2 );
        pager.setAdapter( adapter2 );

        ViewPagerAdapter adapter3 = new ViewPagerAdapter( this );
        ViewPager pager3 =
            (ViewPager)findViewById( R.id.viewpager3 );
        pager3.setAdapter( adapter3 );   
    }

}

Any ideas? Thanks! EDIT: this code actually works!

Answer 1

On your LinearLayout, in your XML. Set android:weightSum="2". For each viewpager, set android:layout_weight="1". Also, set the height of each child of the LinearLayout to 0dp. That should do the trick

Answer 2

There is indeed something fishy with using multiple ViewPager. I am inflating several views, each holding a ViewPager, and only the first ViewPager got populated with data from its adapter. However, if I give each ViewPager an unique id, all of them gets populated.

I have a container whose only child is a ViewPager:

ViewPager pager = (ViewPager) pagerContainer.getChildAt(0);
         pager.setId(i);

where i is a positive index of a loop.

Answer 3

The issue is related to by default height of ViewPager as by default it is taking "fill_parent" , which we are not able to reset with "wrap_content". The solution which i found that fixing the height to some hard code value will return you all the view pager item appear in your screen.

I know this is some fishy solution but it works fine for me and i hope it should work with you.