How To Add Multiple Contents In View Pager?

Hi I am working with android apps.I had created a swipeable view using view pager which contains only images at the right end. Now I want to add some textviews and buttons in the s

Solution 1:

You can create a layout containing your Image, Button, Text. Then inflate that layout in the pager adapter instantiateItem

mylayout.xml

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/tv_myText"style="?android:textAppearanceMedium"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:id="@+id/imgMap"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scaleType="center" /><Buttonandroid:id="@+id/btnTopup"android:layout_width="match_parent"android:layout_height="match_parent" /></RelativeLayout>

In your PagerAdapter use

public Object instantiateItem(ViewGroup container, int position) {

    LayoutInflaterinflater= ((Activity)context).getLayoutInflater();
    ViewmyView= inflater.inflate(R.layout.mylayout, null);
        //Access yout textView, ImageView, Button like belowTextViewmyText= (TextView)myView.findViewById(R.id.tv_myText);

    return myView;
  }

context can be obtained by passing it in the PagerAdapter constructor from the calling activity.

Hope this helps.

Solution 2:

I encountered the same issue when using Mike Ortiz's TouchImageView (for zoom capabilities) within a ViewPager (which I can only get to take one main view, in this case the extended ImageView), and worked out a neat solution. I wanted to add some dynamic text to a series of maps that the user swiped though, adding "Map 3/13" etc. as an overlay. I got around this by instantiating the extra views (TextView in my case) outside of the ViewPager adapter, then adding an onPageChangeListener to the viewPager object which updated the textView.

Firstly I set up the XML to take both views (the RelativeLayout allows the text to overlay the image):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/RelativeLayoutPager"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">

<org.mypackagename.ExtendedViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true" />

<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/viewpager"
    android:layout_alignLeft="@id/viewpager"
    android:layout_alignRight="@id/viewpager"
    android:layout_alignTop="@id/viewpager"
    android:layout_gravity="right"
    android:layout_weight="1.0"
    android:gravity="right"
    android:paddingRight="5dip"
    android:paddingTop="5dp"
    android:text=""
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textStyle="bold" />

</RelativeLayout>

My ViewPager adapter instantiateItem method only handles the TouchImageView view:

public View instantiateItem(ViewGroup container, int pos) {
        TouchImageView img = new TouchImageView(container.getContext());
        img.setImageDrawable((Drawable) imageHolder.get(pos));
        container.addView(img, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        return img;
}

And finally I created the listener in the onCreate method after setting up the TextView and ViewPager views:

vPager.setOnPageChangeListener(newViewPager.SimpleOnPageChangeListener() {
        privateint currentPage;

        @OverridepublicvoidonPageSelected(int pos) {
            currentPage = pos;
            StringBuildersb=newStringBuilder();
            sb.append("Map ");
            sb.append((pos + 1));
            sb.append("/");
            sb.append(allMaps.size());
            myTextView.setText(sb);
        }

        publicfinalintgetCurrentPage() {
            return currentPage;
        }
});

Now, when I swipe through the maps, the TextView is also updated. You can't do this from within the adapter instantiateItem method as the position doesn't seem to reflect what page you are on when it's updated by the swipe (no idea why!)...