ListView scrolling using UniversalImageDownloader not smooth

Question

I am using a ListView containing images. These images are loaded from the Internet inside the adapter. Therefore I am using the UniversalImageDownloader.

Unfortunately the scrolling of the ListView "lags" for a short time as soon as I scroll down where new content has to be downloaded.

I acutally expected behaviour like the ListView scrolls perfectly smooth, but the loading of the Image can of course take some more time - which should not effect the smoothness of scrolling.

Furthermore, as I scroll back up the lags occur as well. It seems as if the images are not cached properly.

Maybe my ImageLoader options are setup wrong?

Am I doing something wrong in my adapter?

The ListView contains about 20-30 Images with sizes 640x320 (around 150kb)

Below you can see my Adapter as well as the ImageLoader. (The class Downloader is just a wrapper class for the UniversalImageDownloader)

public class Downloader {

    /**
     * initializes the imagedownloader with a specific configuration
     * I CALL THIS METHOD RIGHT AFTER APP STARTUP
     * @param c
     */
    public static void initialize(Context c) {

         // Create global configuration and initialize ImageLoader with this configuration

        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(c)
        .threadPoolSize(20) 
        .threadPriority(Thread.NORM_PRIORITY) // default
        .tasksProcessingOrder(QueueProcessingType.FIFO) // default
        .memoryCacheSize(20 * 1024 * 1024)
        .memoryCacheSizePercentage(15) // default
        .discCacheSize(20 * 1024 * 1024)
        .discCacheFileCount(100)
        .discCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default
        .imageDecoder(new BaseImageDecoder()) // default
        .build();

        ImageLoader.getInstance().init(config);
    }

    /**
     * gets the display options that are needed when displaying an image
     * @return
     */
    public static DisplayImageOptions getDisplayOptions() {

         DisplayImageOptions options = new DisplayImageOptions.Builder()
        .showImageForEmptyUri(R.drawable.error)
        .showImageOnFail(R.drawable.error)
        .resetViewBeforeLoading(false)  // default
        .cacheInMemory(true) // default
        .cacheOnDisc(true) // default
        .build();

        return options;
    }

    public static ImageLoader getInstance() {
        return ImageLoader.getInstance();
    }
}

And the adapter:

public class EventListAdapter extends ArrayAdapter<Event> {

    private List<Event> mList;
    private DisplayImageOptions options;

    public EventListAdapter(Context context, int list_item_resource, List<Event> objects) {
        super(context, list_item_resource, objects);
        mList = objects;

        options = Downloader.getDisplayOptions();
    }

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

        Event event = mList.get(position);

        // A ViewHolder keeps references to children views to avoid unneccessary calls to findViewById() on each row.
        ViewHolder holder = null;

        if (convertView == null) {

            LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.normalevent_list_item, parent, false);

            holder = new ViewHolder();;

            holder.eventimage = (ImageView) convertView.findViewById(R.id.ivEventImage);

            convertView.setTag(holder);

        } else {
            holder = (ViewHolder) convertView.getTag();

        }

        if (event != null) {

            holder.eventimage.setImageResource(R.drawable.loading);
            // Load image, decode it to Bitmap and display Bitmap in ImageView
            Downloader.getInstance().displayImage(event.getImageOneURL(), holder.eventimage, options);
        }

        return convertView;
    }

    private static class ViewHolder {   

        ImageView eventimage;
    } 
}

Answer 1

I had the same issue with image downloading. I solved it by setting delayBeforeLoading(1000) in my DisplayImageOptions. It is needed to start downloading when user stop fling.

so try to replace your getDisplayOptions method with this

 public static DisplayImageOptions getDisplayOptions() {

     DisplayImageOptions options = new DisplayImageOptions.Builder()
    .showImageForEmptyUri(R.drawable.error)
    .showImageOnFail(R.drawable.error)
    .delayBeforeLoading(1000) 
    .resetViewBeforeLoading(false)  // default
    .cacheInMemory(true) // default
    .cacheOnDisc(true) // default
    .build();

    return options;
}

Documentation also recommends to use this code to avoid grid/list view scroll lags

boolean pauseOnScroll = false; // or true
boolean pauseOnFling = true; // or false
PauseOnScrollListener listener = new PauseOnScrollListener(imageLoader, pauseOnScroll, pauseOnFling);
listView.setOnScrollListener(listener);

You can read it here (the last item of "Useful Info" list)

So you can use one of this methods

Answer 2

@Sergey Pekar: You saved my life! :) I always used UIL for ListView for a small count of images, but then as the count got bigger I got always a lag on the first load (while scrolling) of the images. So I also tried the delay and it helped a little bit and other UIL configs and options, but I was not happy. Then I've tried different Image-Loading-Libraries (Picasso, AQuery, Volley, UrlImageViewHelper, custom code). They all worked faster(on first load) than UIL but they did not have enough options for me. So I looked for the last 2 days for a solution regarding this lag-problem and thanx god I finally found your post here! The solution was the PauseOnScrollListener!

What also (addtionally to the PauseOnScrollListener) improves a little bit the scroll-smoothness is by extending the ImageView to stop requestLayout like this:

public class CustomImageView extends ImageView
{
    public CustomImageView (Context context, AttributeSet attributeset, int int_style)
    {
        super(context, attributeset, int_style);
    }

    public CustomImageView (Context context, AttributeSet attributeset)
    {
        super(context, attributeset);
    }

    public CustomImageView (Context context)
    {
        super(context);
    }

    @Override
    public void requestLayout() 
    {
        // Do nothing here
    }
}

For more info see this post:
ListView very slow when scrolling (using ViewHolder/recycling)