How can I improve the performance (first load time, scroll smoothness) of a GridView rendering many large images?

Question

My application allows users to take photos with their devices camera app, which are saved to an app-specific folder.

Then, users can choose to send any image they choose to one of their contacts, using their choice of their devices email app.

Sadly the "choose images to send" dialog takes a long time to load initially, and is very "choppy" (frequent noticable pauses) when scrolling. I suspect that this is because the images are very large — pictures taken with my camera are around 2.3MB each. The initial screen (15 images displayed) thus needs to pull around 34.5MB off disk before it can render.

GridView layout.xml

<!-- ... -->
<GridView
android:id="@+id/gvSelectImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:numColumns="3"
android:gravity="center" />
<!-- ... -->

Adapter getView()

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    File pic = pics[position];
    View checkedImageView = 
      LayoutInflater.from(context).inflate(R.layout.checked_image, 
                                           parent, false);
    final ImageView imageView = 
      (ImageView) checkedImageView.findViewById(R.id.checkableImage);

    /* LOAD IMAGE TO DISPLAY */
    //imageView.setImageURI(pic.toURI())); // "exceeds VM budget"
    Bitmap image;
    try {
        int imageWidth = 100;
        image = getBitmapFromFile(pic, imageWidth); // TODO: slooow...
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
    imageView.setImageBitmap(image);

    /* SET CHECKBOX STATE */
    final CheckBox checkBoxView = 
      (CheckBox) checkedImageView.findViewById(R.id.checkBox);
    checkBoxView.setChecked(isChecked[position]);

    /* ATTACH HANDLERS */
    checkBoxView.setOnCheckedChangeListener(new OnCheckedChangeListener() {
        public void onCheckedChanged(CompoundButton buttonView, 
                                     boolean isChecked) {
            CheckableLocalImageAdapter.this.isChecked[position] = 
              checkBoxView.isChecked();
        }
    });
    imageView.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            checkBoxView.setChecked(!checkBoxView.isChecked());
        }
    });

    return checkedImageView;
}

getBitmapFromFile() is just adapted from the answer given at https://stackoverflow.com/a/823966/633626. I note that the code there calls decodeStream() twice and might be doubling my I/O, but I think the dialog will still be too slow and too jerky even if I halve the amount of time to takes to render.

My testing phone is a standard Samsung Galaxy S II if that's relevant. I suspect older devices will be even slower / choppier.

What's the best way to improve performance here? I'm guessing a combination of an AsyncTask to load each image (so that the dialog can load before all images are rendered) and some sort of caching (so that scrolling doesn't require rerendering images and isn't jerky), but I'm lost as to how to fit those pieces in with the rest of my puzzle.

Answer 1

You'll want to work with thumbnails instead. Loading the whole image from the SD card will always be slow. Only load the full version of the one(s) they really want to send.

This isn't to say that caching and async loading are a bad idea. I'd change the code to work with thumbnails first, recheck performance, and then go the async route. You can show a little spinner over the currently loading thumbnail to indicate that there's more to come.

Here's a built-in class to help you retrieve them.

Answer 2

Try loading your Images with a SampleSize into the GridView:

BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inSampleSize = 7;
Bitmap bitmap = BitmapFactory.decodeFile(f.getPath(), opts);

More Info about the Options here

And also you can swap the image loading into a Thread or AsyncTask.