Posted on

Android Custom Activity Transitions


Android Activity Transitions

Hi, let’s continue with implementing this awesome prototype. And today we’ll be doing activity transitions from the Good Morning screen. There’s a few cool animations in here like list animation, round image pop up and a slight backdrop image animation. So let’s get started

In the previous post we implemented login button with circular reveal. Now let’s get to the second screen. It’s actually hard to tell which one is second. The whole thing looks like you go from screen one to screen two and screen one in a loop. Which really doesn’t matter, we’re going to implement the event screen.

 

Overview

Let’s break down the animations. There’re four animations in there: backdrop image descending, list descending, round images scale and Floating Action Button reveal. We’ll implement first three in here and leave FAB for future.

Image Animations

Really cool animations up there. Pretty simple though, just a simple scale from 0 to 1. That’s what I got. Once again Sign in button and reveal were described in this blog post

Android Activity Transitions

So the big circle in the middle is for user picture and small on top of it for some notification number. Pretty simple ViewPropertyAnimatior chain for scale X,Y to value of 1. And I set initial value of 0 in layout

Animations takes 400 ms, in the prototype they look pretty lazy, small circle appears after. So I start small in the middle of first animation and set AccelerateDeccelerateInterpolator for more natural look. That’s the Java code

Small circle position

Although making apps doesn’t require math in most cases in here we’ll use some of it. We need position center of small circle at the edge of big one. Although you might think that setting align end of big circle would work, it wouldn’t. We need to draw a 45 degrees line from red circle center to top right and get the point of intersection. To get X coordinates we use radius * cos(45°),  for Y it’s radius * sin(45°).  It gives the coordinates relative to center of circle, which is zero currently, that’s why we add centerX and centerY to both ones. Here’s Java code for it

 

Just one more thing, getX, getY return values relative to the root layout of view. In here it works because root layout takes the whole width, start from the top, hence root layout’s  getX, getY are 0. Otherwise you’ll need to add root layout values.

List Animations

Let’s get to the second part, which is list animations. Looks pretty cool as well. The obvious approach is to use Transition Framework  – slide from top. Enable window transition and set it in styles.xml

and create slide from top animation

and then start EventsActivity with

Although simple, it looked glitchy with red reveal. Could be because I start activity in the middle of animation.

View Animations

There’s so many ways to make animations on Android, especially in you segregate it to Java/XML approaches that I feel like I should write a blog post about this interesting topic. So I decided to animate list with ViewAnimation. That’s the result I got

Android Activity Transitions

Not the exact same layout as in Dribble, but has the main principles. It’s a Y transition and scale.  Here’s an XML file

And I run those for each row with delay of 50 ms. Since I have hardcoded rows in layout, here’s the code.

You need to set it invisible before animation starts because we don’t want to display it in the end position before animation. And the same goes for every row. One more thing – you might be tempted to use the same Animation object, since all rows use the same animation. Don’t. It will be a mess. Because views setStartTime of Animation objecton startAnimation, basically you would be changing same object from different views and accessing its fields

Animating RecyclerView

Yes, it works with static views, but what about real time generated content? No problem! Start animation in onBindViewHolder

But it will be sliding down all the time when you scroll. And since we just want an enter activity transition effect, that’s not what we need.  What I came up was setting a delay based on position and run animation only if it’s activity transition(just started activity). I start countdown to set a flag that animation has been played, after it we don’t display it in onBindViewHolder.

The countdown is 400 ms just an approximate number of rows displayed on screen multiply by delay of 50 ms.

Image Slide Down

Let’s apply the same slide down animation to backdrop image, but without a scale and with little changes in duration. And that’s the final result for today.

Android Activity Transitions

 

 

You can get GitHub repo here if you want to try it yourself. It’s pretty simple things, the main thing is to keep Activity transitions short and subtle, you’ll feel it when animations take too much time and too obvious. For example in here backdrop animation doesn’t look like in a flow, definitely room for improvements

Alright, thanks for reading. There’s more cool stuff coming, definitely need to dig in more in to animations. And if find it useful and think somebody will benefit from it – feel free to share and subscribe