Android different layout widths in ViewPager

Question

I want to create some kind of scroll using Pager. The left view should have the width of the entire screen, but only a quarter of the width (this will be a vertical panel, for example, in the Dolphin browser). It can be done? I changed android:layout_width in the correct layout, but this did not work.

My code is:

  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 to this question . You need to override the PagerAdapter getPageWidth() method in your PagerAdapter class, 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 right. ViewPager is not intended to display part of the next message as a preview / teaser, but it can do it. In my ViewPagerCursorAdapter extends PagerAdapter I ran 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 encounter a strange z-overlap problem. The trick is to either apply the background only to the background of the ViewPager, or apply it to the view inside the newView, for which you simply install the add-on. It looks good and works great.

Answer 3

Looking at the source for the ViewPager is not what it is intended to be; it uses its own width to calculate scroll, etc. with the clear assumption that all children will have the same width as the ViewPager itself.

In your particular case, a hacky workaround may occur. You can specify the border between adjacent pages, and this field can be negative. This may produce the result you want, provided that the Z-ordering of the ViewPager children is appropriate. Try it and see if it does what you need.