How come my ImageView in RecyclerView is resizing sometimes when scrolled back to (using Glide)?

Question

I am using Glide to load URL into ImageView. My main problem is that when I scroll it seems like the sizing of the images are getting messed up which is causing some distortion. My relevant code is below.

XML (just the part relating to the ImageView):

    <LinearLayout
        android:id="@+id/image_holder_layout"
        android:layout_width="85dp"
        android:layout_height="85dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:gravity="center">

        <ImageView
            android:id="@+id/flyer_item_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:background="@android:drawable/dialog_holo_light_frame" />
    </LinearLayout>

RecyclerAdapter:

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ItemHolder> {

    private ArrayList<Item> items;
    Context context;


    public RecyclerAdapter(Context context, ArrayList<Item> items) {
        this.items = items;
        this.context = context;
    }


    @Override
    public ItemHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        Context context = viewGroup.getContext();
        boolean shouldAttachToParentImmediately = false;

        View view = LayoutInflater.from(context).inflate(R.layout.list_row_flyer, viewGroup, shouldAttachToParentImmediately);
        ItemHolder viewHolder = new ItemHolder(view);

        return viewHolder;
    }


    @Override
    public void onBindViewHolder(ItemHolder holder, int position) {
        holder.bind(position);
    }


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


    class ItemHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

        ImageView itemImage;


        public ItemHolder(View view) {
            super(view);

            this.itemImage = (ImageView) view.findViewById(R.id.flyer_item_image);
        }


        void bind(int listIndex) {
            Glide.with(context)
                    .load(items.get(listIndex).getImageUrl())
                    .placeholder(R.drawable.placeholder_flyer_item_image)
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                    .into(itemImage);

        }
    }
}

Answer 1

I had the same problem, images sometimes was resized to placeholder size which was quite different and images looked like stretched, so if Your images have different proportions then placeholder just remove placeholder or change it to fit the same size like images, but placeholder works best if images have similar proportions, alternative solution for placeholder is to set background in parent view element to avoid this problem and have some loading background.

I see also that You have wrap_content on ImageView size properties, I would suggest to set some width and height then glide can adjust images to that easily by crop or fit.

Answer 2

The list items are being reused, and when you scroll down you bind a larger image which makes the ImageView layout taller (wrap_content). When you scroll back up Glide sees that taller size and tries to load an image that has that size. wrap_content only works if the didn't have a layout before, otherwise Glide reads the laid-out width/height and uses that as the target size. I usually recommend a holder.imageView.layout(0,0,0,0) to reset the size of the view/target and behave as if the list item was just inflated.