The circular reveal animation is used in material design to look like an ink flood-fill. A view or piece of content is progressively revealed outward from a point of interaction, usually a point pressed by the user. Figure 35.6 gives you an idea of what a circular reveal can bring to the party.

Figure 35.6  Circular reveal from pressing an item in BeatBox

You may remember using a simple version of this way back in Chapter 6, where you used it to hide a button. Here we will talk about another, slightly more involved way to use a circular reveal.

To create a circular reveal animation, you call the createCircularReveal(…) method on ViewAnimationUtils. This method takes in quite a few parameters:

    static Animator createCircularReveal(View view, int centerX, int centerY,
                                         float startRadius, float endRadius)

The View passed in is the View you would like to reveal. In Figure 35.6, this view is a solid red view that is the same width and height as the BeatBoxFragment. If you animate from a startRadius of 0 to a large endRadius, this view will start out being completely transparent and then slowly be revealed as the circle expands. The circle’s origin (in terms of the View’s coordinates) will be centerX and centerY. This method returns an Animator, which works exactly like the Animator you used in Chapter 32.

The material design guidelines say that these animations should originate from the point where the user touched the screen. So your first step is to find the screen coordinates of the view that the user touched, as in Listing 35.4.

@Override
public void onClick(View clickSource) {
    int[] clickCoords = new int[2];

    // Find the location of clickSource on the screen
    clickSource.getLocationOnScreen(clickCoords);

    // Tweak that location so that it points at the center of the view,
    // not the corner
    clickCoords[0] += clickSource.getWidth() / 2;
    clickCoords[1] += clickSource.getHeight() / 2;

    performRevealAnimation(mViewToReveal, clickCoords[0], clickCoords[1]);
}

Then you can perform your reveal animation.

private void performRevealAnimation(View view, int screenCenterX, int screenCenterY) {
    // Find the center relative to the view that will be animated
    int[] animatingViewCoords = new int[2];
    view.getLocationOnScreen(animatingViewCoords);
    int centerX = screenCenterX - animatingViewCoords[0];
    int centerY = screenCenterY - animatingViewCoords[1];

    // Find the maximum radius
    Point size = new Point();
    getActivity().getWindowManager().getDefaultDisplay().getSize(size);
    int maxRadius = size.y;

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        ViewAnimationUtils.createCircularReveal(view, centerX, centerY, 0, maxRadius)
                .start();
    }
}

Important note: The View must already be in the layout for this method to work.

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.

Beginning in Lollipop, Android provides techniques for accomplishing a transition between activities or between fragments. Here, we will show you how it works with activities. The middle of the animation looks like Figure 35.8.

Figure 35.8  Shared element transition

For activities, the basic implementation is a three-step process:

First, you have to turn on activity transitions. If your activity uses the AppCompat theme used elsewhere in the book, then you can skip this step. (AppCompat inherits from the Material theme, which turns on activity transitions for you.)

In our example, we gave our activity a transparent background by using @android:style/Theme.Translucent.NoTitleBar. This theme does not inherit from the Material theme, so it does not have activity transitions turned on. They have to be turned on manually, which can happen in either of two ways. One option is to add a line of code to the activity, like this:

@Override
public void onCreate(Bundle savedInstanceState) {
    getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
    super.onCreate(savedInstanceState);
    ...
}

The other way is to tweak the style the activity uses and set the android:windowActivityTransitions attribute to true.

<resources>
    <style name="TransparentTheme"
        parent="@android:style/Theme.Translucent.NoTitleBar">
        <item name="android:windowActivityTransitions">true</item>
    </style>

</resources>

The next step in the shared element transition is to tag each shared element view with a transition name. This is done in a property on View introduced in API 21: transitionName. You can set it in either XML or in code; depending on the circumstance, one or the other might be appropriate. In our case, we set the transition name for the zoomed-in image by setting android:transitionName to image in our layout XML, as in Figure 35.9.

Figure 35.9  Zoomed-in image layout

Then we defined a static method startWithTransition(…) to set the same transition name on a view to animate from.

public static void startWithTransition(Activity activity, Intent intent,
  View sourceView) {
    ViewCompat.setTransitionName(sourceView, "image");
    ActivityOptionsCompat options = ActivityOptionsCompat
        .makeSceneTransitionAnimation(activity, sourceView, "image");

    activity.startActivity(intent, options.toBundle());
}

ViewCompat.setTransitionName(View, String) is there to help out on older versions of Android, where View will not have a setTransitionName(String) implementation.

In Listing 35.8, you can see the final step, too: making an ActivityOptions. The ActivityOptions tells the OS what the shared elements are and what transitionName value to use.

There is a lot more to know about transitions and shared element transitions. They can also be used for fragment transitions, for example. For more information, check out Google’s documentation for the transitions framework at developer.android.com/​training/​transitions/​overview.xhtml.