Recyclerview and cardview image issues

Question

I'm developing a store front app for a shopify website and wanted to display images and product titles on the home screen with a card layout with data pulled from the stores server.

I have it displaying everything and can scroll it fine, however when scrolling quickly through the app some of the products are displayed showing different product images briefly, and then the correct one loads seconds later.

Is there a way to download or keep the images cached so they always stay in the correct cardView? Is there something I need to add to the layoutManager or the recyclerView in java?

I'm on mobile so can't upload code yet but can later if needed.

Answer 1

for your questions:

Is there a way to download or keep the images cached so they always stay in the correct cardView?

Yes there is a way on using two libraries Picasso and okhttp for more details check this answer

Is there something I need to add to the layoutManager or the recyclerView in java?

No you need to add nothing :)

I hope that will help you and put you in the right way to make many researching about that libraries

Good luck!

Answer 2

You could hide the image view while the image finishes loading. Even if you have the images stored on the device it can take a little bit of time to load the new image when you are scrolling as the cards are reused and can contain as in your case another image.

On the method onBindViewHolder of your recyclerview adapter:

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    viewHolder.image.setVisibility(View.INVISIBLE);
}

Once the image finishes loading set it visible:

image.setVisibility(View.VISIBLE);

This way nothing will be shown until the image is loaded.

Answer 3

To keep the image cached you can:

FirebaseDatabase.getInstance().setPersistenceEnabled(true);