ViewFlipper inside ViewPager - OutOfMemory

Question

I have 20 images in my app. All the images are in 640 * 360 resolution with not more than 60KB each.

I make use of Viewpager to slide the images. And use ViewFlipper inside ViewPager to flip the images.. When the user clicks on it, I show the corresponding text for the image.

The issue is that I get OutOfMemory exception when I swipe back and forth for 5 times. I read various Stackoverflow threads here!, here!, here! and Handling Large Bitmaps Efficiently! but not able to fix the issue,

Here is the code,

In Main_Fragment.java,

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

--- some code ---

--- some more code --- 

View v = inflater.inflate(R.layout.main_fragment, container,false);

viewAnimator = ((ViewAnimator) v.findViewById(R.id.cardFlipper));

TextView caption_text = (TextView) v.findViewById(R.id.caption_text);
caption_text.setText(caption.toUpperCase());

ImageView main_img = (ImageView) v.findViewById(R.id.main_img);

int mainimg_resID = getResources().getIdentifier(mainimg,"drawable",context.getPackageName());

Bitmap icon = decodeSampledBitmapFromResource(getResources(),mainimg_resID,640,360);

main_img.setImageBitmap(icon);

viewAnimator.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
  AnimationFactory.flipTransition((ViewAnimator) v,FlipDirection.LEFT_RIGHT);
}
});

return v;
}


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) {

            final int halfHeight = height / 2; 
            final int halfWidth = width / 2;

            // Calculate the largest inSampleSize value that is a power of 2 and
            // keeps both
            // height and width larger than the requested height and width.
            while ((halfHeight / inSampleSize) > reqHeight
                    && (halfWidth / inSampleSize) > reqWidth) {
                inSampleSize *= 2;
            }
        }

        return inSampleSize;
    }

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

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

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

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

Can you please tell me what I'm doing wrong?? This is driving me nuts for the past few days :(

Answer 1

yes, I'm seen something very wrong that you are doing:

Bitmap icon = decodeSampledBitmapFromResource(getResources(),mainimg_resID,640,360);

you got it all wrong: the reqHeight and reqWidth parameters should be the image view width and height, and not the original image dimension!! that's all what calculateInSampleSize() is all about..

so, you should do the following:

Bitmap icon = decodeSampledBitmapFromResource(getResources(),mainimg_resID,main_img.getWidth(), main_img.getHeight());

by decoding bitmap in scale calculated based on the dimensions needed only for display - the result bitmap allocation would be minimal.

and by the way - the fact that the size of the resource you are using is only 60KB does not change anything. in fact - the image memory size (Kilobites/Megas) does not have any impact on the allocated bitmap. it's the resolution only that makes the difference!

EDIT

because the imageView dimentions are still zero at the onCreateView() method - you should prform the decoding only after it got it dimentions:

--- some code ---

--- some more code --- 

View v = inflater.inflate(R.layout.main_fragment, container,false);

viewAnimator = ((ViewAnimator) v.findViewById(R.id.cardFlipper));

TextView caption_text = (TextView) v.findViewById(R.id.caption_text);
caption_text.setText(caption.toUpperCase());

final ImageView main_img = (ImageView) v.findViewById(R.id.main_img);

ViewTreeObserver vto = main_img.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

    @Override
    public void onGlobalLayout() {

            final ViewTreeObserver obs = main_img.getViewTreeObserver();

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            obs.removeOnGlobalLayoutListener(this);
            } else {
               obs.removeGlobalOnLayoutListener(this);
            }

            // do here the image decoding + setting the image to the image view
            Bitmap icon = decodeSampledBitmapFromResource(getResources(),mainimg_resID,main_img.getWidth(), main_img.getHeight());

            //  setImage....
      }

});

viewAnimator.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    AnimationFactory.flipTransition((ViewAnimator) v,FlipDirection.LEFT_RIGHT);
    }
});

return v;

EDIT 2

you should never use wrap_content for ImageView. that's because it forces the view to be in the size of the original image (potentially very large) instead of the opposite. when calculating required scale - the whole point is to compare between the ImageView dimentions to the original image(resource/file/stream) dimentions. that's why it does not make any sense use wrap_content.