Display images in a listView

Question

In my android App, I have a lot of ListView. For each item of a listView, I have a TextView, and an ImageView.

I use Adapter for display items and AsynTask to download Image from server. When I scroll down my ListView, the images are downloaded. But when I scroll up, the images, which are already downloaded, download again.

I want to create a sort of cache of image, do you understand my problem ?

This is the type of my ListView : Image + TXT :

_{(source: androidhive.info )}

Thanks a lot!

Answer 1

That is because you aren't caching the images. Every time the scrolled item comes back into view, you end up going to the server again for the image. Wanna save some hassle? Try Picasso .

Many common pitfalls of image loading on Android are handled automatically by Picasso:

Handling ImageView recycling and download cancelation in an adapter.
Complex image transformations with minimal memory use.
Automatic memory and disk caching.

Answer 2

I strongly recommend using a library for image loading, like Android Universal Image Loader or Picasso

These libraries will take care of loading and caching for you.

Answer 3

Make user Universal Image Downloader. Its best library to load remote images and easy to use. Refer this, https://github.com/nostra13/Android-Universal-Image-Loader

Usage: Create instance and load using below line,

ImageLoader imageLoader; // initialize it.

imageLoader.displayImage(imageUri, imageView);

Answer 4

AQuery provides you loading of images from the server and to set it to your ImageView . It also provides options for caching the images File cache and Memory cache. Check here for AQuery image loading .

Sample code :

boolean memCache = false;
boolean fileCache = true;

aq.id(R.id.image1).image("http://example.com/yourImage.png", memCache, fileCache);

It also provides call back for images like below :

aq.id(R.id.image1).image(imageUrl, true, true, 0, 0, new BitmapAjaxCallback(){
        @Override
        public void callback(String url, ImageView iv, Bitmap bm, AjaxStatus status){
                iv.setImageBitmap(bm);

                //do something to the bitmap
                iv.setColorFilter(tint, PorterDuff.Mode.SRC_ATOP);
        }
});

Answer 5

SmartImageView is a perfect solution for this problem

SmartImageView on github

Answer 6

Use lazy loading for it and also first store the url in the list view and then do it as i have done in step 4.The steps for it are given below:

Step 1:Download the universal image download jar through below url: http://www.java2s.com/Code/Jar/u/Downloaduniversalimageloaderjar.htm

Step 2:-Put this code into your application file :

File cacheDir = com.nostra13.universalimageloader.utils.StorageUtils .getCacheDirectory(this);

    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
            this)
            .memoryCacheExtraOptions(480, 120)
            // default
            // =
            // device
            // screen
            // dimensions
            .discCacheExtraOptions(480, 800, CompressFormat.JPEG, 75, null)

            .threadPoolSize(3)
            // default
            .threadPriority(Thread.NORM_PRIORITY - 1)
            // default
            .tasksProcessingOrder(QueueProcessingType.FIFO)
            // default

            .denyCacheImageMultipleSizesInMemory()
            .memoryCache(new LruMemoryCache(2 * 1024 * 1024))
            .memoryCacheSize(2 * 1024 * 1024).memoryCacheSizePercentage(13)
            // default
            .discCache(new UnlimitedDiscCache(cacheDir))
            // default

            .discCacheSize(50 * 1024 * 1024).discCacheFileCount(100)
            .discCacheFileNameGenerator(new HashCodeFileNameGenerator()) // default
            .imageDownloader(new BaseImageDownloader(this)) // default
            .imageDecoder(new BaseImageDecoder(true)) // default
            .defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default
            .writeDebugLogs().build();
    ImageLoader.getInstance().init(config);

Step 3:-Put this code in the onCreate() of your activity : private DisplayImageOptions options;

    options = new DisplayImageOptions.Builder()
            .showImageOnLoading(R.drawable.iclauncher) // resource or
                                                            // drawable
            .showImageForEmptyUri(R.drawable.iclauncher) // resource or
            // drawable
            .showImageOnFail(R.drawable.iclauncher) // resource or
                                                        // drawable
            .resetViewBeforeLoading(false) // default
            .delayBeforeLoading(1000).cacheInMemory(true) // default
            .cacheOnDisc(true) // default
            .considerExifParams(true) // default
            .imageScaleType(ImageScaleType.IN_SAMPLE_INT) // default
            .bitmapConfig(Bitmap.Config.ARGB_8888) // default
            .displayer(new SimpleBitmapDisplayer()) // default
            .handler(new Handler()) // default
            .build();
    imageLoader = ImageLoader.getInstance();

Step 4:- Put this code in your adapter imageLoader.displayImage(alist.get(position).getThumbnails(), holder.ivImage, options, null);// holder.ivImage is my image view and alist.get(position).getThumbnails() is my url of the image