Posted on

Android Make Shared Transition Faster And Better


android shared element transitions
Designed by Freepik

Hey, guys, Android Transition Framework is amazing, it let’s you add connection between activities and smooth the experience. Just having a shared element in two activities and animating it changes a lot compare to boring page one, page two appearance. And today we’re going to look at how to make it faster and better. Let’s get started!

How

I’m going to use an app from my previous post as an example and add some activity transition in there. Doing so is pretty simple, enable transitions in styles, set transitionName for second activity view and pass a bundle from first activity.

styles.xml

Second Activity

First Activity

How It Works

Although simple, in some cases you can find yourself creating a very slow touch response. You click on button and get response much slower then usually. First of all, to figure out why sometimes shared transitions perform so slow we need to understand how they work.The whole transition animation is happening in second activity.And return animation as well. Which means that you won’t have a response, animation won’t start until second activity created and inflated layout.

The bundle that you create and pass to second activity is vital. It passes position and size of the view in first activity. After second activity inflated layout it positions transitioned view to the position from bundle and makes it fit its size. All of that leads into two possible reasons for you having an ugly shared element transition experience.

Heavy Layout

If second activity layout is heavy nested, then it takes more time to display activity, animation happens later hence big delay between action/response. By no means we shouldn’t trade design approach for user experience, that’s why we have to fix it. Check DevMetrics for measuring time it takes to create activities, try to flatten your layouts and remove some views. The more the better. Kidding. I just like removing stuff. To make it simple of course!

Image Loading

Second and the most impactful is having to load image in the second activity. Which causes some really weird experience,  you won’t see shared transition first time you open that view. But second you will. That what it looks like

Android Make Shared Transitions Faster

By the way, look at this horrible image clipping, it’s caused by different aspect ratios of images. Since I use centerCrop, having different aspect ratio will cause different parts of the image displayed and for shared elements, especially images it’s unacceptable. Never do like this.

You better remove that mess, Ihor! I’m better of  without transitions!

Hold on, hold on, we’re gonna fix it!

Android Make Shared Transitions Faster

Wait Till Loaded

We fixed aspect ratio, but still we have no image on first open, which might be the only one. That means that we have no shared transition. And the first solution to that is to wait till the image is loaded and then start animation. I added foreground ripple effect for main list so that you can see when I click on it and how much time it takes to get the response in animation. The code goes into second activity.

Android Make Shared Transitions Faster

Cache Source

Waiting might be OK for loading low resolution pictures, but it’s bad anyways. Loading and decoding images takes too much time. I checked it has 3 seconds delay between a click and starting animation, how about that kind of delay? No way! This leads to the second solution which is much better. I use Glide for image loading and by default it caches decoded bitmaps. Even though I have the same size and aspect ratio of images in first activity and second Glide doesn’t use the cached image and decides to load new one to decode it then. After it will cache those two images and transition will be smooth.

But we can improve it by caching the source image. This way Glide won’t have to go online, we have it on disc and then we resize, scale, crop it as we want. This saves huge amount of time! As you see, response is instantanious. We do it by this line of code

Android Make Shared Transitions Faster

Improved?

As you see, we improved from having no shared element transition to having to wait for 3 seconds to start it and to not having to wait any time at all. And the beset thing is that Glide handles everything for you. You just set cache flag.

 

That’s it for now. You can get GitHub repo here. Don’t forget to subscribe, follow me on Twitter, G+, Facebook and share with friends if you think they will benefit from it!

 


  • Jasson Faerron

    Nice!

    • Ihor Klimov

      Thanks, Jasson!