Using cwac-endless adapter to load endless ListView of images

Question

I wrote the following code that implements infinite scrolling of a ListView containing ImageViews using the CWAC Endless Adapter. The images are retrieved from the web on-demand with AsyncTasks:

package com.myproject.ui.adapter;

import java.io.InputStream;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.util.LruCache;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.commonsware.cwac.endless.EndlessAdapter;

public class MyThumbsAdapter extends EndlessAdapter {

    public static class FetchThumbTask extends AsyncTask<String, Void, Bitmap> {

        private final Context mContext;
        private final BaseAdapter mAdapter;
        private final String mThumbId;
        private final View mView;

        public FetchThumbTask(Context context, BaseAdapter adapter, View view, String thumbId) {
            mContext = context;
            mAdapter = adapter;
            mView = view;
            mThumbId = thumbId;
        }

        @Override
        protected Bitmap doInBackground(String... arg0) {
            Bitmap bitmap = null;
            if (cache.get(mThumbId) == null) {
                // Fetch thumbnail
                try {
                    URL url = new URL(...);
                    InputStream is = url.openStream();
                    bitmap = BitmapFactory.decodeStream(is);
                    cache.put(mThumbId, bitmap);
                } catch (Exception e) {
                    ...
                }
            }
            return bitmap;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
              // Set the loaded image on the ImageView
                      ImageView imageView = (ImageView) mView.findViewById(R.id.thumb_image);
            if (imageView != null) {
                imageView.setImageBitmap(bitmap);
            }
        }
    }

    public static class MyThumbsBaseAdapter extends BaseAdapter {

        private final Context mContext;
        private final List<String> mThumbIds = new ArrayList<String>();

        public MyThumbsBaseAdapter(Context context) {
            mContext = context;
        }

        public void addThumbIds(List<String> thumbIds) {
            mThumbIds.addAll(thumbIds);
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            String thumbId = mThumbIds.get(position);
            View rootView = convertView;

            if (rootView == null) {
                rootView = LayoutInflater.from(parent.getContext()).inflate(
                        R.layout.thumbnails, null);
            }
            ImageView imageView =
                    (ImageView) rootView.findViewById(R.id.doodle_thumb_image);

            Bitmap bitmap = cache.get(thumbId);
            if (bitmap == null) {
                loadThumbBitmap(rootView, thumbId);
            } else if (imageView != null) {
                imageView.setImageBitmap(bitmap);
            }

            return rootView;
        }

        @Override
        public int getCount() {
            return mThumbIds.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        private void loadThumbBitmap(View view, String thumbId) {
            new FetchThumbTask(mContext, this, view, thumbId)
                .executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR);
        }
    }

    static {
        int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
        int cacheSize = maxMemory / 8;
        cache = new LruCache<String, Bitmap>(cacheSize) {
            @Override
            protected int sizeOf(String key, Bitmap bitmap) {
                // The cache size will be measured in kilobytes rather than
                // number of items.
                return bitmap.getByteCount() / 1024;
            }
        };
    }

    private static final LruCache<String, Bitmap> cache;

    private List<String> mThumbIdsCache;

    public MyThumbsAdapter(Context context) {
        super(new MyThumbsBaseAdapter(context));
    }

    @Override
    protected View getPendingView(ViewGroup parent) {
        return LayoutInflater.from(parent.getContext())
                .inflate(R.layout.loading_thumb, null);
    }

    @Override
    protected boolean cacheInBackground() throws Exception {
        JsonReader reader = // Retrieve thumb ids list from server
        mThumbIdsCache = // Returned thumb ids list
        return true;
    }

    @Override
    protected void appendCachedData() {
        MyThumbsBaseAdapter adapter = (MyThumbsBaseAdapter) getWrappedAdapter();
        adapter.addThumbIds(mThumbIdsCache);
    }
}

I'm using a LruCache to cache the bitmaps loaded from the web. The problem is I'm seeing plenty of cache misses when testing on my Nexus 7, which should have plenty of memory available. This causes the images to pop into place as I scroll up/down through the ListView.

Worse, I've seen the app crash with OutOfMemory errors, but I can't consistently reproduce.

What am I doing wrong here? Should I not be firing off individual AsyncTasks for each image?

EDIT: I should also mention that the images I am downloading are pre-scaled.

Answer 1

I think what you need to do is display Thumbnails instead of bitmap image on your screen. You can generate Thumbnails and display as per your size requirements. And whenever user click on Thumb, just take original path and set wallpaper.

Another option is you can use Universal Image Loader which helps you to buffer your image in disc (like SD card or your application's Internal memory). So issue of Out of Memory can be resolved.

And also for best practice to display Bitmaps, Displaying Bitmaps Efficiently will helpful.

Edit:

Use following configuration for your application. This will cache images inside cache directory of application.

File cacheDir = new File(this.getCacheDir(), "cwac");
if (!cacheDir.exists())
    cacheDir.mkdir();

ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
            CWAC.this)
            .threadPoolSize(5)
            .threadPriority(Thread.MIN_PRIORITY + 3)
            .denyCacheImageMultipleSizesInMemory()
            // .memoryCache(new UsingFreqLimitedMemoryCache(2000000)) // You
            // can pass your own memory cache implementation
            .memoryCacheSize(1048576 * 10)
            // 1MB=1048576 *declare 20 or more size if images are more than
            // 200
            .discCache(new UnlimitedDiscCache(cacheDir))
            // You can pass your own disc cache implementation
            //.defaultDisplayImageOptions(DisplayImageOptions.createSimple())
            .build();