Recyclerview scrolling causes glide to lag when using wrap_content in the imageview

[ryee1]

When using wrap_content in the imageview, Glide's caching does not seem to work which causes a large amount of lag in the interface.

I am able to fix the issue by using a fixed size either through the xml or with the ".override" method for glide. But I'm wondering if there's a way to make wrap_content function correctly?

I am using glide 3.7.0 and okhttp 3.1.2

My recyclerview's onBindViewHolder is executing this line to use glide:

Glide.with(mContext)
.load(imageUrl)
.fitCenter()
.into(moviePoster);

My recyclerview item is just a single imageview.

<ImageView
    android:id="@+id/movie_poster_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"`
    xmlns:android="http://schemas.android.com/apk/res/android" />

Full code here:
https://github.com/ryee1/tMDBAndroid/tree/master/app/src/main

[TWiStErRob]

At least one dimension must be fixed. To understand what's going on think about what you're currently asking Glide to do: here's a view that will grow as large as it needs to be, load an image into it. Glide's default behaviour is to read the size of the view and load a memory-efficient Bitmap into it. I hope you see the loop between "I'll grow!" and "what's your size?". Usually all you need to do is change one wrap to match in the layout XML, for example in a normal vertical list the width is match.

You can drop the memory efficiency via.override(Target.SIZE_ORIGINAL). I think the default for wrap/wrap is to fall back as if the user did .override(screen size). But this only happens if the view has invalid bounds.

Since in your case the view was already laid out, the previous image affected the view size and that size was kept even after removing the image and recognised by Glide later. So you need to reset your ImageView to just-inflated state, for example by applying v.layout(0,0,0,0) which is hacky. Take a look at staggered grid related issues here.

[ryee1]

Thank you. I was able to fix the caching issue by fixing the image size using override.

I had another problem where the images were behaving oddly when scrolling very fast. Stuff like 1/8th of a previously scrolled image would overlap onto the bottom of my screen. Not entirely sure why but I suspect it was another resizing issue.

Everything seems to be resolved after using PercentFrameLayout as seen here

[TWiStErRob]

Scrolling and wraping in the same direction is a hard problem. The lists don't actually know how tall each item is because they vary. The scroller has only info about the currently visible bound items, and has to extrapolate from that. This is why the scrollbar jumps and the scrolling may look jumpy as well. Each item has to re-layout based on contents at every bind. I'm not sure I understand your 1/8 problem though, but you found a way. An interesting issue I found with wrap is that all items would be bound at startup at once, because all wrapped items started out as 0 tall, so all of them were "visible".

[galacticappster04]

Will this work with PercentRelativeLayout? Say I assigned a percentage height to an ImageView?