4

I am using Glide with RecyclerView to load many images (around 200) which have different sizes and dimensions.

I have three problems:

  1. The images sometimes load successfully, and sometimes the app crashes giving OOM.

  2. If the images are loaded successfully, then the scrolling is laggy.

  3. If I refresh the layout and reload the same images, then it tries to load the images but fails before completion and gives OOM.

Following is the relevant code:

public static class MyViewHolder extends RecyclerView.ViewHolder {

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int listPosition) {
            ImageView imageView = holder.imageView;
            Glide.with(imageView.getContext())
                    .load(tweetMapArray.get(listPosition).get("imageURL").toString())
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .crossFade()
                    .into(imageView);
    // imageURL is a valid URL for each item
    }

    @Override
    public void onViewDetachedFromWindow(MyViewHolder holder) {
        super.onViewDetachedFromWindow(holder);
        Glide.clear(holder.imageView);
    }
}

Please guide me as to what I am doing wrong. I have not worked with so many images before.

Zoe
  • 27,060
  • 21
  • 118
  • 148
Usman
  • 2,331
  • 2
  • 21
  • 29

3 Answers3

6

I have found the cause. The problem was that I was using NestedScrollView placed above RecyclerView. This was probably causing all images to load at once. I removed the NestedScrollView and requested around 200 images and it is working super smooth now.

Reference: Out Of Memory Error When loading more images in Glide

Thank you for writing replies. They are useful as well!

Community
  • 1
  • 1
Usman
  • 2,331
  • 2
  • 21
  • 29
3

There is no easy way to determine what is causing your OutOfMemoryException but there are ways to prevent it. Firstly, I would read this issue and then look into the Memory Monitor features of Android Studio to determine whether anywhere else in your app is causing a memory leak.

Then, I would look at some of the image sizes and whether you need to determine it necassary to crop the images when they are being binded. The .Override(width, height) feature in Glide could assist you (width and height will be resized with pixels). Even further .centerCrop() and .fitCenter() could also help.

  1. Glide Image Resizing & Scaling

If that doesn't help at all, I would suggest adding a Load More feature. So you only initially load a small sample of images and the user can then load more from there using either a button, when they scroll to the bottom or SwipeRefreshLayout

  1. LoadMore RecyclerView with ProgressBar tutorial - CodeTrick
  2. SwipeRefreshLayout tutorial
  3. LoadMore Feature with RecyclerView implementation

Hope this helps.

Bradley Wilson
  • 1,197
  • 1
  • 13
  • 26
0

The main problem always is with images, if they are high res there will be always OOM called. Also animation doesn't help especially within list/recycler views. Try to reduce image sizes, use separate ones for thumbs. I would better switch to Picasso than glide, because it has resize function which works pretty well and improves performance with large images dramatically.

Bio-Matic
  • 793
  • 1
  • 8
  • 20
  • Glide resizes before caching. Focus on the problem at hand. – Eugen Pechanec Dec 23 '16 at 18:49
  • ok so I limited the images to 100, and the app is now almost super smooth. I think that the error occurs when I request all images at the same time. I am looking at other solutions and will update if I find the solution for more images. – Usman Dec 24 '16 at 10:01