Question

There is an image shown below for what I am looking for. Currently I am using view pager & circle indicator. In view page it is showing only a single image.

I want in one viewpager three images as shown in pic. When I slide that page, again three different images loaded form server with text below. How to do this? Any idea regarding this or any other way to achieve this?

My code is shown below.

I add some xml layout here: homespizzaview.xml

  <LinearLayout
        android:id="@+id/linearLayoutbutton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip" >

   <android.support.v4.view.ViewPager
    android:id="@+id/pagerMenu"
    android:layout_width="0dip"
    android:layout_height="100dip"
    android:layout_weight="1"
    android:layout_marginLeft="10dip"
    android:layout_marginRight="10dip">

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


  <RelativeLayout
    android:id="@+id/relativeLayoutDot1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dip">
  <com.viewpagerindicator.CirclePageIndicator
   android:id="@+id/indicatorMenu"
   android:layout_width="fill_parent"
   android:layout_height="25dip"
   android:layout_marginLeft="10dip"
   android:layout_marginRight="10dip"
   android:padding="10dip" />

 </RelativeLayout>

HomeView .java

 public class HomeView extends Activity {

    adaptermenu = new MenuPagerAdapter();
    pagerMenu = (ViewPager)findViewById(R.id.pagerMenu);
    pagerMenu.setAdapter(adaptermenu);
    pagerMenu.setCurrentItem(0);
    pagerMenu.setOffscreenPageLimit(adapter.getCount());
    pagerMenu.getAdapter().notifyDataSetChanged();
    pagerMenu.setPageMargin(15);

    indicator  = (CirclePageIndicator)findViewById(R.id.indicatorMenu);
    indicator.setViewPager(pagerMenu);

    final float density1 = getResources().getDisplayMetrics().density;
    indicator.setRadius(5 * density1);
    indicator.setPageColor(0xFF000000);
    indicator.setFillColor(0xFF888888);
    indicator.setStrokeWidth(2 * density1);

    //We set this on the indicator, NOT the pager
    indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {             
        @Override
        public void onPageSelected(int position) {
         //   Toast.makeText(HomeSpizzaView.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();
            pagerMenu.setCurrentItem(position, false);            
        }
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageScrollStateChanged(int state) {               
        }
    });

    indicator.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {

            pagerMenu.setCurrentItem(0);  
          Log.i("", "getCurrentItem"+  mPager.getCurrentItem());
          pagerMenu.getAdapter().notifyDataSetChanged();
        }
    });

       }
    } 

MenuPagerAdapter.java

 public class MenuPagerAdapter extends PagerAdapter {


public int getCount() {
    return 3;
}

public Object instantiateItem(View collection, int position) {

    ImageView image = new ImageView(collection.getContext()); 
    image.setPadding(20, 0, 20, 0);     
    int resId = 0;
    switch (position) {
    case 0:
        resId = R.drawable.promotion1;
        break;
    case 1:
        resId = R.drawable.promotion2;
        break;
    case 2:
        resId = R.drawable.promotion3;
        break;
    }
    image.setImageResource(resId); 
    ((ViewPager) collection).addView(image, 0);

    return image;
}

@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;
}
}

---

here is update code which is showing single image view with below textview. i am looking for dynamic image & text.. means In 1 view pager 3 images with 3 text.. currently its showing 1 image view with below text.. I am looking for 3 images in single viewpager.. if i add linear layout it shows 3 image. but i add relative layout its showing single images.. ANY IDEA WHAT I MADE MISTIKE.

 public Object instantiateItem(View collection, int position) {

    RelativeLayout  lLayout;      
    RelativeLayout.LayoutParams relativeLayout;

    lLayout = new RelativeLayout (collection.getContext());
      relativeLayout = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);

        for (int i = 0; i < 3; i++) {
            image = new ImageView(collection.getContext());
            image.setPadding(20, 0, 20, 0); 
            image.setId(1);
            int res = 0;
          switch (0) {
          case 0:
              res = R.drawable.menu_antipasti;          
              break;
          case 1:
              res = R.drawable.menu_combos;
              break;
          case 2:
              res = R.drawable.menu_drinks;
              break;
          }                  
            image.setImageResource(res);
            lLayout.addView(image);

            textview = new TextView(collection.getContext());
            textview.setTextColor(Color.BLACK);
            textview.setId(2);
            textview.setText("pizza");  
            textview.setPadding(60, 0, 20, 0);
            relativeLayout.addRule(RelativeLayout.BELOW, image.getId());
            lLayout.addView(textview, relativeLayout);
        }

        ((ViewPager) collection).addView(lLayout, 0);
        return lLayout;
    }

Answer 1

Now you’re returning ImageView from instantiateItem method. If you want to have 3 images on 1 page you need to create layout, place 3 images on it and return it. E.g:

public Object instantiateItem(View collection, int position) {
    LinearLayour images = new LinearLayout(collection.getContext());
    for (int i = 0; i < 3; i++) {
        ImageView image = new ImageView(collection.getContext());
        image.setPadding(20, 0, 20, 0);     
        images.addView(image);
        int res = someResource depending on i and position.
        image.setImageResource(res);
    }

    ((ViewPager) collection).addView(images, 0);
    return images;
}