How to dynamically add image to a viewpager containing imageview?

Question

I have a viewpager in my main_layout. The view pager contains only an ImageView wrapped by RelativeLayout

What i would like to do is when a user click on a button, it will add an image to that particular viewpager.

I found this answer here on stackoverflow (which i think it is relevant to my question), however i am completely lost with that code.

Dynamically Adding View to viewpager

So far this is my code:

MainActivity.Java

private PagerAdapter pAdapter;
private ViewPager photoPager;

...

pAdapter = new GalleryPagerAdapter(getApplicationContext());
photoPager.setAdapter(pAdapter);

GalleryPagerAdapter.java

public class GalleryPagerAdapter extends PagerAdapter{

    private final Context context;
    LayoutInflater inflater;
    private final int[] GalImages = new int[] {
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher
    };

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

    @Override
    public int getCount() {
        return GalImages.length;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        int padding = 10;
        imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.MATRIX);
        imageView.setImageResource(GalImages[position]);
        container.addView(imageView, 0);
        return imageView;
    }

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

This is the view that i would like to add dynamically

<?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="fill_parent"
    android:gravity="center"
    android:padding="10dp" >
    <ImageView
        android:id="@+id/photo_thumb"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="#000000"
        android:scaleType="fitXY"
        android:padding="0dp" />
</RelativeLayout>

And this is my MainActivity where my ViewPager exists

MainActivity.xml
<LinearLayout
    android:id="@+id/bannerLayout"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="0.4"
    android:layout_margin="0dip"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/photoPager"
        android:layout_width="fill_parent"
        android:layout_height="125dp"
        android:background="#4F4E4F"/>
</LinearLayout>

So my question is how do i improve the code i am using so that i can dynamically add new image to my ViewPager

ps: On the reference link (which i strongly believe relevant to my question), i am completely lost on this part:

// Create an initial view to display; must be a subclass of FrameLayout.
FrameLayout v0 = (FrameLayout) inflater.inflate (R.layout.one_of_my_page_layouts, null);
pagerAdapter.addView (v0, 0);

What is inflater ?? What should i initialize it to?

I hope someone could direct me. And i am sorry if i sound like asking multiple question here.

Answer 1

Inflater is used to create View object out of your xml layout.

So if your lauout R.layout.one_of_my_page_layouts:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:padding="10dp" >
    <ImageView
        android:id="@+id/photo_thumb"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="#000000"
        android:scaleType="fitXY"
        android:padding="0dp" />
</RelativeLayout>

Inflater will do something like this(Just an example)

ImageView iv=new ImageView(context);
RelativeLayout rl=new RelativeLayout(context);
rl.add(iv)
return rl;

Just the minimal code but inflater will set all the layout params as well.

So instead of create a view dynamically like you are doing in instantiateItem if you have an xml you can simply inflate it and get an object of Type view.

So you can change instantiateItem to:

 public Object instantiateItem(ViewGroup container, int position) {
        RelativeLayout v0 = (RelativeLayout ) inflater.inflate (R.layout.one_of_my_page_layouts, null);

        ImageView imageView = vo.findViewById(R.id.photo_thumb);
        int padding = 10;
        imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.MATRIX);
        imageView.setImageResource(GalImages[position]);
        container.addView(v0, 0);
        return v0;
    }