How to Use Shared Element Transition with Glide in 4 steps

This article was featured in AndroidDev Digest #187

Shared Element Transition is one of the key transitions in Material Design. It is easy to implement when we have static resources saved locally but creating seamless animation with images downloaded from the internet can be tricky.

Before we begin

This post is a summary of our work with Shared Element Transition while developing the Toast App. It’s the app for TOAST – Android Developers Meetup – the biggest Android developers meetup in Poland. The app contains information about every TOAST event, given lectures and event photos. We’ve used Shared Element Transition as our main transition between views. To fetch all images, we’ve used Glide.

The approach presented in this post should also work for other image loading libraries like Picasso or Fresco (you will have to find the proper replacements for Glide-specific features). I have made a sample demo app just for this, which is available on Github. All code snippets come from this sample app.

Let’s start with a simple grid of images. When a user taps on the image, it opens a new Activity with the image cropped to fill the whole screen. Images are loaded by a simple Glide call:

What we want to achieve:

Step#1: Naive shared transition

To create a transition, we need to start the Activity with the proper options. In MainActivity, we have to modify our goToDetails method:

Now, we have to pass shared view to this method from RecyclerView and set the transition name to it. This transition name has to be unique per screen, but the same on main and detail views. To simplify, we will use the image URL as the transition name:

Okay, we have our transition, let’s take a look:

Oops, it’s not what we wanted 🙁

Step#2: Postpone the transition

Glide needs time to load the image to ImageView. This is why we have to postpone the transition in onCreate and start it when the image is ready:

Now our image is loaded before the transition, but we have this weird glitch at the beginning of Enter Transition and at the end of Exit Transition. We will handle this next.

Step#3: Disable transformations

We have this glitch because Glide tries to optimize image loading. By default, Glide is resizing and trimming images to match the target view. But Android transition framework at transition beginning takes the image from destination view and tries to transform it into the image from source view. We can tell Glide not to optimize images this way:

Now it works as expected, but there’s a little problem with broken links or images on the list that are not loaded.

Step#4: Transit only cached images

The simplest way to have the seamless transition in any conditions is to retrieve the image from cache (or, if it’s not loaded already, just transit a placeholder):

Of course, this means there will be only a placeholder if the user opens details before an image is loaded. It can be fixed by a second load request after the transition is completed:

Finally, we have our fantastic transition that will work under any conditions! You can check out the whole sample at GitHub or see it in the Toast App with more bells and whistles.

Wrap up

Shared Element Transition provides visual continuity and keeps a user’s focus. Yet we should keep in mind that we can have a poor internet connection and the freezing transition could irritate users. I believe these 4 steps will help you make your app beautiful and fast under any circumstances.

Related posts