Shared element transitions
Shared element transitions
Another kind of animation that is new to material design is the shared element transition, or hero
transition. This transition is meant for a specific situation: where two screens display some of the same
things.
Think back to your work on CriminalIntent. In that application, you had a thumbnail view of a picture
you took in CrimeDetailFragment. In one of the challenges, you were asked to construct another view
that zoomed in to a full-size visual of that picture. Your solution might have looked something like
Figure 35.7.
Figure 35.7 A zoomed-in picture view
This is a common interface pattern: You press one element, and the next view provides more detail for
that element.
A shared element transition is an animation for any situation where you are transitioning between two
screens that are displaying some of the same elements. In this case, both the big image on the right
and the small one on the left are displaying the same picture. The picture, in other words, is a shared
element.