Explaining Shared Element Transitions

Explaining Shared Element Transitions


Just like activity content transitions, shared element transitions use
the same plumbing to power them. That is the transitions framework. Let’s go back to our photo grid example,
and add a shared element transition, so that the selected photo transitions
smoothly between the grid and the details page. Here’s what it’s going to look like. Hopefully you agree that this is a much
smoother, more continuous experience. Now to build this, it helps to
understand a little bit about how the system works under the hood. When we say we’re doing a shared element
transition between two activities, we aren’t actually sharing
any views in their hierarchy. Each activity has
an independent view tree. What we’re doing, is passing
information about the shared view. Such as, its position and
its size between the two. When the second activity launches,
it sets a transparent background and hides all of its own view so
that you can, so to speak, see through to the previous
activity behind it. It then locates the shared view
within its own hierarchy and alters its attributes to match those
passed in from the launching activity and makes that single view visible. It then runs animations to transition
the shared view from this state to its natural position in the layout. As the transition progresses,
the window background and the rest of the non-shared amids slowly
fade in until they’re totally opaque. So, while the views aren’t technically
shared, it’s clever trick of smoke and mirrors as it were,
makes it appear that they are. So now that we understand
how the process works, let’s take a look at how we mark
elements as being shared, and how we control
the animations that are run.