ListView Lagging when Scrolling Up with Images

Question

My ListView jumps/freezes while scrolling up ( Scrolling down has no problem ) when I add images in, this doesn't happen when my keyboard is up.

I don't own the DownloadImageWithURLTask class, I cannot remember where I got it from.

public class chatAdapter extends ArrayAdapter<chatModel> {

    private Context context;

    public String userName = null;
    public ImageView hold = null;

    private static class ViewHolder{
        TextView userName;
        TextView userMessage;
        ImageView userImage;
    }

    public chatAdapter(Context c, List<chatModel> items){
        super(c, 0, items);
        this.context = c;
    }

    class DownloadImageWithURLTask extends AsyncTask<String, Void, Bitmap> {
        ImageView bmImage;
        public DownloadImageWithURLTask(ImageView bmImage) {
            this.bmImage = bmImage;
        }
        protected Bitmap doInBackground(String... urls) {
            String pathToFile = urls[0];
            Bitmap bitmap = null;
            try {
                InputStream in = new java.net.URL(pathToFile).openStream();
                bitmap = BitmapFactory.decodeStream(in);
            } catch (Exception e) {
                Log.e("Error", e.getMessage());
                e.printStackTrace();
            }
            return bitmap;
        }
        protected void onPostExecute(Bitmap result) {
            bmImage.setImageBitmap(result);
        }
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        final chatModel chatModel = getItem(position);

        final ViewHolder viewHolder;
        if (convertView == null){
            viewHolder = new ViewHolder();
            LayoutInflater inflater = LayoutInflater.from(getContext());
            convertView = inflater.inflate(R.layout.activity_chat_box, parent, false);

            TextView userName = (TextView)convertView.findViewById(R.id.usern);
            TextView userMessage = (TextView)convertView.findViewById(R.id.msg);
            final ImageView userImage = (ImageView)convertView.findViewById(R.id.imageView8);
            userName.setText(chatModel.userName);
            userMessage.setText(chatModel.chatMessage);

            final String userAvatarURL = "http://downtowndons.eu/Downtown/Avatar/" + chatModel.userName;


                    DownloadImageWithURLTask downloadTask = new DownloadImageWithURLTask(userImage);
                    downloadTask.execute(userAvatarURL);
        } else {
            viewHolder = (ViewHolder)convertView.getTag();
        }

        convertView.setAnimation(AnimationUtils.loadAnimation(context, R.anim.abc_slide_in_bottom));

        return convertView;
    }

}

score 1 · Answer 1 · answered Aug 08 '15 at 05:03

If your using AsyncTask to load Image in imageView.While scrolling rapidly in listview you may had chance to get OutofMemory exception.In order to solve those type of exceptions you need to handle Memory cache mechanism for handling images.By default there are plenty of image loading libraries available in android.One of the easiest library is Universal Image Loader. Use Universal image loader for downloading images asynchronously.

         http://github.com/nostra13/Android-Universal-Image-Loader

The Library itself has a sample code to download image.you may refer it.. After downloading library add library with your project and insert the below code at necessary place

Write this code in adapter constructor

ImageLoader  imageloader = ImageLoader.getInstance();

imageloader.init(ImageLoaderConfiguration.createDefault(context));

DisplayImageOptions options; = new DisplayImageOptions.Builder()
                .showImageForEmptyUri(R.drawable.ic_empty)
                .showImageOnFail(R.drawable.ic_error)
                .resetViewBeforeLoading(true).cacheOnDisk(true)
                .imageScaleType(ImageScaleType.EXACTLY)
                .bitmapConfig(Bitmap.Config.RGB_565).considerExifParams(true)
                .cacheInMemory(true)
                .displayer(new FadeInBitmapDisplayer(300)).build();

Replace this code in getView instead of yours code.

    if(convertView==null){
    // ... other stuff
    viewHolder.userName=(TextView)convertView.findViewById(R.id.usern);
    viewHolder.userMessage=(TextView)convertView.findViewById(R.id.msg);
    viewHolder.userImage=           (ImageView)convertView.findViewById(R.id.imageView8);
 }else{
    viewHolder=(ViewHolder)convertView.getTag();
 }

 viewHolder.userName.setText(chatModel.userName);
 viewHolder.userMessage.setText(chatModel.chatMessage);

 final String    userAvatarURL="http://downtowndons.eu/Downtown/Avatar/"+chatModel.userName;
 imageloader.displayImage(userAvatarURL,  viewHolder.userImage);

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

To fetch images from the net, try using one of these two libraries mentioned in this answer: https://stackoverflow.com/a/22862991/1018109

I'd strongly suggest following all answers and comments on this question: Lazy load of images in ListView

edited May 23 '17 at 12:06

Community

1
1

answered Aug 07 '15 at 22:11

pelotasplus

9,852
1
35
37

score 0 · Answer 3 · answered Aug 07 '15 at 22:13

The ListView Freezes because it's trying to Re-Download the images again. One on the best practices in this case is to cache image into memory using Android LruCache or Disk using DiskLruCache for efficiency..

Check this link out, it will help you a lot.. http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html#disk-cache

score 0 · Answer 4 · answered Aug 07 '15 at 22:14

Initially, your problem is fetching and loading images on scroll. Also you don't store earlier downloaded images in cache.

To solve your downloading images problem use any image caching library

Go with any of them and your problem will be solved! I have mentioned example of each library with listview. Check it out!

score 0 · Answer 5 · answered Aug 07 '15 at 22:26

I'm relatively new to this, but I'm lost with your code. It doesn't look like you're actually doing anything with your viewholder pattern. Your viewholder should be a quick way of getting your two textviews and one imageview every time they get updated, which is what speeds up scrolling for listview. However, you created it but didn't actually do anything with it. So the pattern should be something like:

    if(convertView==null){
        // ... other stuff
        viewHolder.userName=(TextView)convertView.findViewById(R.id.usern);
        viewHolder.userMessage=(TextView)convertView.findViewById(R.id.msg);
        viewHolder.userImage=(ImageView)convertView.findViewById(R.id.imageView8);
    }else{
        viewHolder=(ViewHolder)convertView.getTag();
    }

    viewHolder.userName.setText(chatModel.userName);
    viewHolder.userMessage.setText(chatModel.chatMessage);

    final String userAvatarURL="http://downtowndons.eu/Downtown/Avatar/"+chatModel.userName;

    DownloadImageWithURLTask downloadTask=new DownloadImageWithURLTask(viewHolder.userImage);
    downloadTask.execute(userAvatarURL);

ListView Lagging when Scrolling Up with Images

5 Answers5