Last Updated: February 25, 2016
·
16.67K
· jjalonso

ViewPager children into single layout XML

I read a lot of post about use ViewPager component of Android using only Java code, i hate build user interfaces programatically because i prefer use the XML layout way. You can do it easily using also some layout files and inflating these, but... The perfect way it's nesting the children views in one SINGLE xml file.

And you can do it!

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

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

 <LinearLayout
 android:id="@+id/page_one"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
 <TextView
 android:text="PAGE ONE IN"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:textColor="#fff"
 android:textSize="24dp"/>
 </LinearLayout>

 <LinearLayout
 android:id="@+id/page_two"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
 <TextView
 android:text="PAGE TWO IN"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:textColor="#fff"
 android:textSize="24dp"/>
 </LinearLayout>

</android.support.v4.view.ViewPager>

The problem is that you continue needing the adapter for route the request, but atleast the views is nested.

class WizardPagerAdapter extends PagerAdapter {

 public Object instantiateItem(View collection, int position) {

 int resId = 0;
 switch (position) {
 case 0:
 resId = R.id.page_one;
 break;
 case 1:
 resId = R.id.page_two;
 break;
 }
 return findViewById(resId);
 }

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

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

// Set the ViewPager adapter
WizardPagerAdapter adapter = new WizardPagerAdapter();
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);

A better version and self-handled is implement it reading the childrens with getChildAt()

Happy Hacking!

1 Response
Add your response

I discover an issue if you try to do it with more than 2 pages, the viewpager dont show properly the third because only two pages is cached. The simple trick is increment this cache with pager.setOffscreenPageLimit(N);

Where "N" is the total amount of cached pages before and after the current page. The default is 1.

Really i think that the solution is other but for my only-three pages is a cheap solution.

over 1 year ago ·