How to Use Shared Element Transition with Glide in 4 steps
In this article, you will learn how to implement Shared Element Transition with Glide, an image loading library, and how to handle possible states. With this transition, you will improve the look and feel of your app and keep your users happy.
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
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.
NEED A SUCCESSFUL TEAM?
We’re 100% office based team with 7-years’ experience
in mobile & web app development
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:
We can also tell Glide to keep the original image size. This will decrease the transition delay because the original image will be available from memory, not a disk cache. Watch out: you should do this wisely because it can slow down your app. If you want to do it anyway, here is the branch with this modification.
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:
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.