How to set a listener on DrawableTransitionOptions.withCrossFade()?

[alexjlockwood]

Let's say I have the following code (using the Glide 4.0 snapshot right now):

Glide.with(activity).asDrawable()
    .load(photoUrl)
    .apply(RequestOptions.centerCropTransform(activity))
    .transition(DrawableTransitionOptions.withCrossFade())
    .into(imageView);

I am wondering is it possible to set an onAnimationEnd() listener on a cross fade transition? The reason why I ask is because I am fading in the image from transparent to opaque on top of a solid ColorDrawable, and I would like to remove the ColorDrawable once the transition animation is 100% complete to reduce GPU overdraw.

Does Glide 4.0 support this? If not, is there a way I could go about implementing my own cross fade effect for this purpose?

Thanks!

[TWiStErRob]

Since Glide is using the built-in android.graphics.drawable.TransitionDrawable which has no facitilities to listen to start/progress/end I don't think this is possible the way you have it.

You mention that you're fading in, which is really what happens when no placeholder is set and you're asking for crossFade, a fallback alpha transition kicks in. To customize behavior you can do anything to the view yourself as transition too:

.transition(new GenericTransitionOptions<Drawable>().transition(new ViewPropertyTransition.Animator() { ... }))

However, may I suggest an alternative?: use the ColorDrawable as placeholder which means that it will be displayed immediately when you start the load, crossFade will be nice, and in the end the TransitionDrawable will hold it as its first layer, but fully transitioned to its second layer which is the image loaded by Glide.

[alexjlockwood]

Oh man... Can't believe I didn't think of that. I'll try it out and will report back. Thanks!

[alexjlockwood]

All right, well I tried it out, and the idea in theory sounds great, but unfortunately it doesn't have the exact same effect I'm looking for. I'm trying to fade the image's alpha value from 0f to 1f on top of an opaque ColorDrawable.The TransitionDrawable gradually transforms the ColorDrawable placeholder into the target image, which doesn't achieve the same effect. Is there a way I could customize this behavior so that Glide animates the target image on top of the opaque placeholder image?

I also tried your GenericTransitionOptions suggestion and it works great (I created my own AlphaAnimation and set a listener to remove the ColorDrawable background when the transition completes). However, it seems like the transition is only run when the image is not fetched from the memory cache. Is there a way to force the transition to happen regardless of where the image was fetched from? Or would I need to take another approach here?

[TWiStErRob]

It's the factory that decides when to apply the transition. No transition from memory cache is by design, the thinking there is that if the memory cache is hit the user won't see an empty view nor a placeholder, because the resource you're loading will be immediately loaded before or near the first draw. My interpretation of this design decision:

Think about scrolling a list where all the images can be bound to the item in a sync way without blocking the UI thread (Android dev's dream). By the time more than a few pixels are visible from the list item everything is already set up and loaded, in this case animation can be annoying. This can apply in a non-scrolling situation too, if the resource is available in onCreate.

Of course YMMV, so based on what's available in com.bumptech.glide.request.transition I found (just learning v4 myself) 3 ways to customize with varying levels of detail:

Animator

Following up my other suggestion, I essentially inlined the transition method I originally suggested above and took the customization one step further by lying to super in the overridden method.

.transition(new GenericTransitionOptions<Drawable>().transition(
    new ViewPropertyAnimationFactory<Drawable>(new ViewPropertyTransition.Animator() { ... }) {
      @Override public Transition<Drawable> build(DataSource dataSource, boolean isFirstResource) {
        if (dataSource == DataSource.MEMORY_CACHE) {
          dataSource = null; // or any other DataSource you see fit
        }
        return super.build(dataSource, isFirstResource);
      }
    })
)

Animation

This is the solution I should've suggested originally, not the Animator. It's less code on your part because the animation-view relation is handled for you. Same principle though, lie to super.

AlphaAnimation anim = new AlphaAnimation(0, 1);
anim.setAnimationListener(new Animation.AnimationListener() { ... });

.transition(new GenericTransitionOptions<Drawable>().transition(
    new ViewAnimationFactory<Drawable>(anim) {
      @Override public Transition<Drawable> build(DataSource dataSource, boolean isFirstResource) {
        if (dataSource == DataSource.MEMORY_CACHE) {
          dataSource = null; // or any other DataSource you see fit
        }
        return super.build(dataSource, isFirstResource);
      }
    }
))

Full custom

Do everything yourself to prevent further updates to any of the built-in classes affect you. Take inspiration from the transition package.

.transition(new GenericTransitionOptions<Drawable>().transition(
    new TransitionFactory<Drawable>() { ... }
))

[alexjlockwood]

Second option worked great, thanks so much for the help! :)