Okay, so back to activity content transitions.
These transitions allow you to animate the views within an activity when they
enter or leave it.
Say you have two activities, A and B.
>From activity A, we can launch activity B by going startActivity and
return by hitting the back button.
When A calls startActivity to launch activity B,
we have the opportunity to run two sets of transition animations.
Firstly we can run an exit transition on the views in activity A.
And secondly, we can run an enter transition on the views in activity B.
We can define these transitions either in code, or declare them in XML and
then set them on the activities feed.
Let's take a look at examples of both approaches.
Let's, for example, add animations to this app, which shows a grid of images.
Clicking on an individual image takes you to a detail screen.
So here's what it looks like before we add any content transitions,
we just see the standard window animations.
Let's add an exit transition to the first grid screen.
We'll use an explode transition, which moves all of the views outwards.
Let's do this declaratively.
First, we create a new file in res/transition, and
we're going to call it grid_exit.
You may have to create this transition folder if it doesn't already exist.
Now, the transition itself uses the exact same syntax as we saw earlier.
To use the built-in explode transition, all we need is this explode tag.
Now, to assign the exit transition to the activity,
we'll open the activities theme and add an entry for
windowExitTransition which points to the transition we just defined.
Lastly, there are a couple of things we need to do to enable activity content
transitions.
First we'll need to alter our call to start activity to use
this variant which takes a bundle.
We'll go into this bundle a bit shortly.
Next we might need to set the windowContentTransitions flag
to true on your applications theme.
If you're already inheriting from a material theme or
AppCompat then this will automatically be set for you.
Okay, so now that we've done that, here's how it looks.
Not too bad.
We see that the views move outwards as we move on to the detail screen.
Let's add another transition to the content on the detail screen
as it comes in.
Let's slide the text into place from the bottom.
This time we'll create the transition from code.
In the DetailActivity we instantiate a new slide transition object.
And we here, in the constructor, tell it to enter from the bottom edge.
We then set which views it's acting on using this,
addTarget call passing in the id of the view.
We'll also set the duration and
interpolator to quickly ease the view into place.
More on these concepts soon.
Finally, we call setEnterTransition on the window.
Here's the result.
Well, the title and description slide in nicely, but the image just appears.
This is because by opting in to use activity content transitions,
we're implicitly turning off the window animation feature.
As our transition doesn't target the image specifically, it just appears.
We'll fix that shortly.
Let's take a second to consider these two different approaches for
creating transitions in code and XML.
Now, the code approach might involve less steps,
but there are some trade-offs to consider.
Firstly, it's harder to reuse the transition in other places.
Also, this example was relatively simple.
But as you create more complicated transitions,
then this can get a bit more complex.
It can be nice to keep this contained in a single XML file for
good separation of concerns and to keep your activities clean.
Lastly, as we mentioned, this feature was introduced in API 21.
So we should guard our code to not attempt to use APIs that don't exist on
earlier versions.
In the code approach you can use an API check like this or declaratively,
you can use a resource qualifier such as transition-v21 and
values-v21 to only use it on the newer platforms.
As you might have guessed, I'm quite a fan of the declarative approach, but
pick the one that makes the most sense for your use case.
You can even mix and
match by using a transition inflator to load the XML transition in code.
Now you may have noticed that when we hit the back button to return from
the details page to the grid, our explode transition reversed,
or imploded, I guess.
Now, this is a default behavior,
to reverse any transitions that you set on the way back.
But you can, of course, hook into this and set your own.
So in addition to the enter and exit transitions we've looked at,
you're also able to specify return and re-enter transitions.
So going from activity A to B, and back again,
the sequence would be first, an exit transition on activity A,
followed by the enter transition on activity B we've already looked at.
Then when you hit back,
you have the opportunity to run a return transition on the views in activity B,
followed by a re-enter transition on the views in activity A.
Let's hook into the re-enter event to customize the behavior when returning
from the details page to the grid.
Let's make the items slide in from the top like this.
This is as easy as simply specifying a new transition in the theme like so.
So here the windowReenterTransition pointing to one of the default platform
transitions.