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

Fewell

As I see you don't use caching in memory nor on disc. Try to enable caching in Display Options. – Westward

I used it before but removed after updating the library to 1.8.5 version due to .cacheInMemory() and .cacheOnDisc() were deprecated, even with .cacheInMemory() pictures doesn't keep from the first time, user should scroll up and down at least 4 time before app cache all pictures in grid. – Fewell

You should read Java docs of that deprecated methods. So you can see that you should use .cacheInMemory(true) and .cacheOnDisc(true) instead. Do you see your problem in UIL sample app? – Westward

Hi NOSTRA, thanks for clarification with deprecation issue, I got it and corrected but the problem still exists and the same behavior in grid in the UIL sample app. I tested it on samsung galaxy nexus and samsung n800 tablet and in GRID view only, list view saves pictures properly. I can try to rec a video if you want. – Fewell

Hi Nostra, the problem still exists in the library, please check it... – Fewell

github.com/nostra13/Android-Universal-Image-Loader/issues/… – Westward

i also have similar problem. i am tried to pass height,width in image and also used ImageAware but problem is still exist ..have you got any solution . – Eightfold

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

Fewell

I tried this - but it created the problem of displaying the already loaded images in places of images to be loaded, instead of displaying the placeholder, and after sometime those correct images get loaded – Charlottcharlotta

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.

Mound

Hi Anchit, thanks for your answer but I am using the viewHolder and did all as you described. I have added the getView method to the post, could take a look please? – Fewell

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;}

Nicolina

This looks to me like a good answer, but please do not specifically ask for upvotes - if you create good content, you'll get them in time. – Jaipur

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();

Haver

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.

Clorindaclorinde

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.....

Text

Thanks buddy, I already tried such way and in this case images always change, means they are mixing up each time you scroll the grid. – Fewell