ImageAdapter extends PagerAdapter with thumnails

Question

i am displaying images with slide show .. i want to add thumbnails to it. below i want as thumnail as how many images and which specific image it is displaying. i went through many sites but dint find anything helpful

public class ImageAdapter extends PagerAdapter {
    Context context;
    int[] GalImages = new int[]{
        R.drawable.chokkanatha1,
        R.drawable.chokkanatha2,
        R.drawable.chokkanatha3,
        R.drawable.chokkanatha4,
        R.drawable.chokkanatha5,
        R.drawable.chokkanatha6};

    public ImageAdapter(Context context,String list1){
        this.context=context;
       String list =list1;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        //imageView.getItem(myViewPager.getCurrentItem());
        // int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
        // imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setImageResource(GalImages[position]);
        ((ViewPager) container).addView(imageView, 0);

        System.out.println("position:"+position);
        return imageView;
    }

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

Answer 1

My suggestion would be to put a LinearLayout in your instatiateItem() instead of only one ImageView

Set the LinearLayout orientation to vertical and add the ImageView, and below it add another LinearLayout with horizontal orientation and in this inner layout add 5 (or how much you like) ImageView in which you will draw your thumbnails.

You should end up with something likes this:

    public Object instantiateItem(ViewGroup container, int position) {
        // this is your layout for the Item
        final LinearLayout outerLayout = new LinearLayout(context);
        outerLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        outerLayout.setOrientation(LinearLayout.VERTICAL);

        // this is your main picture
        ImageView imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setImageResource(GalImages[position]);
        // add the picture to the layout
        outerLayout.addView(imageView);

        final LinearLayout innerLayout = new LinearLayout(context);
        innerLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        innerLayout.setOrientation(LinearLayout.HORIZONTAL);

        // thumbnail for the previous image
        ImageView thumbnailBefore = new ImageView(context);
        thumbnailBefore.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        thumbnailBefore.setImageResource("enter your thumbnail for image with id position - 1");

        // thumbnail for the current image
        ImageView thumbnailThis = new ImageView(context);
        thumbnailThis.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        thumbnailThis.setImageResource("enter your thumbnail for image with id position");

        // thumbnail for the next image
        ImageView thumbnailAfter = new ImageView(context);
        thumbnailAfter.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        thumbnailAfter.setImageResource("enter your thumbnail for image with id position + 1");

        // add the thumbnails for the images to the inner layout (to appear below your main picture)
        innerLayout.addView(thumbnailBefore);
        innerLayout.addView(thumbnailThis);
        innerLayout.addView(thumbnailAfter);

        // add the inner layout to the whole layout
        outerLayout.addView(innerLayout);

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

        return imageView;
    }

And depending on which image is displayed now, you should fill your inner LinearLayout with the pictures before and after it. (Watch out for ArrayIndexOutOfBoundsException with positions of thumbnails)

Sorry for not supplying you with exact code, I am not at my computer right now.

EDIT: I posted code sample for displaying previous and next picture. Also if you don't have the thumbnails of the picture, see this answer for more details Make thumbnail