Unable to load thumbnails into ListView

Question

I am currently attempting to make a simple image gallery like the now deprecated Android Gallery. From this gallery the user can also navigate to a simple image editor by selecting an image form the gallery. After a lot of Googling I managed to find a HorizontalListView here which is exactly what I need. Initially I had a lot of success with this by just inserting the images in my folder as compressed bitmaps. Since then however I have found this video from Google I/O in which they create an image gallery and an image editor; similar to what I am attempting to create. There are however two main differences between my app and theirs:

• they use a GridView for their gallery and I use the aforementioned HorizontalListView
• I am attempting to only load images from a specified target path rather than just all images on the SD card.

So far I am unable to adapt their code to mine as none of the images are loading into my gallery. As with the video I use an AsyncTask to load my thumbnails:

    private class ThumbnailAsyncTask extends AsyncTask<Long, Void, Bitmap>
    {
        //The ImageView we will be adding the thumbnail to
        private final ImageView mTarget;

        public ThumbnailAsyncTask(ImageView target)
        {
            mTarget = target;
        }

        @Override
        protected Bitmap doInBackground(Long... params) 
        {
            final long photoID = params[0];

            final Bitmap result = MediaStore.Images.Thumbnails.getThumbnail(
                    getContentResolver(), photoID, MediaStore.Images.Thumbnails.MINI_KIND, null);

            return result;
        }

        @Override
        protected void onPreExecute()
        {
            mTarget.setTag(this);
        }

        @Override
        protected void onPostExecute(Bitmap result)
        {
            if (mTarget.getTag() == this) 
            {
                mTarget.setImageBitmap(result);
                mTarget.setTag(null);
            }
        }   
}

and I am using a CursorAdapter for the images in the gallery:

   private class PhotoAdapter extends CursorAdapter
   {
    public PhotoAdapter(Context context)
    {
        super(context, null, false);
    }

    @Override
    public View newView(Context context, Cursor cursor, ViewGroup parent) 
    {
        return LayoutInflater.from(context).inflate(R.layout.list_item, parent, false);
    }

    @Override
    public void bindView(View view, Context context, Cursor cursor) 
    {
        final long photoId = cursor.getLong(cursor.getColumnIndex(BaseColumns._ID));

        final ImageView imageView = (ImageView) view.findViewById(android.R.id.icon);

        /* 
         * Cancel any pending thumbnail task, since this view is now bound
         * to new thumbnail
         */
        final ThumbnailAsyncTask oldTask = (ThumbnailAsyncTask) imageView.getTag();

        if (oldTask != null) 
            oldTask.cancel(false);    

        /* 
         * If we arrived here, either cache is disabled or cache miss, so we
         * need to kick task to load manually
         */
        final ThumbnailAsyncTask task = new ThumbnailAsyncTask(imageView);
        imageView.setImageBitmap(null);
        imageView.setTag(task);
        task.execute(photoId);
    }
}

With the following CursorLoader

    final LoaderCallbacks<Cursor> mCursorCallbacks = new LoaderCallbacks<Cursor>() 
            {
                @Override
                public Loader<Cursor> onCreateLoader(int id, Bundle args) 
                {
                    final String[] columns = {BaseColumns._ID};
                    return new CursorLoader(NewProjectActivity.this,
                            Uri.fromFile(new File(mTargetPath)), columns, null, null,
                            MediaStore.Images.Media.DATE_ADDED + " DESC");
                }

                @Override
                public void onLoadFinished(Loader<Cursor> loader, Cursor data) 
                {
                    mAdapter.swapCursor(data);
                }

                @Override
                public void onLoaderReset(Loader<Cursor> loader) 
                {
                    mAdapter.swapCursor(null);
                }
            };

    getLoaderManager().initLoader(LOADER_CURSOR, null, mCursorCallbacks);

Any ideas on why none of my images are loading?

Answer 1

The basic problem here is, bindView() method is not waiting for asynctask's result. You need to notify your list view when some of its content get changed.

You can do the following changes.

1) Change task.execute(photoId); to task.execute(photoId).get(); this will force your bindView() method to wait till you get your image. This approach is not advisable but it will help you to understand the exact problem.

OR

2) In onPost() of asynctask, invalidate your list view's old content and try to reload it with new content.

mAdapter.notifyDataSetChanged();
mAdapter.notifyDataSetInvalidated();

OR

3) Personally i will suggest you to finish all network operation first (i.e. fetching images ) by changing your code structure and then after try to set your adapter with the prefetched data. This is not a perfect solution but it worked in my case.