CODEWITHSUNDEEP
android-glide
Elye
Elye

Reputation: 60251

Glide transition doesn't works with listener?

I have my Glide code below

    Glide.with(this)
            .load("https://flybubble.com/media/wysiwyg/images/home/mainpage-box-5L.jpg")
            .transition(DrawableTransitionOptions.withCrossFade())
            .apply(RequestOptions()
                    .placeholder(R.drawable.placeholder)
                    .centerCrop()
                    .transforms(CenterCrop(), RoundedCorners(1000)))
            .into(my_image_view)

All works fine, where when the image is loaded, the withCrossFade() shows it fades in.

However, when I add listener to it as below

    Glide.with(this)
            .load("https://flybubble.com/media/wysiwyg/images/home/mainpage-box-5L.jpg")
            .transition(DrawableTransitionOptions.withCrossFade())
            .apply(RequestOptions()
                    .placeholder(R.drawable.placeholder)
                    .centerCrop()
                    .transforms(CenterCrop(), RoundedCorners(1000)))
            .listener(object: RequestListener<Drawable>{
                override fun onLoadFailed(e: GlideException?, model: Any, target: Target<Drawable>, isFirstResource: Boolean): Boolean {
                    return false
                }
                override fun onResourceReady(resource: Drawable, model: Any, target: Target<Drawable>, dataSource: DataSource, isFirstResource: Boolean): Boolean {
                    my_image_view.setImageDrawable(resource)
                    return true
                }
            })
            .into(my_image_view)

The withCrossFade() can no longer work. Is it because transition doesn't works with listener, or I miss something?

Upvotes: 2

Views: 1413

Answers (3)

Anton Knyazev
Anton Knyazev

Reputation: 1

The reason the withCrossFade() transition no longer works when you add a listener is because of how you handle the onResourceReady method. In your initial code, you manually set the image using my_image_view.setImageDrawable(resource), which bypasses the default behavior of Glide, including the transition.

To fix this, you should return false instead of true in the onResourceReady method. This allows Glide to continue its normal processing, including applying the transition. When you return false, Glide will handle setting the image on the ImageView and applying the transition automatically.

Here is the corrected code:

Glide.with(this)
    .load("https://flybubble.com/media/wysiwyg/images/home/mainpage-box-5L.jpg")
    .transition(DrawableTransitionOptions.withCrossFade())
    .apply(RequestOptions()
        .placeholder(R.drawable.placeholder)
        .centerCrop()
        .transforms(CenterCrop(), RoundedCorners(1000)))
    .addListener(object : RequestListener<Drawable> {
        override fun onLoadFailed(
            e: GlideException?,
            model: Any,
            target: Target<Drawable>,
            isFirstResource: Boolean
        ): Boolean {
            return false
        }

        override fun onResourceReady(
            resource: Drawable,
            model: Any,
            target: Target<Drawable>,
            dataSource: DataSource,
            isFirstResource: Boolean
        ): Boolean {
            // Return false to let Glide handle setting the image and applying the transition
            return false
        }
    })
    .into(my_image_view)

By returning false in onResourceReady, Glide will manage the ImageView update and apply the cross-fade transition as expected.

Upvotes: 0

Elye
Elye

Reputation: 60251

Found the way to do it is not through transition, but a Transition that feeds the target.onResourceReady instead.

Glide.with(this)
        .load("https://flybubble.com/media/wysiwyg/images/home/mainpage-box-5L.jpg")
        //.transition(DrawableTransitionOptions.withCrossFade()) //Remove this line
        .apply(RequestOptions()
                .placeholder(R.drawable.placeholder)
                .centerCrop()
                .transforms(CenterCrop(), RoundedCorners(1000)))
        .listener(object: RequestListener<Drawable>{
            override fun onLoadFailed(e: GlideException?, model: Any, target: Target<Drawable>, isFirstResource: Boolean): Boolean {
                return false
            }
            override fun onResourceReady(resource: Drawable, model: Any, target: Target<Drawable>, dataSource: DataSource, isFirstResource: Boolean): Boolean {
                target.onResourceReady(resource, DrawableCrossFadeTransition(1000, !isFirstResource))
                return true
            }
        })
        .into(my_image_view)

Upvotes: 4

Marijan
Marijan

Reputation: 731

Without consulting with Glide docs, I'd say that this is because you have overridden Glides part of the job. You took the Drawable that the library has fetched for you in onResourceReady and, instead of loading the image with Glide, you've forced it in your ImageView. In this example, I'd compare Glides function as just a drawable downloader, while you are the one that loads the image into a view.

Upvotes: 0

Related Questions