Loading Async Images into StaggeredGridLayout

I have a list of URLs that point to images with different sizes. I want to display them in a checkerboard vertical grid, stretching the width of each image to take one row and stretching the height to wrap around the scaled image. Everything should look something like this:

http://www.technotalkative.com/wp-content/uploads/2014/04/staggered-gridview-in-android.png

I am using RecycleView and StaggeredGridLayoutManager. Unfortunately, I cannot get it to work well.

This is the class of the element that I want to show:

public class Photo {
    public String title;
    public String url;

    public Photo(String title, String url) {
    this.title = title;
    this.url = url;
    }
}

      

        
        
        
      

    

Relevant XML for the element:

<?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:margin="5dp">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageview"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:background="@color/transparant_white"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

</RelativeLayout>

      

        
        
        
      

    

Adapter:

public class PhotoAdapter extends RecyclerView.Adapter<PhotoAdapter.ViewHolder> {

    private final static String TAG = PhotoAdapter.class.getSimpleName();

    private Context mContext;
    private List<Photo> mPhotos;

    public PhotoAdapter(Context context, List<Photo> photos) {
        super();
        mContext = context;
        mPhotos = photos;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_photo, viewGroup, false);
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        Photo photo = mPhotos.get(i);
        Picasso.with(mContext).load(photo.url).into(viewHolder.imageView);
        viewHolder.textView.setText(photo.title);
    }

    @Override
    public int getItemCount() {
        return mPhotos.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;
        public ViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageview);
            textView = (TextView) itemView.findViewById(R.id.textview);
        }
    }
}

      

        
        
        
      

    

And the snippet where everything is called:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                     Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_main, container, false);

    PhotoAdapter photoAdapter = new PhotoAdapter(getActivity(), createItems());

    StaggeredGridLayoutManager staggeredGridLayoutManager 
             = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

    RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerview);
    recyclerView.setAdapter(photoAdapter);
    recyclerView.setLayoutManager(staggeredGridLayoutManager);

    return rootView;
}

      

        
        
        
      

    

The first few images render well, but as you scroll down, all the images start to appear in a single column. Then when I go through the absolute top of the list everything adds up and the images are displayed in two columns until I scroll down to the images that I haven't loaded yet. The problem is that I don't know the size of each image before I upload it, so I cannot preset the size of each element.

Hopefully someone came across and solved this before or just knows more about this than I do and can help me get it working.

I also tried Etsy's Staggered GridView, I had similar and even worse results.