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

As I see you don't use caching in memory nor on disc. Try to enable caching in Display Options. — nostra13, Jul 17 '13 at 22:03
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. — John F, Jul 18 '13 at 10:00
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? — nostra13, Jul 18 '13 at 14:17
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. — John F, Jul 19 '13 at 08:20
Hi Nostra, the problem still exists in the library, please check it... — John F, Jul 31 '13 at 05:25
https://github.com/nostra13/Android-Universal-Image-Loader/issues/376#issuecomment-30872810 — nostra13, May 30 '14 at 22:22
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 . — Ram, Apr 10 '15 at 05:06

score 16 · Accepted Answer · edited Oct 24 '14 at 10:42

16

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

edited Oct 24 '14 at 10:42

the swine

10,713
7
58
100

answered Sep 17 '13 at 09:33

John F

685
1
8
18

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 – Narendra Singh Jan 07 '16 at 06:16

score 1 · Answer 2 · answered Jul 17 '13 at 08:28

1

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.

answered Jul 17 '13 at 08:28

Anchit Mittal

3,412
4
28
48

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? – John F Jul 17 '13 at 08:59

score 1 · Answer 3 · edited Oct 13 '15 at 21:21

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

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. — halfer, Oct 13 '15 at 21:21

score 1 · Answer 4 · answered Jan 20 '16 at 13:03

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

score 0 · Answer 5 · answered Jan 30 '14 at 12:03

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.

score -1 · Answer 6 · answered Oct 19 '13 at 08:17

-1

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

answered Oct 19 '13 at 08:17

anu gupta

107
1
6

1

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. – John F Oct 22 '13 at 03:36

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

6 Answers6

Linked