Android Programming The Big Nerd Ranch Guide by Bill Phillips, Chris Stewart, Kristin Marsicano (z-lib.org)

(gtxtreme123) #1

Chapter 35  Material Design


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.


Listing 35.4  Finding screen coordinates in a click listener


@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.


Listing 35.5  Making and executing a 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.

Free download pdf