Querying the MediaStore: Joining thumbnails and images (on ID)

Question

I'm working on a "photo gallery"-type app for Android. It started as a Final Project for the Developing Android Apps at Udacity, so it's overall structure (activities, contentproviders etc) should be very sound, and it was accepted for certification by Udacity/Google.

However, it's still not 100% finished, and I'm still trying to improve on it.

What I want to do should really be quite straight-forward; load all images on device (as thumbnails) into a GridView in the MainActivity, with a DetailActivity which shows the full size image + some meta data (title, size, date etc).

The course required us to write a ContentProvider, so I've got a query() function which essentially fetches data from the MediaStore, and returns a cursor to MainActivity's GridView. On my device, at least, (Sony Xperia Z1, Android 5.1.1) this works almost perfectly. There are some bugs and quirks, but by and large I can consistently find all images on my phone in my app, and click on them to view details.

However, when I tried installing the app on my friend's Sony Xperia Z3, everything failed. No images showed up, although I obviously checked there were in fact ~100 photos on his phone. Same on another friend's phone (brand new Samsung S6) :-(

This is The Main Problem. On my phone, where stuff works, the "secondary" bugs involve when a new photo is taken by the camera, it's not automatically loaded into my app (as a thumbnail). It seems I need to figure out how to trigger a scan, or whatever is needed to load/generate new thumbs. That's also quite high on my wish list.

As I said, I'm confident all this really ought to be quite simple, so maybe all my difficulties indicate I'm approaching the problem in the entirely wrong way? Here's what my query() function is doing:

1. get a cursor of all thumbnails, from MediaStore.Media.Thumbnails.EXTERNAL_CONTENT_URI

2. get a cursor of all images, from MediaStore.Media.Images.EXTERNAL_CONTENT_URI

3. join these, on MediaStore.Media.Thumbnails.IMAGE_ID = MediaStore.Media.Images._ID using a CursorJoiner

4. return the resulting retCursor (as produced in the join)

-- please find full code in this previous post.

Although this looks correct (to me), maybe it's really not the way to go about this? I'm joining thumbs and images, by the way, such that I can show some meta data (e.g. date taken) along with the thumbnail, in the GridView. I've identified the problem to the joining, in particular, because if I simplify this to only loading thumbs into the GridView, then this all works fine -- also on my friend's phone. (With the exception of loading new photos.)

Somehow, my assumption that IMAGE_ID and _ID are always consistent is not correct? I've seen a post on AirPair, describing a similar gallery app, and there the tutorial actually goes about this slightly differently. Rather than attempting to join cursors, he gets the thumbnails cursor and iterates over it, adding data from Images using individual queries to the MediaStore... But is that the most efficient way to do this? - Nevertheless, his solution does join the thumbnail to the corresponding image on ID:

Cursor imagesCursor = context.getContentResolver().query(
            MediaStore.Images.Media.EXTERNAL_CONTENT_URI, 
            filePathColumn, 
            MediaStore.Images.Media._ID + "=?", new String[]{imageId},  // NB!
            null);

In summary, I need help with the following:

• am I querying the MediaStore correctly?
• is it safe to join thumbs and images, on ID -- will that be stable/in sync at all times?
• how can my app automatically generate/fetch thumbnails of new images?

Answer 1

OK, so it seems I finally figured all this out. Thought I'd share this here, for anyone else who might be interested.

What am I trying to achieve?

• Query thumbnails and images on device (via MediaStore)
• Join these into one cursor, ordered descending (newest images on top)
• Handle the case of missing thumbnails

After lots of trial and error, and playing around with the MediaStore, I've learned that the thumbnails table (MediaStore.Images.Thumbnails) can not be expected to be up-to-date, at any given time. There will be images missing thumbnails, and vice versa (orphaned thumbnails). Especially when the camera app takes a new photo, apparently it doesn't immediately create a thumbnail. Not until the Gallery app (or equivalent) is opened, is the thumbnail table updated.

I got various helpful suggestions on how to work myself around this problem, mainly centered on just querying the images table (MediaStore.Images.Media) and then, somehow, extend the cursor with thumbnails one row at a time. While that did work, it caused the app to be extremely slow and consumed a lot of memory for ~2000 images on my device.

It really should be possible to simply JOIN (left outer join) the thumbnails table with the images table, such that we get all images and the thumbnails when these exist. Otherwise, we leave the thumbnail DATA column to null, and just generate those particular missing thumbnails ourselves. What would be really cool is to actually insert those thumbnails into the MediaStore, but that I have not looked into yet.

The main problem with all this was using the CursorJoiner. For some reason, it requires both cursors to be ordered in ascending order, let's say on ID. However, that means oldest images first, which really makes for a crappy gallery app. I found that the CursorJoiner can be "fooled", however, into permitting descending order by simply ordering by ID*(-1):

Cursor c_thumbs = getContext().getContentResolver().query(
                    MediaStore.Images.Thumnails.EXTERNAL_CONTENT_URI,
                    null, null, null, 
                    "(" + MediaStore.Images.Thumnails.IMAGE_ID + "*(-1))");

Cursor c_images= getContext().getContentResolver().query(
                    MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                    null, null, null, 
                    "(" + MediaStore.Images.Media._ID + "*(-1))");

As long as the rows match up, though, this works fine (the BOTH case). But when you run into rows where either cursor is unique (the LEFT or RIGHT cases) the reversed ordering messes up the inner workings of the CursorJoiner class. However, a simple compensation on the left and right cursors is sufficient to "re-align" the join, getting it back on track. Note the moveToNext() and moveToPrevious() calls.

// join these and return
// the join is on images._ID = thumbnails.IMAGE_ID
CursorJoiner joiner = new CursorJoiner(
        c_thumbs, new String[] { MediaStore.Images.Thumnails.IMAGE_ID },  // left = thumbnails
        c_images, new String[] { MediaStore.Images.Media._ID }   // right = images
);

String[] projection = new String{"thumb_path", "ID", "title", "desc", "datetaken", "filename", "image_path"};

MatrixCursor retCursor = new MatrixCursor(projection);

try {
    for (CursorJoiner.Result joinerResult : joiner) {

        switch (joinerResult) {
            case LEFT:
                // handle case where a row in cursorA is unique
                // images is unique (missing thumbnail)

                // we want to show ALL images, even (new) ones without thumbnail!
                // data = null will cause a temporary thumbnail to be generated in PhotoAdapter.bindView()

                retCursor.addRow(new Object[]{
                        null, // data
                        c_images.getLong(1), // image id
                        c_images.getString(2), // title
                        c_images.getString(3),  // desc
                        c_images.getLong(4),  // date
                        c_images.getString(5),  // filename
                        c_images.getString(6)
                });

                // compensate for CursorJoiner expecting cursors ordered ascending...
                c_images.moveToNext();
                c_thumbs.moveToPrevious();
                break;

            case RIGHT:
                // handle case where a row in cursorB is unique
                // thumbs is unique (missing image)

                // compensate for CursorJoiner expecting cursors ordered ascending...
                c_thumbs.moveToNext();
                c_images.moveToPrevious();
                break;

            case BOTH:

                // handle case where a row with the same key is in both cursors
                retCursor.addRow(new Object[]{
                        c_thumbs.getString(1), // data
                        c_images.getLong(1), // image id
                        c_images.getString(2), // title
                        c_images.getString(3),  // desc
                        c_images.getLong(4),  // date
                        c_images.getString(5),  // filename
                        c_images.getString(6)
                });

                break;
        }
    }
} catch (Exception e) {
    Log.e("myapp", "JOIN FAILED: " + e);
}

c_thumbs.close();
c_images.close();

return retCursor;

Then, in the "PhotoAdapter" class, which creates elements for my GridView and binds data into these from the cursor returned from the ContentProvider (retCursor above), I create a thumbnail in the following manner (when the thumb_path field is null):

String thumbData = cursor.getString(0);  // thumb_path
if (thumbData != null) {
    Bitmap thumbBitmap;
    try {
        thumbBitmap = BitmapFactory.decodeFile(thumbData);
        viewHolder.iconView.setImageBitmap(thumbBitmap);
    } catch (Exception e) {
        Log.e("myapp", "PhotoAdapter.bindView() can't find thumbnail (file) on disk (thumbdata = " + thumbData + ")");
        return;
    }

} else {

    String imgPath = cursor.getString(6);   // image_path
    String imgId = cursor.getString(1);  // ID 
    Log.v("myapp", "PhotoAdapter.bindView() thumb path for image ID " + imgId + " is null. Trying to generate, with path = " + imgPath);

    try {
        Bitmap thumbBitmap = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(imgPath), 512, 384);
        viewHolder.iconView.setImageBitmap(thumbBitmap);
    }  catch (Exception e) {
        Log.e("myapp", "PhotoAdapter.bindView() can't generate thumbnail for image path: " + imgPath);
        return;
    }
}