Preload Picasso Image with StaggeredGridLayout

Question

I have a StaggeredGridLayoutManager that loads 20 cards which contain images (loaded from cache, network, or storage with Picasso) in a 2 column wide grid.

Issue:

Currently, as you scroll down the list the images are loaded as the cards slide into view like this video:

https://www.youtube.com/watch?v=1xMNmMjqEbI

Desired solution:

What I would like to happen is for the images to load offscreen, so there is a seamless UX like this video:

https://www.youtube.com/watch?v=4c7ZID7yjII

These videos are from a blog post which solves this problem using LinearLayoutManager, not StaggeredGridLayoutManager. I cannot seem to figure out the equivalent solution for this issue. I'm fairly new to android development and have tried to read through the documentation but I canot seem to find anything leading to a solution.

Code:

    // Setup RecyclerView
    mRecyclerView = (RecyclerView) rootView.findViewById(R.id.gridview_posts);
    mRecyclerView.setHasFixedSize(true);

    // Setup StaggeredGridLayoutManager
    mLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
    mRecyclerView.setLayoutManager(mLayoutManager);

    // Set Adapter
    mPostsAdapter = new PostAdapter(rootView.getContext(), posts);
    mRecyclerView.setAdapter(mPostsAdapter);

    // Start RestClient & get posts
    restClient = new RestClient(getString(R.string.api_location));
    getPosts();

Answer 1

Preload the images to show in a cache, so instead of loading them while you scroll the list, they're already on memory.

 Picasso.with(this).load("url").fetch();

Also, remove the Picasso fadeIn animation.

Picasso.with(this).load("url").noFade().into(imageView);

Answer 2

Just figured out a partial solution to my own problem. Going to post it for anyone new like myself that is trying to figure this out.

The RecyclerView method setItemViewCacheSize(int size) will keep the disired amount of items in cache so you dont have flickering type loading of views.

I have not found a lookahead solution though to load a specific amount of views ahead of time.

Answer 3

For me it's working

Picasso.get()
 .load(uploadCurrent.getImageUrl())
 .placeholder(R.drawable.logoblack_loading)
 .config(Bitmap.Config.RGB_565)
 .into(holder.imageView);

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/id_imgItem"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"/>
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/id_imgItem"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

</RelativeLayout>