Glide - Adding transition crossfade causes placeholder to resize

Question

When using Glide with a placeholder and using the transition crossfade, it causes it to have an unwanted resizing effect on the placeholder.

The size of the placeholder should be 50dp inside the layerlist drawable.

With crossFade():

https://www.youtube.com/watch?v=7FlCJDSwoAI

Without crossFade():

https://www.youtube.com/watch?v=vqZKZb-BKqE

Glide.with(context)
      .load(itemList.get(i))
      .apply(RequestOptions.fitCenterTransform())
      .placeholder(R.drawable.ic_altered_placeholder)
      .transition(DrawableTransitionOptions.withCrossFade())
      .into(holder.imageView);

Viewholder:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/vh_iv_album_single_picture"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The drawable placeholder:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- needs the extra spacing otherwise the drawable will be too big -->
    <item android:drawable="@drawable/ic_black_album_placeholder"
        android:left="51dp" android:right="51dp" android:top="51dp" android:bottom="51dp" />
</layer-list>

Is there a fix for this issue?

Heres the code to replicate:

MainActivity: https://pastebin.com/3G7BMct3

RecyclerAdapter: https://pastebin.com/eX3T4w9s

Viewholder: https://pastebin.com/Yvri5XFf

Placeholder: https://pastebin.com/pKputgmG

long story short: https://stackoverflow.com/questions/32235413/glide-load-drawable-but-dont-scale-placeholder. https://github.com/bumptech/glide/issues/363. I haven't found a solution for this problem. Also he writes that his pr fixes the issue, but it isn't https://github.com/bumptech/glide/pull/3913 — Beloo, Oct 26 '20 at 15:12
do you have any hacky solution? I am trying to make it like imgur album load — DIRTY DAVE, Nov 01 '20 at 01:15
Unfortunately, i don't. Otherwise i would have posted it. The only way i see is implementing own transition with `TransitionFactory` but it needs time. Also you may try to contact an author of the pr, probably he knows sth to help — Beloo, Nov 02 '20 at 10:29

score 0 · Answer 1 · answered Oct 19 '20 at 17:14

If you do not want your ImageView to be resized based on the image that you are loading using Glide, you might consider taking the following approach.

Set a fixed height of your ImageView in the layout xml file of ViewHolder.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/vh_iv_album_single_picture"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:adjustViewBounds="true"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Also, I would recommend setting the placeholder as a part of RequestOptions.

RequestOptions requestOptions = new RequestOptions();
requestOptions.placeholder(R.drawable.ic_altered_placeholder);
requestOptions.error(R.drawable.error);
requestOptions.fitCenter();

And then apply the options after transition.

Glide.with(this)
  .load(itemList.get(i))
  .transition(DrawableTransitionOptions.withCrossFade())
  .apply(requestOptions)
  .into(holder.imageView);

Hey thanks for responding, but I need my image to be resized, so thats why I set my image ```layout_height``` as ```wrap_content``` because if it's a smaller image than the fixed height, there will be white space. Also adding a fixed height DOES NOT fix the transition placeholder resizing issue. — DIRTY DAVE, Oct 19 '20 at 17:21

score 0 · Answer 2 · answered Aug 15 '23 at 01:37

Don't use placeholder. The issue still exists in the latest version of Glide. Instead, I just feed the placeholder drawable into load if the actual url is null:

Glide.with(context)
      .load(itemList.get(i) ?: R.drawable.ic_altered_placeholder)
      .apply(RequestOptions.fitCenterTransform())
      .transition(DrawableTransitionOptions.withCrossFade())
      .into(holder.imageView);

Glide - Adding transition crossfade causes placeholder to resize

2 Answers2