GEORGE MOUNT: Hi.
I'm George Mount from the Android UI Toolkit Team,
and I'm here to tell you about the new Activity Transitions
API that we're releasing in the L Developer preview.
But before we get to Activity Transitions,
let's talk a little bit about transitions.
Transitions help give continuity to the user.
In this app, I have buttons on the left and on the right.
And when the user clicks on a button, something is happening,
but it isn't clear what.
Now using the Transitions API, released in KitKat,
it only takes a few lines of code,
and it becomes clear to the user that the buttons
are moving between the columns.
The Transitions API is great when working with layouts,
but what can we do between activities?
The default Activity Transition has a scale and fade effect.
I slowed down the transitions on my phone
so that they are easier to see.
We can customize Activity Transitions with, for example,
a fade.
We can also do a scale, slide, or rotate,
but they work against the entire window
and don't give the user the continuity we really want.
For the new Activity Transitions API,
if we wanted this continuity, we had
to create this transition all on our own.
Here we have an activity, Activity A,
with a little yellow view that we want to transition
into the new activity.
Now, in the old way of doing things,
the first thing we had to do was capture the size and position
of the shared element.
Next, we started the activity, passing the location
in the intent.
Our new activity, Activity B, had
to start as a translucent window with a transparent background.
It also had to prevent the default scale
and fade transition.
The shared element view was then sized and placed
in the position passed in the intent.
The background was then faded in,
and the shared element could then
transition to its final location.
And then the rest of our UI could come in.
Wow.
That's a lot of work.
Let's see how we do it with the new Activity Transitions API.
Here I have contact group with all of my handsome coworkers.
When I click on an image, it will bring up
the detailed contact information in another activity.
I'd like to share the contact image
to draw the user between the two activities.
Because I can have any number of shared elements,
I need to name each of them in my contract
between my activities.
I only have one, and I have given it
the name "Contact Image."
To tell the framework which view is going to be the shared
element, I give the image a name also.
I've named it the same thing, so I
don't need any code to glue the contract name to my shared
element.
I also want the shared element coming back to the grid,
so I name that element as well.
I then just launch it with an activity options bundle.
Let's see what it looks like.
It looks nice, and we didn't have
to do any of that hard work.
When the orientation changes, the shared element
picks up the final position from the calling activity
and restores it to the right place.
Amazing.
My activities were doing a subtle fade-in of the views
other than the shared element.
I'd like something a little more dramatic.
Let's set the entering transition
to use a nice slide effect so all the other views enter
from the bottom.
Previously, the calling activity didn't have any effect.
I like to have the views around the shared element
leave with an explode animation.
Let's see what it looks like.
The views from the calling activity
push out from the scene, while the views
from the entering activity slide up.
I can also make the transition even more dramatic
by having the entering activity wait for the calling activity
to finish before it slides in.
Now that you've seen how easy it is
to add continuity between your activities,
I know that you are going to want
to add activity transitions to your applications.
Make sure to check out more of our DevBytes
and the rest of our I/O videos.
Thanks very much for watching.