How to Use Shared Element Transition with Glide in 4 steps

[rakibhasanbd4723]

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.

Android Developer
TweetLinkedInFacebook21Like11
How to Use Shared Element Transition with Glide in 4 steps
This article was featured in AndroidDev Digest #187

Shared Element Transition is bulk mobile database 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.