Glide - Adding transition crossfade causes placeholder to resize

user_11110509 0
Viewed 646

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

android-glide android
1 Answers

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);
user_31459600
Related