Android custom listview containing texts and images loading from URL laggy despite using picasso image loader

Question

I am having lags while scroll through the listview in android, basically I have the data loaded from PHP MySQL remote server in a listview. The data and the image URL are picked and image is loaded from URL using picasso.

Despite using viewholders and picasso it is listview is lagging while scrolling up and down.

Below is my code, can anyone suggest a good approach?

Listview adapter:

public class UserFeedsAdapter extends BaseAdapter {
ViewHolderItem vH;
static class ViewHolderItem {
    ImageView image;
    TextView postUserAndTags;
    TextView postedWhen;
    TextView location;
    TextView feed;
    ImageView feedImage;
}

private Activity activity;
private ArrayList<HashMap<String, String>> data;
private static LayoutInflater inflater=null;
View temp;
HashMap<String, String> feeds = new HashMap<String, String>();
List<String> listItems1;
List<String> listItems2;

public UserFeedsAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
    activity = a;
    data=d;
    inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

public int getCount() {
    return data.size();
}

public Object getItem(int position) {
    return data.get(position);
}

public long getItemId(int position) {
    return position;
}

public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolderItem viewHolder;
    View vi = convertView;

    if(convertView == null) {
        vi = inflater.inflate(R.layout.user_feeds, null);
        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.user_feeds, parent, false);
        viewHolder = new ViewHolderItem();
        viewHolder.image = (ImageView)convertView.findViewById(R.id.imageViewFeed);
        viewHolder.postUserAndTags = (TextView)convertView.findViewById(R.id.postUserAndTags);
        viewHolder.postedWhen = (TextView)convertView.findViewById(R.id.postedWhen);
        viewHolder.location = (TextView)convertView.findViewById(R.id.location);
        viewHolder.feed = (TextView)convertView.findViewById(R.id.feed);
        viewHolder.feedImage = (ImageView)convertView.findViewById(R.id.feedImage);
        convertView.setTag(viewHolder);
    } else {
        viewHolder = (ViewHolderItem) convertView.getTag();
    }

    temp = vi;

    feeds = data.get(position);

    viewHolder.image.setTag(position);
    final String photoPath = feeds.get("user_profile_image");
    if (photoPath != null && photoPath.length() > 0 && !photoPath.equals("null")) {
        GetImage ui = new GetImage(photoPath, viewHolder, 1);
        ui.execute();
    } else {
        viewHolder.image.setImageResource(R.mipmap.ic_default_profile_pic);
    }

    viewHolder.postUserAndTags.setTag(position);
    String a = "<font color='#50c8e3'>" + feeds.get("first_name") + " " + feeds.get("last_name")
            + "</font>";
    int i = 0;
    int count = Integer.parseInt(feeds.get("tagged_tagged_count"));
    while (i < count) {
        if (i == 0) {
            a = a + " <font color='#cccccc'>with</font> ";
        }
        String b = "tagged_first_name" + String.valueOf(i);
        String c = "tagged_last_name" + String.valueOf(i);
        a = a + feeds.get(b) + " " + feeds.get(c);
        if (i + 1 != count) {
            a = a + "<font color='#cccccc'>,</font> ";
        }
        i++;
    }
    if (viewHolder.postUserAndTags != null) {
        viewHolder.postUserAndTags.setText(Html.fromHtml(a));
    }

    viewHolder.postedWhen.setTag(position);
    SimpleDateFormat simpleDateFormat =
            new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    try {
        Date postedDate = simpleDateFormat.parse(feeds.get("insert_dttm"));
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(postedDate);
        calendar.add(Calendar.MINUTE, 540);
        postedDate = calendar.getTime();
        String q = simpleDateFormat.format(postedDate);
        postedDate = simpleDateFormat.parse(q);
        Date todaysDate = Calendar.getInstance().getTime();
        String p = simpleDateFormat.format(todaysDate);
        Date today = simpleDateFormat.parse(p);
        long different = today.getTime() - postedDate.getTime();
        long secondsInMilli = 1000;
        long minutesInMilli = secondsInMilli * 60;
        long hoursInMilli = minutesInMilli * 60;
        long daysInMilli = hoursInMilli * 24;

        long elapsedDays = different / daysInMilli;
        different = different % daysInMilli;

        if (elapsedDays > 1) {
            String s = feeds.get("insert_dttm");
            Date d = null;
            SimpleDateFormat inputFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            try {
                d = inputFormat.parse(s);
            } catch (Exception ex) {
                ex.printStackTrace();
            }
            SimpleDateFormat outputFormat=
                    new SimpleDateFormat("MMMM dd");
            if (viewHolder.postedWhen != null) {
                viewHolder.postedWhen.setText(outputFormat.format(d));
            }
        } else {
            long elapsedHours = different / hoursInMilli;
            different = different % hoursInMilli;
            if (elapsedHours > 1) {
                if (viewHolder.postedWhen != null) {
                    viewHolder.postedWhen.setText(String.valueOf(elapsedHours) + " hours ago");
                }
            } else {
                long elapsedMinutes = different / minutesInMilli;
                different = different % minutesInMilli;
                if (elapsedMinutes > 1) {
                    if (viewHolder.postedWhen != null) {
                        viewHolder.postedWhen.setText(String.valueOf(elapsedMinutes) + " minutes ago");
                    }
                } else {
                    long elapsedSeconds = different / secondsInMilli;
                    if (elapsedSeconds > 1) {
                        if (viewHolder.postedWhen != null) {
                            viewHolder.postedWhen.setText(String.valueOf(elapsedSeconds) + " seconds ago");
                        }
                    }
                }
            }
        }
        viewHolder.postedWhen.append(",");
    } catch (Exception ex) {
        ex.printStackTrace();
    }
    viewHolder.location.setTag(position);
    if (viewHolder.location != null) {
        viewHolder.location.setText(feeds.get("location"));
    }
    viewHolder.feed.setTag(position);
    if (viewHolder.feed != null) {
        viewHolder.feed.setText(feeds.get("feed"));
    }
    viewHolder.feedImage.setTag(position);
    final String photoPath1 = feeds.get("photo");
    if (photoPath1 != null && photoPath1.length() > 0 && !photoPath1.equals("null")) {
        //GetImage ui = new GetImage(photoPath1, viewHolder, 2);
        //ui.execute();
        Picasso.with(activity)
                .load(photoPath1)
                .into(viewHolder.feedImage);
    } else {
        viewHolder.feedImage.setVisibility(View.GONE);
    }


    return convertView;
}

