Solution to Challenge: Preloading and Caching

This solution is build upon my previous code for any part of the code that is not included in this post please refer to Solution to Challenge: Paging.I also took some ideas from other people’s example found in this forum.

Notes to changes that I made:

  1. ThumbnailDownloader.queueThumbnail() was moved from PhotoAdapter.onBindViewHolder() to RecyclerView.OnScrollListener()
  2. RecyclerView.OnScrollListener() expanded to handle extra thumbnail massage queueing for preloading
  3. ThumbnailDownloader < PhotoHolder > changed to ThumbnailDownloader < Intger > turns out it doesn’t really need to know which PhotoHolder request the thumbnail
  4. PhotoCache of class LruCache<String,Bitmap> was add to ThumbnailDownloader
  5. ThumbnailDownloader.ThumbnailDownloadListener now only notify the adapter that item has changed
  6. Minor change to variable names and additional logs

ThumbnailDownloader.java

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Handler;
import android.os.HandlerThread;
import android.os.Message;
import java.io.IOException;
import android.util.Log;
import android.util.LruCache;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;

public class ThumbnailDownloader<T> extends HandlerThread {
    private static final String     TAG              = "ThumbnailDownloader";
    private static final int        MESSAGE_DOWNLOAD = 0;
    private boolean                 mHasQuit         = false;
    private Handler                 mRequestHandler;
    private Handler                 mResponseHandler;
    private ConcurrentMap<T,String> mRequestMap      = new ConcurrentHashMap<>();
    private ThumbnailDownloadListener<T> mThumbnailDownloadListener;
    public  LruCache<String,Bitmap> mPhotoCache;

    public interface ThumbnailDownloadListener<T>{
        void onThumbnailDownloaded(T target, Bitmap thumbnail);
    }
    public void setThumbnailDownloadListener(ThumbnailDownloadListener<T> listener){
        mThumbnailDownloadListener = listener;
    }

    public ThumbnailDownloader(Handler responseHandler){
        super(TAG);
        mResponseHandler = responseHandler;
        mPhotoCache      = new LruCache<>(1330*1024);
    }

    @Override
    protected void onLooperPrepared(){
        mRequestHandler = new Handler() {
            @Override
            public void handleMessage(Message msg){
                if (msg.what == MESSAGE_DOWNLOAD){
                    T position = (T) msg.obj;
                    Log.i(TAG,"Got a request for URL:"+ mRequestMap.get(position));
                    handleRequest(position);
                }
            }
        };
    }

    @Override
    public boolean quit(){
        mHasQuit = true;
        return super.quit();
    }
    public void queueThumbnail(T position,String url){
        Log.i(TAG,"Got a URL: " + url);
        if(url == null){
            mRequestMap.remove(position);
        }else{
            mRequestMap.put(position,url);
            mRequestHandler.obtainMessage(MESSAGE_DOWNLOAD,position).sendToTarget();
        }
    }
    public void clearQueue(){
        mRequestHandler.removeMessages(MESSAGE_DOWNLOAD);
        mRequestMap.clear();
    }
    public void clearCache() {
        mPhotoCache.evictAll();
    }

    private void handleRequest(final T position){
        try {
            final String url = mRequestMap.get(position);
            if (url == null) {
                return;
            }
            byte[] bitmapBytes = new FlickrFetchr().getUrlBytes(url);
            final Bitmap bitmap = BitmapFactory.decodeByteArray(bitmapBytes, 0, bitmapBytes.length);
            mPhotoCache.put(url,bitmap);

            Log.i(TAG, "Bitmap of size "+ bitmapBytes.length/1024+"KB created");

            mResponseHandler.post(new Runnable() {
                @Override
                public void run() {
                    if (mRequestMap.get(position)!= url|| mHasQuit)return;
                    mRequestMap.remove(position);
                    mThumbnailDownloadListener.onThumbnailDownloaded(position,bitmap);
                }
            });

        }catch (IOException ioe){
            Log.e(TAG,"Error downloading image",ioe);
        }
    }
}

