Android-Universal-Image-Loader doesn't keep loaded images on scroll in gridview

Question

I am using Android-Universal-Image-Loader library to load a remote pictures to ImageView in my GridView cells.

Here the the imageLoader configurations:

new ImageLoaderConfiguration.Builder(Config.context)
.threadPriority(Thread.NORM_PRIORITY - 2)
.memoryCacheSize(20 * 1024 * 1024) // 20 Mb
.memoryCache(new LruMemoryCache(20 * 1024 * 1024))
.defaultDisplayImageOptions(DisplayImageOptions.createSimple())
.tasksProcessingOrder(QueueProcessingType.LIFO)
.enableLogging() // Not necessary in common
.build();

and Display Options:

new DisplayImageOptions.Builder()
.showStubImage(R.drawable.blank)
.showImageForEmptyUri(R.drawable.no_image)
.build();

The problems: Once activity with the gridview starts all works properly and images appears in the cells, then I scroll grid down (I have about 20 items in the grid) and other images load properly. But once I scroll top the images which already loaded start loading again.

After a few scrolls up and down grid saves all images and they don't disappear anymore.

Did someone meet any similar problems or you know what I did wrong. Thanks for help.

ADDED: Here is the getView method in my adapter:

@Override
public View getView(final int position, View convertView, ViewGroup parent) {

    View view = convertView;
    ViewHolder holder;

    if ( view == null ) {           
        view = Config.context.getLayoutInflater().inflate(R.layout.featured, null);
        holder = new ViewHolder();

        holder.titleText = (TextView) view.findViewById(R.id.featured_title);
        holder.priceText = (TextView) view.findViewById(R.id.featured_price);
        holder.image = (ImageView) view.findViewById(R.id.thumbnail_image);

        view.setTag(holder);
    }
    else {
        holder = (ViewHolder) view.getTag();
    }

    HashMap<String, String> listing = listings.get(position);

    /* set text values */
    holder.titleText.setText(listing.get("title"));
    holder.priceText.setText(listing.get("price"));

    /* load image to list (AsyncTask) */
    Utils.imageLoaderFeatured.displayImage(listing.get("photo"), holder.image, Utils.imageLoaderOptionsFeatured);

    return view;
}

PS. Let me know if you want to see other code (grid adapter maybe) to help me with this issue.

John

Answer 1

I have encountered the same problem on Universal-Image-Loader Demo and I hope the Library developers will solve the problem in the next update.

UPDATE: The problem fixed with help of nostra13, you have to update the library to 1.9 version and use this way of displaying pictures in the imageView:

ImageAware imageAware = new ImageViewAware(imageView, false);
imageLoader.displayImage(imageUri, imageAware);

It solved my problem. Some details of why you should do this can be found here and here

Answer 2

you must use the Adapter and then implement the ViewHolder to make the Flow of scrolling smooth and effective. provide tag to images w.r.t to their positions provided in getView() and then there will be no problem.

Answer 3

Do not use set tag in adapter getView() method.always try to find view ids in your adapter getview() method.

public View getView(final int position, View convertView, ViewGroup parent) {

View view = convertView;
ViewHolder holder;


    view = Config.context.getLayoutInflater().inflate(R.layout.featured, null);
    holder = new ViewHolder();

    holder.titleText = (TextView) view.findViewById(R.id.featured_title);
    holder.priceText = (TextView) view.findViewById(R.id.featured_price);
    holder.image = (ImageView) view.findViewById(R.id.thumbnail_image);

    view.setTag(holder);



HashMap<String, String> listing = listings.get(position);

/* set text values */
holder.titleText.setText(listing.get("title"));
holder.priceText.setText(listing.get("price"));

/* load image to list (AsyncTask) */
Utils.imageLoaderFeatured.displayImage(listing.get("photo"), holder.image, Utils.imageLoaderOptionsFeatured);

return view;}

Answer 4

You should declare the ImageLoader and DisplayImageOptions instance only once. Probably in constructor.

ImageLoader imageLoader = ImageLoader.getInstance();
DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true)
        .cacheOnDisc(true).resetViewBeforeLoading(true)
        .showImageForEmptyUri(fallbackImage)
        .showImageOnFail(fallbackImage)
        .showImageOnLoading(fallbackImage).build();

Answer 5

Same problem here, using a StaggeredGridView. Even with memory cache and the ImageAware method, it isn't solved.

The only thing that worked for me was expanding the cache memory from 4 to 10 MB. List images are small, but I have a very large image as header of the view.

I noticed that imageViews are refreshed also on a long click, is this valid even for GridView?

Anyway, expanding the memory cache limit fixed this too.

Answer 6

.i was also facing same problem and resolved problem by wirting

Utils.imageLoaderFeatured.displayImage(listing.get("photo"), holder.image, Utils.imageLoaderOptionsFeatured);.......

line inside if(view==null).......i.e.when your convert view==null only then load images and display.them ..this will solve your problem.....