private class GetImage extends AsyncTask<String, Void, Bitmap> {
    String imagePath;
    ViewHolderItem v;
    int iType;

    GetImage(String path, ViewHolderItem viewHolder, int type) {
        imagePath = path;
        v = viewHolder;
        iType = type;
    }

    @Override
    protected void onPostExecute(Bitmap b) {
        super.onPostExecute(b);
        if (iType == 1) {
            v.image.setImageBitmap(b);
        } else {
            v.feedImage.setImageBitmap(b);
        }
    }

    @Override
    protected Bitmap doInBackground(String... params) {
        Bitmap localBmp = null;
        try {
            localBmp = (Bitmap) ImageCache.getInstance().getLru().get(imagePath);
            if (localBmp == null) {
                InputStream in = new URL("http://myurl.com/" + imagePath + ".jpeg").openStream();
                localBmp = BitmapFactory.decodeStream(in);
                ImageCache.getInstance().getLru().put(imagePath, localBmp);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return localBmp;
    }
}
}

I haven't posted the XML file, as I think this may not be a layout xml issue.

Use the [viewHolder](https://dzone.com/articles/optimizing-your-listview) pattern. — android_griezmann, Oct 10 '16 at 09:26

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

You can pause any ongoing background work when scrolling the ListView.

For that you need to add a scrolllistener to your ListView as follows ,

your_listview.setOnScrollListener(new PicassoScrollListener(context));

See this SO thread.

edited May 23 '17 at 12:33

Community

1
1

answered Oct 10 '16 at 09:47

K Neeraj Lal

6,768
3
24
33

I added a scrolllistener, but still I am having the same lag issues. – Ankur Oct 10 '16 at 10:15

score 0 · Answer 2 · answered Oct 10 '16 at 09:57

0

user resize() to reduce size of image

Picasso.with(activity)
            .load(photoPath1)
            .resize(imagesize, imagesize)
            .into(viewHolder.feedImage);

answered Oct 10 '16 at 09:57

phongnt

711
7
13

Resize will actually take a lot of memory, pictures should be resized before download if possible – Mathijs Segers Oct 10 '16 at 09:58
Not sure if the size is an issue, I think the size of the images I am using are already in compressed state. – Ankur Oct 10 '16 at 10:16

score 0 · Answer 3 · answered Oct 10 '16 at 10:24

Here is something you can do for improvement:

Use ViewHolder pattern.
Implement a callback / interface to notify your adapter that the image download has been completed.
Use a ProgressBar to show the image download progress which would act as a placeholder for your images in ListView until they have been downloaded.
If possible, use RecyclerView instead of ListView.

Android custom listview containing texts and images loading from URL laggy despite using picasso image loader

3 Answers3