In the last tutorial, we've looked at transforming images before displaying them. We continue in this tutorial with the option of animating the display of images.

Glide Series Overview

Animation Basics

It's pretty important to make a smooth transition from image to image. Users appreciate no large unexpected changes popping up in their apps. That's what Glide animations are for. Glide ships with a standard animation to soften the change in your UI. We've looked at crossfading in an earlier tutorial.

In this tutorial, we want to look at other options than the standard crossfade. Glide offers two options to set an animation. Both versions work with the transition() (Glide 3.x .animate()) method, but pass different parameters.

Before we look at code, let us point out that the animations are only used when the image could not be served from a cache. If the image was in a cache, it should be served very quickly and thus the animation isn't necessary and isn't displayed.

Animation from Resources

Back to the code: the first option is to pass an Android resource id pointing towards an animation resource. A simple example is the slide-in-left animation every Android system offers: android.R.anim.slide_in_left. The code behind it is just an XML description of the animation:

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android">  
    <translate android:fromXDelta="-50%p" android:toXDelta="0"
            android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>  

Of course, you can create your own XML animations. For example, a little zoom in animation, which starts the image small and then enlarges it to the full size:

<?xml version="1.0" encoding="utf-8"?>  
<set xmlns:android="http://schemas.android.com/apk/res/android"  
     android:fillAfter="true">

    <scale
        android:duration="@android:integer/config_longAnimTime"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1"/>

</set>  

We could use either animation to set it in the Glide builder.

Glide 4.x

In Glide 4.x we've to wrap the animation in a GenericTransitionOptions object and set it to the transition method:

GlideApp  
    .with(context)
      .load(eatFoodyImages[0])
      .transition(GenericTransitionOptions.with(R.anim.zoom_in))
      .into(imageView1);

Glide 3.x

In Glide 3.x we can set the animation directly to the animate() method:

Glide  
    .with( context )
    .load( eatFoodyImages[0] )
    .animate( android.R.anim.zoom_in ) // or R.anim.slide_in_left
    .into( imageView1 );

This will zoom in the image when it's loaded from the network.

Animation via Custom Class

This works well when you're loading into regular ImageViews. But what if the target is something custom, like we've talked about it in a previous tutorial about targets? Then the other options are quite useful. Instead of passing a reference to an animation resource, you implement a class against the ViewPropertyTransition (Glide 3.x ViewPropertyAnimation.Animator) interface.

The interface is as simple as it gets, you just need to implement the void animate(View view) method. The view object is the entire target view. If it's a custom view, you can find the subelements of your view and do the necessary animations.

Let's look at a simple example. Let's assume you want to implement a fading animation programmatically, you'd need to create the animator object:

Glide 4.x

ViewPropertyTransition.Animator animationObject = new ViewPropertyTransition.Animator() {  
  @Override
  public void animate(View view) {
    view.setAlpha(0f);

    ObjectAnimator fadeAnim = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f);
    fadeAnim.setDuration(2500);
    fadeAnim.start();
  }
};

Glide 3.x

ViewPropertyAnimation.Animator animationObject = new ViewPropertyAnimation.Animator() {  
    @Override
    public void animate(View view) {
        // if it's a custom view class, cast it here
        // then find subviews and do the animations
        // here, we just use the entire view for the fade animation
        view.setAlpha( 0f );

        ObjectAnimator fadeAnim = ObjectAnimator.ofFloat( view, "alpha", 0f, 1f );
        fadeAnim.setDuration( 2500 );
        fadeAnim.start();
    }
};

Next, you need to set the animation at the Glide request:

Glide 4.x

GlideApp  
    .with(context)
      .load(eatFoodyImages[1])
      .transition(GenericTransitionOptions.with(animationObject))
      .into(imageView2);

Glide 3.x

Glide  
    .with( context )
    .load( eatFoodyImages[1] )
    .animate( animationObject )
    .into( imageView2 );

Of course, in the animate(View view) of your animation object method, you can do anything you want to do with the view. Feel free to get creative with your animation.

If you're working with a custom view, you can just cast the view object and then call custom methods on your custom view.

Summary

In this tutorial, you've learned how to create and apply standard and custom animations to your Glide requests. This is one of the topics where playing around with it is very beneficial. We recommend to take a few minutes to just test our code above and maybe implement one of your own ideas. Let us know how it goes in the comments below!

Next, we'll start to tackle our last big Glide topic block: customizing Glide! Specifically, next week we'll introduce how to integrate various network stacks into Glide.