PhotoGalleryFragment.java

import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

public class PhotoGalleryFragment extends Fragment {

    private static String TAG = "PhotoGallery";
    private RecyclerView      mPhotoRecyclerView;
    private TextView             mCurrentPageText;
    private GridLayoutManager mGridManager;
    private List<GalleryItem> mItems = new ArrayList<>();
    private ThumbnailDownloader<Integer> mThumbnailDownloader;
    boolean asyncFetching   = false;
    int     mCurrentPage    = 1;
    int     mMaxPage        = 1;
    int     mItemsPerPage   = 1;
    int     mFirstItemPosition, mLastItemPosition;


    public static PhotoGalleryFragment newInstance(){
        return new PhotoGalleryFragment();
    }

    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setRetainInstance(true);
        new  FetchItemTask().execute();
        Handler responseHandler = new Handler();
        mThumbnailDownloader    = new ThumbnailDownloader<>(responseHandler);
        mThumbnailDownloader.setThumbnailDownloadListener(new ThumbnailDownloader.ThumbnailDownloadListener<Integer>() {
            @Override
            public void onThumbnailDownloaded(Integer position, Bitmap thumbnail) {
                mPhotoRecyclerView.getAdapter().notifyItemChanged(position);
                }
        });
        mThumbnailDownloader.start();
        mThumbnailDownloader.getLooper();
        Log.i(TAG,"Background thread started");
    }

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v =inflater.inflate(R.layout.fragment_photo_gallery,container,false);
        mCurrentPageText   = (TextView)     v.findViewById(R.id.currentPageText);
        mPhotoRecyclerView = (RecyclerView) v.findViewById(R.id.photo_recycler_view);
        mPhotoRecyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                float columnWidthInPixels = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 140, getActivity().getResources().getDisplayMetrics());
                int width = mPhotoRecyclerView.getWidth();
                int columnNumber = Math.round(width / columnWidthInPixels);
                mGridManager= new GridLayoutManager(getActivity(), columnNumber);
                mPhotoRecyclerView.setLayoutManager(mGridManager);
                mPhotoRecyclerView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        });

        mPhotoRecyclerView.addOnScrollListener( new RecyclerView.OnScrollListener() {

           @Override
           public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
               int lastVisibleItem = mGridManager.findLastVisibleItemPosition();
               int firstVisibleItem = mGridManager.findFirstVisibleItemPosition();
               if (mLastItemPosition != lastVisibleItem || mFirstItemPosition != firstVisibleItem) {
                   Log.d(TAG,"Showing item " + firstVisibleItem +" to " + lastVisibleItem);
                   updatePageText(firstVisibleItem);
                   mLastItemPosition  = lastVisibleItem;
                   mFirstItemPosition = firstVisibleItem;
                   int begin = Math.max(firstVisibleItem-10,0              );
                   int end   = Math.min(lastVisibleItem +10,mItems.size()-1);
                   for (int position = begin; position <= end; position++){
                       String url=mItems.get(position).getUrl();
                       if(mThumbnailDownloader.mPhotoCache.get(url)== null) {
                           Log.d(TAG,"Requesting Download at position: "+ position);
                           mThumbnailDownloader.queueThumbnail(position,url);
                       }

                   }
               }
               if (!(asyncFetching) && (dy > 0) && (mCurrentPage < mMaxPage) && (lastVisibleItem >= (mItems.size() - 1))) {
                   Log.d(TAG, "Fetching more items");
                   new FetchItemTask().execute();
               }
           }
       });

        if(mPhotoRecyclerView.getAdapter()==null)setupAdapter();

        return v;
    }

    @Override
    public void onDestroyView(){
        super.onDestroyView();
        mThumbnailDownloader.clearQueue();
        mThumbnailDownloader.clearCache();

    }

    @Override
    public void onDestroy(){
        super.onDestroy();
        mThumbnailDownloader.quit();
        Log.i(TAG,"Background thread destroyed");

    }

    private  void updatePageText(int pos){
        mCurrentPage = pos / mItemsPerPage+1;
        String pageText = getString(R.string.page_text,mCurrentPage, mMaxPage);
        mCurrentPageText.setText(pageText);
    }

    private void setupAdapter(){
        if(isAdded()){
            Log.d(TAG,"Setup Adapter");
            mPhotoRecyclerView.setAdapter(new PhotoAdapter(mItems));
        }
    }

    private class PhotoHolder extends RecyclerView.ViewHolder{
        private ImageView mItemImageView;

        public PhotoHolder(View itemView){
            super(itemView);
            mItemImageView = (ImageView) itemView.findViewById(R.id.item_image_view);
        }

        public void bindDrawable(Drawable drawable){
            mItemImageView.setImageDrawable(drawable);
        }
    }

    private class PhotoAdapter extends RecyclerView.Adapter<PhotoHolder>{
        private List<GalleryItem> mGalleryItems;

        public PhotoAdapter(List<GalleryItem> galleryItems){
            mGalleryItems = galleryItems;
        }

        @NonNull
        @Override
        public PhotoHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
               LayoutInflater inflater = LayoutInflater.from(getActivity());
               View view               = inflater.inflate(R.layout.list_item_gallery,parent,false);
               return new PhotoHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull PhotoHolder photoHolder, int position) {
            Log.d(TAG,"Binding item "+ position + " to " + photoHolder.hashCode());
            GalleryItem galleryItem = mGalleryItems.get(position);
            String url              = galleryItem.getUrl();
            Bitmap bitmap           = mThumbnailDownloader.mPhotoCache.get(url);
            if(bitmap == null) {
                Drawable placeholder = getResources().getDrawable(R.drawable.bill_up_close);
                photoHolder.bindDrawable(placeholder);
            }else {
                Drawable drawable = new BitmapDrawable(getResources(), bitmap);
                photoHolder.bindDrawable(drawable);
            }

        }

        @Override
        public int getItemCount() {
            return mGalleryItems.size();
        }
    }

    private class FetchItemTask extends AsyncTask<Void,Void,List<GalleryItem>>{
        @Override
        protected  List<GalleryItem> doInBackground(Void... params){

            asyncFetching =true;
            return new FlickrFetchr().fetchItems(mCurrentPage+1);
        }
        @Override
        protected void onPostExecute(List<GalleryItem> items){
            asyncFetching =false;
            mItems.addAll(items);
            GalleryPage pge=GalleryPage.getGalleryPage();
            mMaxPage     = pge.getTotalPages();
            mItemsPerPage= pge.getItemPerPage();
            if(mPhotoRecyclerView.getAdapter()==null)setupAdapter();
            mPhotoRecyclerView.getAdapter().notifyDataSetChanged();
            updatePageText(mGridManager.findFirstVisibleItemPosition());
        }
    }
}

strings.xml

<resources>
    <string name="app_name">PhotoGallery</string>
    <string name="page_text">Page %1d of %2d</string>
</resources>

The cache here is fixed size and sould hold around 60-100 thunmbnails(they are not very big).I tested and It works like a charm.Anybody see any hidden error or any improvement I should made please let me know.

Correction:

Change ThumbnailDownloader constructor to ↓

public ThumbnailDownloader(Handler responseHandler){
    super(TAG);
    mResponseHandler = responseHandler;
    mPhotoCache      = new LruCache<>(76);
}

LruCache measures the number of entry by default if you need to limit it by bytes you need to override

   protected int sizeOf(String key, Bitmap bitmap) {   return bitmap.getByteCount();  }

in onBindViewHolder you should add queueing like this

if(bitmap == null) {
Drawable placeholder = getResources().getDrawable(R.drawable.bill_up_close);
photoHolder.bindDrawable(placeholder);
mThumbnailDownloader.queueThumbnail(position,url);
}

In the next chapter “Search panel” it cause troubles. Images wont download after cicking search button.
After adding queue method it will download images correctly.