View Pager as List View Row Item

Question

I have a list view with 20 rows and I want to setup a view pager as each row in a list view. As the items coming in my row of the list view may one or more than one, and I want to show the list view row items using a view pager.

For this I am using the following code:

Custom Layout which is to be shown in the list view row (as the pager item)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/inner_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginRight="6.0dip"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:text="Example Value"
        android:textAppearance="?android:textAppearanceMedium" />

Main List View Custom Row Item having View Pager

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


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

</RelativeLayout>

MyPagerAdapter Class

public class MyPagerAdapter extends PagerAdapter {

    private Context context;

    public MyPagerAdapter(Context context) {
        this.context = context;
    }

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

    @Override
    public Object instantiateItem(View container, int position) {
        LayoutInflater inflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LinearLayout view = inflater.inflate(R.layout.inner_layout_file, null);
        ((ViewPager) container).addView(view, position);
        return view;
    }

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

    @Override
    public void destroyItem(View container, int position, Object object) {
        // TODO Auto-generated method stub
        ((ViewPager) container).removeView((View) object);
    }
}

List View Adapter GET VIEW METHOD

@Override
public View getView(int position, View convertView, ViewGroup parent) {


    LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    convertView = inflater.inflate(R.layout.horizontal_list_item, null,false);

    MyPagerAdapter adapter = new MyPagerAdapter(context);
    ViewPager myPager = (ViewPager) convertView.findViewById(R.id.mypager);
    myPager.setAdapter(adapter);

    myPager.setCurrentItem(0);

    return convertView;
}

I am getting no error and the view which is rendered after running it is always empty.

Answer 1

I faced same problem. Just give height to both viewpager and if needed your List View Row layout's main container.

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


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

</RelativeLayout>

Height must be set by fix value. If you want to make it dynamic you can try from setting it in your coding at run time.

Answer 2

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    ViewHolder viewHolder;


        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.listview_row, parent, false);
        CustomeListModel customeListModel = arrayList.get(position);
        Utils.d("debug", "in get view method ");

        MyPagerAdapter adapter = new MyPagerAdapter(context, customeListModel);
        viewHolder=new ViewHolder();

        viewHolder.viewPager= (ViewPager) convertView.findViewById(R.id.mypager);
        viewHolder.viewPager.setId(position + getCount());
        viewHolder.viewPager.setAdapter(adapter);
    viewHolder.viewPager.setMinimumWidth(100);
    viewHolder.viewPager.setCurrentItem(1);

    viewHolder.viewPager.setPageMargin(-380);

    convertView.setTag(viewHolder);

    return convertView;
}

Answer 3

I have faced the same issue and resolved it by providing id to the viewpager dynamically in the getView() method.

@Override
public View getView(int position, View convertView, ViewGroup parent) {


    LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    convertView = inflater.inflate(R.layout.horizontal_list_item, null,false);

    MyPagerAdapter adapter = new MyPagerAdapter(context);
    ViewPager myPager = (ViewPager) convertView.findViewById(R.id.mypager);

    **myPager.setId(position + getCount());**

    myPager.setAdapter(adapter);

    myPager.setCurrentItem(0);

    return convertView;
}

Hope this may help you.

Answer 4

I created sample app

Example ViewPager with fragment: https://dl.dropboxusercontent.com/u/20178650/builds/listviewwithviewpager.zip

BUT there is one big drawback. All the cells are stored in memory, and the application can crash by low memory, whether you have a lot of cells

EDIT:

Empirically it has been found. If use simply view instead fragment in ViewPager. I can write an adapter correctly and not be struck with the memory

Example ViewPager with view: https://dl.dropboxusercontent.com/u/20178650/builds/listviewwithviewpager_v2.zip

I hope someone can help

Answer 5

Change the line in instantiateItem() from:

((ViewPager) container).addView(view, position);

to:

((ViewPager) container).addView(view, 0);