Android different widths of layouts in ViewPager

Question

I want to create some scroll view using Horizontal View Pager. Left view must has full screen width, but right only a quarter of width (it will be a vertical panel like in Dolphin browser). It's possible to do that? I changed android:layout_width in right layout, but it didn't work.

My code:

 public class TestActivity extends FragmentActivity {

@Override
public void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_view);

    MyPagerAdapter adapter = new MyPagerAdapter();
    ViewPager pager = (ViewPager) findViewById(R.id.panelPager);
    pager.setAdapter(adapter);
    pager.setCurrentItem(0);
    }
 } 

main_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
    android:id="@+id/panelPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

MyPagerAdapter.java

public class MyPagerAdapter extends PagerAdapter {

@Override
public int getCount() {
    return 2;
}

@Override
public Object instantiateItem(final View collection, final int position) {

    LayoutInflater inflater =
            (LayoutInflater) collection.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    int resId = 0;
    switch (position) {
    case 0:
        resId = R.layout.left;
        break;
    case 1:
        resId = R.layout.right;
        break;
    }

    View view = inflater.inflate(resId, null);
    ((ViewPager) collection).addView(view, 0);

    return view;
}

@Override
public void destroyItem(final View arg0, final int arg1, final Object arg2) {
    ((ViewPager) arg0).removeView((View) arg2);

}

@Override
public boolean isViewFromObject(final View arg0, final Object arg1) {
    return arg0 == ((View) arg1);

}

left.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="LEFT" />

</LinearLayout>

right.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="50dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/light_blue" >


<TextView
    android:id="@+id/textView2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="RIGHT"/>

</LinearLayout>

Answer 1

Check Murphy's answer on this question . You need to override PagerAdapter's getPageWidth() method on your PagerAdapter class, like this for example:

@Override
public float getPageWidth(int page) {
    if(page==0) {
        Display display = getWindowManager().getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        return (float)LEFT_FRAGMENT_PIXEL_WIDTH / size.x;
    }
    else
        return super.getPageWidth(page);
}

Answer 2

Adrian is exactly right. ViewPager isn't designed to show a portion of the next post as a preview/teaser but it can do it. In my ViewPagerCursorAdapter extends PagerAdapter class I run this:

public Object instantiateItem(View collection, final int position) {
    cursor.moveToPosition(position);
    View newView = getPageView(cursor, collection);
    if (cursor.getCount() > 1) {
        ((ViewPager)collection).setPageMargin(-overlapMargin);
        if (! cursor.isLast()) { newView.setPadding(0, 0, overlapMargin, 0); }
    }
    ((ViewPager) collection).addView(newView);
    return newView; //returns the object reference as the tag for identification.
}

You will run into a strange z overlapping issue. The trick is to either apply the background only to ViewPager's background or to apply it to the view inside the newView you just set the padding for. Looks good and works great.

Answer 3

Looking at the source for ViewPager, this isn't something it's designed to do; it uses its own width to calculate scroll distances etc, with the clear assumption that all children will have the same width as the ViewPager itself.

For your specific case there may be a hacky workaround, though. You can specify a margin between adjacent pages, and this margin can be negative. This may give the result you want, provided the Z-ordering of the ViewPager's children is appropriate. Give it a try, and see whether it does what you need.