How to apply animation on cached image in Glide

To apply image change transition in glide 4.10 use

Glide.with(this).load(artwork)
                            ..transition(DrawableTransitionOptions.withCrossFade())
                            .into(playerBackground);

By default, Glide will not animate the image when loading it. If images are cached on disk, Glide will animate. To change that, define a custom TransitionFactory and pass it in with DrawableTransitionOptions.

For an example implementation, see the cross fade factory: https://github.com/bumptech/glide/blob/master/library/src/main/java/com/bumptech/glide/request/transition/DrawableCrossFadeFactory.java


According to the documentation here, in Glide v4 you can implement and apply a custom TransitionFactory.

For always crossfading, in Kotlin you can:

  1. Implement the TransitionFactory interface
class DrawableAlwaysCrossFadeFactory : TransitionFactory<Drawable> {
  private val resourceTransition: DrawableCrossFadeTransition = DrawableCrossFadeTransition(300, true) //customize to your own needs or apply a builder pattern
  override fun build(dataSource: DataSource?, isFirstResource: Boolean): Transition<Drawable> {
    return resourceTransition
  }
}
  1. Apply it as a transition
GlideApp.with(this)
  .load(url)
  .transition(DrawableTransitionOptions.with(DrawableAlwaysCrossFadeFactory()))
  .into(image)