ViewPager does not show content

Question

I am trying to create a ViewPager that shows a list of ImageViews. I am able to implement the pager and adapter properly, and it works as expected on swiping. However, it does not show the content of the ImageView properly, ie the image itself. Its as if the images are there, but they are transparent. Only one image is visible out of the whole lot.

Here is my code-

ImagePagerAdapter.java

public class ImagePagerAdapter extends PagerAdapter {
    LayoutInflater inflater;
    List<ImageView> views = new ArrayList<>();
    boolean[] done = {false,false,false,false,false};
    ItemDetailFragment idf;

    public ImagePagerAdapter(ItemDetailFragment idf,
            LayoutInflater inflater) {
        this.idf = idf;
        this.inflater = inflater;
        for (int i = 0; i < getCount(); i++) {
            ImageView iv = new ImageView(idf.getActivity());
            iv.setImageResource(R.drawable.light_grey_background);
            views.add(iv);
        }
    }

    public ImagePagerAdapter(LayoutInflater inflater) {
        this.inflater = inflater;
        for (int i = 0; i < getCount(); i++) {
            ImageView iv = new ImageView(inflater.getContext());
            iv.setImageResource(R.drawable.light_grey_background);
            views.add(iv);
        }
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        if (done[position]) {
            return views.get(position);
        }
        ImageView v = views.get(position);
        views.set(position, v);
        ((ViewPager) container).addView(v);
        done[position] = true;
        return v;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
    }

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

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

}

ItemDetailFragment.java : This is where I set the adapter.

public class ItemDetailFragment extends Fragment {
ViewPager pager;
ImagePagerAdapter adapter;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_item_detail,
        container, false);
    pager = (ViewPager) rootView.findViewById(R.id.pager);
    adapter = new ImagePagerAdaper(this, inflater);
    pager.setAdapter(adapter);
}

fragment_item_detail.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="com.trial.piclist.ItemDetailFragment" >

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="200dip" >

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

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/item_title"
            style="?android:attr/textAppearanceLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello"
            android:textIsSelectable="true" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <include
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            layout="@layout/controls_layout" />
    </TableRow>

    <ScrollView
        android:id="@+id/descScrollView"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/item_detail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/hello" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

Please Help. Thanks.

Answer 1

Use:

public class ImagePagerAdapter extends PagerAdapter {

LayoutInflater Inflater;
Activity act;
int count;
public ViewPagerAdapter(Activity a, int c) {
    act = a;
            count=c;
    Inflater = (LayoutInflater) act
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

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

@Override
public Object instantiateItem(View collection, int position) {
            View v1 = Inflater.inflate(R.layout.element_image, null);
        ImageView image = (ImageView) v1
                .findViewById(R.id.about_image);
        image.setImageResource(R.drawable.light_grey_background);
        ((ViewPager) collection).addView(v1, 0);

    return v1;
}

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

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

@Override
public Parcelable saveState() {
    return null;
}
}

Make a layout element_image.xml:

<?xml version="1.0" encoding="utf-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/smv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />

Replace

adapter = new ImagePagerAdaper(this, inflater);

with

adapter = new ImagePagerAdaper(getActivity(), count_of_images);

Answer 2

initiate the ImageView in the instantiateItem() method, set the LayoutParams of the imageView

 ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,    ViewGroup.LayoutParams.MATCH_PARENT);
 imageView.setLayoutParams(params);

Also set the bg colour for debugging

 imageView.setBackgroundColor(Color.GREEN);
 viewPager.setBackgroundColor(Color.RED);