I get different size of images using Glide in Recycler View StaggeredGridLayout

Question

I need to download image from web and I use Glide for this.

After downloading image they appears in Recycler Veiw. Part of images looks nice and fill all cell like this

But some images otherwise perform weird behavior and looks like this

As far as I understand such result due to Glade works asynchronous, and prior to moment when cell creating in adapter Glade don't have image and adapter creates default size for the cell... and only after a while glade came with image, but cell has already created with a wrong size.

But how to fix it?

I need adapter to wait until glade finish with downloading and than create cell for Recycler View

My XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="4dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:paddingTop="4dp"
>

<android.support.v7.widget.CardView
  android:id="@+id/cvInbox"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:cardCornerRadius="5dp"
  app:cardElevation="15dp"
  >

<com.balysv.materialripple.MaterialRippleLayout
    android:id="@+id/rippleInbox"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/standard_white"
    app:mrl_rippleColor="@color/ntz_background_light_grey"
    app:mrl_rippleOverlay="true"
    >

  <LinearLayout
      android:id="@+id/cardMainActivityLinearLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      >

    <ImageView
        android:id="@+id/imageViewMainCard"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="@color/standard_white"
        android:orientation="vertical"
        android:layout_below="@+id/imageViewMainCard"
        >

      <TextView
          android:id="@+id/tvBrandName"
          android:text="custom brand"
          android:textColor="@color/black_color"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentTop="true"
          android:layout_alignParentLeft="true"
          />

      <TextView
          android:id="@+id/tvItemName"
          android:text="custom Type"
          android:textColor="@color/black_color"
          android:layout_below="@+id/tvBrandName"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />

      <TextView
          android:id="@+id/tvPrice"
          android:text="custom price"
          android:textColor="@color/black_color"
          android:layout_below="@+id/tvItemName"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />

      <Button
          android:id="@+id/bAction"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="button"
          android:layout_alignParentTop="true"
          android:layout_alignParentEnd="true"

          />

    </RelativeLayout>
  </LinearLayout>
 </com.balysv.materialripple.MaterialRippleLayout>
 </android.support.v7.widget.CardView>
</LinearLayout>

Glide in adapter

ImageView iv = currentView.ivMainCard;
        String url = currentCard.getImageUrl();

        Glide.with(context)
                .load(url)
                .placeholder(R.drawable.progress_animation)
                .crossFade()
                .into(iv);

Answer 1

In the bindViewHolder of your recycler View you need to add to the imageView layout(0,0,0,0) with all zero parameters.In your case the code below

        ImageView iv = currentView.ivMainCard;
        iv.layout(0,0,0,0);

        String url = currentCard.getImageUrl();

        Glide.with(context)
                .load(url)
                .placeholder(R.drawable.progress_animation)
                .crossFade()
                .into(iv);

Answer 2

in my case I just changed lib from Glide to Picasso

now my request looks like this

Picasso.with(context)
                .load(url)
                .placeholder(R.drawable.progress_animation)
                .error(R.drawable.image_error_404)
                .into(iv);

and all is ok