Android - Image Fragment Pager View

You will get Final Output:

Step 1 Images.java file

Create new class in our Project named Images.java In this class getImageItem() method return ArrayList imageId.

public class Images {
    private ArrayList<Integer> imageId;
    public Images() {
        imageId = new ArrayList<Integer>();
        imageId.add(R.drawable.a1);
        imageId.add(R.drawable.a2);
        imageId.add(R.drawable.a3);
        imageId.add(R.drawable.a4);
        imageId.add(R.drawable.a5);
    }
    public ArrayList<Integer> getImageItem() {
        return imageId;
    }
}

Step 2 PagerView Fragment

Now Start Coding for the fragment  PagerView. We need 2 more classes for the FragmentPagerView.

public class FragmentPagerAdapter extends FragmentStatePagerAdapter {
    private ArrayList<Integer> itemData;
    public FragmentPagerAdapter(FragmentManager fm,ArrayList<Integer> itemData) {
        super(fm);
        this.itemData = itemData;
    }
    @Override
    public int getCount() {
        return itemData.size();
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }
    @Override
    public Fragment getItem(int position) {
        FragmentImageView f = FragmentImageView.newInstance();
        f.setImageList(itemData.get(position));
        return f;
    }
}

public class FragmentImageView extends Fragment {
    private Integer itemData;
    private Bitmap myBitmap;
    public ProgressDialog pd;
    private ImageView ivImage;
    
    public static FragmentImageView newInstance() {
        FragmentImageView f = new FragmentImageView();
        return f;
    }
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.imageview, container, false);
        ivImage = (ImageView) root.findViewById(R.id.ivImageView);
        setImageInViewPager();
        return root;
    }
    public void setImageList(Integer integer) {
        this.itemData = integer;
    }
    public void setImageInViewPager() {
        try {
            //if image size is too large. Need to scale as below code.
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            myBitmap = BitmapFactory.decodeResource(getResources(), itemData, options);
            if (options.outWidth > 3000 || options.outHeight > 2000) {
                options.inSampleSize = 4;
            } else if (options.outWidth > 2000 || options.outHeight > 1500) {
                options.inSampleSize = 3;
            } else if (options.outWidth > 1000 || options.outHeight > 1000) {
                options.inSampleSize = 2;
            }
            options.inJustDecodeBounds = false;
            myBitmap = BitmapFactory.decodeResource(getResources(), itemData,options);
            
            if (myBitmap != null) {
                try {
                    if (ivImage != null) {
                        ivImage.setImageBitmap(myBitmap);
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        } catch (OutOfMemoryError e) {
            e.printStackTrace();
            System.gc();
        }
    }
    
    @Override
    public void onDestroyView() {
        super.onDestroyView();
            if (myBitmap != null) {
                myBitmap.recycle();
                myBitmap = null;
            }
        }
}

For more information about FragmentStatePagerAdapter please refer following link:

• http://developer.android.com/reference/android/support/v4/app/FragmentStatePagerAdapter.html

Step 3 ImagePagerView

Now in our Main Activity Class named ImagePagerView.

public class ImagePagerView extends FragmentActivity implements OnClickListener, OnPageChangeListener {

    private Button btnImagePrevious, btnImageNext;
    private int position = 0, totalImage;
    private ViewPager viewPage;
    private ArrayList<Integer> itemData;
    private FragmentPagerAdapter adapter;
    private Images imageId;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.imageview_page);
 
        viewPage = (ViewPager) findViewById(R.id.viewPager);
        btnImagePrevious = (Button) findViewById(R.id.btnImagePrevious);
        btnImageNext = (Button) findViewById(R.id.btnImageNext);
        imageId = new Images();
        itemData = imageId.getImageItem();
        totalImage = itemData.size();
        setPage(position);
        adapter = new FragmentPagerAdapter(getSupportFragmentManager(), itemData);
        viewPage.setAdapter(adapter);
        viewPage.setOnPageChangeListener(ImagePagerView.this);
        btnImagePrevious.setOnClickListener(this);
        btnImageNext.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == btnImagePrevious) {
            position--;
            viewPage.setCurrentItem(position);
        } else if (v == btnImageNext) {
            position++;
            viewPage.setCurrentItem(position);
        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
    }
    
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }

    @Override
    public void onPageSelected(int position) {
        this.position = position;
        setPage(position);
    }

    private void setPage(int page) {
        if (page == 0 && totalImage > 0) {
            btnImageNext.setVisibility(View.VISIBLE);
            btnImagePrevious.setVisibility(View.INVISIBLE);
        } else if (page == totalImage - 1 && totalImage > 0) {
            btnImageNext.setVisibility(View.INVISIBLE);
            btnImagePrevious.setVisibility(View.VISIBLE);
        } else {
            btnImageNext.setVisibility(View.VISIBLE);
            btnImagePrevious.setVisibility(View.VISIBLE);
        }
    }
}

For more information about FragmentActivity please refer following link:

• http://developer.android.com/reference/android/support/v4/app/FragmentActivity.html

I hope you enjoy this tutorial and it would be helpful to you.

Got an Idea of Android App Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Android App Development Company in India.

Tejas Jasani

An entrepreneur who has founded 2 flourishing software firms in 7 years, Tejas is keen to understand everything about gaming - from the business dynamics to awesome designs to gamer psychology. As the founder-CEO of a company that has released some very successful games, he knows a thing or two about gaming. He shares his knowledge through blogs and talks that he gets invited to.