How to scaled down images used in ViewPager Android?

Question

I followed this tutorial http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-horizontal-view-paging/

I have a Pager Adapter that look like this (codes below) and I get an error saying my image is too large. (java.lang.OutOfMemoryError: bitmap size exceeds VM budget.)

I know a lot had asked this question, and I googled and found a lot of solutions. However, I could not seem to run it right. I'm new and hope to get some answers here as I have no idea what else I should do.

The Bitmap decode is for Image but what if my images are in a layouts like below. How do I scale my images down?

public class TutorialPagerAdapter extends PagerAdapter {

Activity activity;
int imageArray[];
private Resources resource;  


    private class MyPagerAdapter extends PagerAdapter {
    public int getCount() {
        return 5;
    }
    public Object instantiateItem(View collection, int position) {
        LayoutInflater inflater = (LayoutInflater) collection.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        int resId = 0;
        switch (position) {
        case 0:
            resId = R.layout.farleft;
        try{
            mImageView = (ImageView) collection.findViewById(R.id.tutorial);
            mImageView.setImageBitmap(decodeSampledBitmapFromResource(activity.getResources(), R.id.tutorial, 100, 100));
            }
            catch (NullPointerException e)
            {
                e.printStackTrace();
            }

            break;
        case 1:
            resId = R.layout.left;
            break;
        case 2:
            resId = R.layout.middle;
            break;
        case 3:
            resId = R.layout.right;
            break;
        case 4:
            resId = R.layout.farright;
            break;
        }
        View view = inflater.inflate(resId, null);

        ((ViewPager) collection).addView(view, 0);
        return view;
    }
    @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;
    }


public static Bitmap decodeSampledBitmapFromResource(String res, int reqWidth, int reqHeight) {      

    // First decode with inJustDecodeBounds=true to check dimensions
final BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeFile(res, options);

 // Calculate inSampleSize
options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);

// Decode bitmap with inSampleSize set
options.inJustDecodeBounds = false;
return BitmapFactory.decodeFile(res, options);
  }


public static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
// Raw height and width of image
final int height = options.outHeight;
final int width = options.outWidth;
int inSampleSize = 1;

if (height > reqHeight || width > reqWidth) {
    if (width > height) {
        inSampleSize = Math.round((float)height / (float)reqHeight);
    } else {
        inSampleSize = Math.round((float)width / (float)reqWidth);
                  }
                      }
return inSampleSize;}

}

EDIT

I tried mImageView.setImageBitmap(decodeSampledBitmapFromResource...) but I get Null Pointer Exception at this line.

Answer 1

try this code may be it is helpfull to you it is bound two imageview in view pager How to do pinching zoom and swipe on multiple imageview in android?.