Dynamic ViewPager in android

ViewPager

ViewPager is one of the most commonly used component in android. It has its unique functionality of swiping between pages. It is used with Fragment as it manages lifecycle of each page by its own.

But it increases complexity when it is implemented with fragment. Sometimes with less care in fragments leads to memory leaks. It also has a role to play in implementing the adapter. When we have multiple View pagers in our app, we can avoid FragmentPager Adapter and FragmentStatePager.

Usually , FragmentPager is used when there is a fixed number of pages . The fragments visited is kept in the memory until it is destroyed which leads to a significant amount of memory.

In case of FragmentStatePager , it can work with large number of pages with memory saving. It only stores the data or saved instance of visited page and destroys the fragments when it is not visible.

It is a good way to create our view pager by extending PagerAdapter. Instead of creating fragments , create custom views and pass it to Pager class. Here our views are independent of lifecycle callbacks.

class Pager extends PagerAdapter {

    List<View> views;
    Context context;

    public Pager(List<View> views, Context context) {
        this.views = views;
        this.context = context;
    }

    public View getView(int position) {
        return views.get(position);
    }

    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) 
   {
       View view = views.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public int getItemPosition(Object object) {
        for(int index = 0 ; index < getCount() ; index++){
        if((View)object == views.get(index)) {
            return index;
        }
        }
        return POSITION_NONE;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "View " + (position + 1);
    }

Now set this pager adapter to ViewPager ,

ViewPager viewPager = findViewById(R.id.pager);
TabLayout tabLayout = findViewById(R.id.tabs_container);
List<View> views = new ArrayList<>();
//add views which we want to set as pages
pagerAdapter = new Pager(views, this);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);

In this way , the view pager is implemented with the static list of views. We can dynamically add or delete a view from view pager.

Here notifyDataSetChanged() is useful only when there is change in view pager data (either items in view pager is added or removed) , not to refresh contents of fragment.

To add view Dynamically:

//If we want to add page always at end , use views.size() as position
views.add(position, viewToBeAdded); 
pagerAdapter.notifyDataSetChanged();
//If we need to set last added page as current page
viewPager.setCurrentItem(position);

To delete any page dynamically:

//in case of delete , make adapter null before removing view from views list
viewPager.setAdapter(null);
views.remove(view);
//Adapter needs to be reinitialised with new list of views
pagerAdapter = new Pager(cfViews, getApplicationContext());
viewPager.setAdapter(pagerAdapter);

pagerAdapter.notifyDataSetChanged();
viewPager.setCurrentItem(position);

View pager Layout:

<RelativeLayout
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs_container"
            android:layout_width="wrap_content"
            app:tabSelectedTextColor="@color/color"
            app:tabTextColor="@color/black"  
            android:layout_height="48dp"
            android:background="@color/white"
            android:backgroundTint="@color/grey"
            android:paddingLeft="4dp"
            app:tabGravity="fill"
            app:tabMode="scrollable"
            app:tabPadding="16dp"
            />

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

</RelativeLayout>

It is as simple as adding or removing an item from List View . It is fine to use views instead of fragment in view pager to reduce complexity.

Blithe coding!