How to implement an image gallery (local images)

Question

Currently im making an app to show images from SD card. Basicly you make an album and add pictures to it, be it from camera of the MediaStore picker.

I tried implementing 2 methods:

1. The standard gallery app with a custom BaseAdapter to return a view
2. A viewpager with custom PagerAdapter

I dont want to display a grid view, so it should go fullscreen right away. After that i want to disable swipe left and right and only listen for clicks.

Atm both methods work in portrait mode. When i switch over to landscape some images just drop

03-20 12:20:56.515: W/OpenGLRenderer(17398): Bitmap too large to be uploaded into a texture

followed by Out of memory errors. Stack overflow if full with problems about the OOM and the gallery, you should recycle the views to make them work because convertView is always null in the getView from BaseAdapter.

So i used a recycler for the views, i limit it to 2 views and portrait mode worked for method 1 (using the gallery). Landscape still gives me the same problem.

For method 2 (viewflipper) it handles the views by

@Override
public void destroyItem(ViewGroup container, int position, Object object) {

Wich is never called btw... However portrait mode works here. Landscape still crashes.

My method for getting the bitmap:

public static Bitmap getBitmap(Context ctx, int imageId, ImageView target) {

    String file = getPath(ctx, imageId);

    BitmapFactory.Options bmOptions = new BitmapFactory.Options();
    bmOptions.inJustDecodeBounds = true;

    BitmapFactory.decodeFile(file, bmOptions);
    WindowManager mgr = (WindowManager)         ctx.getSystemService(Context.WINDOW_SERVICE);

    int scaleFactor = 1;

    if (mgr != null) {
        // Get the dimensions of the View
        int targetW = mgr.getDefaultDisplay().getWidth();
        int targetH = mgr.getDefaultDisplay().getHeight();
        Log.d(TAG, "Image width + height=" + targetW + "," + targetH);


        int photoW = bmOptions.outWidth;
        int photoH = bmOptions.outHeight;
        // Determine how much to scale down the image
        scaleFactor = Math.min(photoW / targetW, photoH / targetH);

    } else {
        Log.d(TAG, "Target is null");
    }

    // Get the dimensions of the bitmap
    // Decode the image file into a Bitmap sized to fill the View
    bmOptions.inJustDecodeBounds = false;
    bmOptions.inSampleSize = scaleFactor;
    bmOptions.inPurgeable = true;
    logHeap(ImageHelper.class);

    Bitmap bm = BitmapFactory.decodeFile(file, bmOptions);

    if (target != null) {
        target.setImageBitmap(bm);
    }
    return bm;
}

Works fine, i know i use the window manager to get a screensize but that is because my ImageView is still size(0,0) when i inflate it. Afterwards i call

imgView.setLayoutParams(new Gallery.LayoutParams(
            Gallery.LayoutParams.FILL_PARENT,
            Gallery.LayoutParams.FILL_PARENT));
    imgView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

Nothing seems to work...

Please note that i dont use drawables or any other resources included in the APK. This gallery should be able to load pictures from SD card or from camera in whatever quality they were taken. Obvously the gallery should be able to handle as much images as there are in the directory.

Could someone please help me out with the following questions?

1. Is there any way to make the default Gallery go fullscreen right away and block out the grid view? This way i only need an adapter to provide images instead of making my own views. (maybe this solves the OOM crashes)
2. Is my Bitmap decoding function ok? Do i need to built in some hacks to catch the landscape changes?
3. Whats the best way to make the kind of gallery i need, using a viewpager or the gallery?
4. Does anyone have some sample code of a fullscreen gallery that doesnt crash?

Answer 1

This is an issue i faced a few times in the past. Google actually posted an article about this.

The problem is in the inSampleSize that u use to decode the image. Since different devices have different screens and memory sizes (VM Heap Sizes that may go from 12 to 64 or more Mb) you cant decode the images the same way in all of them. For example, an image in a 320x240 device with a 12Mb Heap Memory should u a given inSampleSize while a 1280x720 64Mb Heap Memory device should user another inSampleSize (a bigger one).

The article i attack shows an efficient way to render the images for a given height and width. Take a special attention to the last code segment, they "pre-open" the file and calculate the inSampleSize for a "full-decode" later on.

I would also like to add this recommendations.

1. Use the "getBitmap" function in an async way, call a new thread or an asyncTask (this is done because using the SD takes time and this will cause your application to hang, to be slow and give a bad impression on low-mid end devices.

2. Try to always use the same Bitmap object. Avoid creating multiple "Bitmap bitmap = new Bitmap()". You have to realize that loaded bitmaps are stored in ram and once assigned to a view its "harder" for the garbage collector to get them.

3. When you have finished using a Bitmap over make it null. This of this, imagine your have 12Mb max heap RAM. your app is using 8Mb now. Garbage collector starts and cant get any more unused RAM. you 10 Bitmaps fast never make them null after assigning the data to the ImageView and somehow you retain their reference. Taken that each bitmap take 500Kb of Ram your app will crash. Always make Bitmaps null after using.

4. Finally use the DDMS provided in the google platform-tools (you can access it with the eclipse to debug and see your memory usage, you can also force Garbage Collection to see how your app behaves).