Friday, June 7, 2013

DevBytes: Custom Activity Animations

It's Friday: time for another DevBytes.

It's been a while, but they're back. At least until the queue runs out again and I write another glut of demos to talk about.

This episode, and most of the upcoming ones (teaser alert!) are around demos/code that we showed in A Moving Experience, the animation talk that +Romain Guy and I gave at Google I/O 2013.

Custom Activity Animations:
Window animations provide an easy way to animate transitions between activities. The animations can be customized to some extent, but there's only so much interaction between the launching and launched activities that you can take advantage of with the standard window animations.
This episode covers a different technique for fully customizable animations.

Video: http://www.youtube.com/watch?v=CPxkoe2MraA

Code: http://developer.android.com/shareables/devbytes/ActivityAnimations.zip

1 comment:

Alexander Mironov said...

There is minor issue with the code: the detail image's scale type is "centerInside" so we should take a transparent paddings (top and bottom or left and right) into account when we scale image. Quick (and dirty) fix for this is to replace onPreDraw content with:

mImageView.getViewTreeObserver().removeOnPreDrawListener(this);

// Figure out where the thumbnail and full size versions are, relative
// to the screen and each other
int[] screenLocation = new int[2];
mImageView.getLocationOnScreen(screenLocation);

// Scale factors to make the large version the same size as the thumbnail
mWidthScale = (float) thumbnailWidth / mImageView.getWidth();
mHeightScale = (float) thumbnailHeight / mImageView.getHeight();
mWidthScale = mHeightScale = Math.max(mWidthScale, mHeightScale);
int leftAndRightPadding = Math.round(mWidthScale * mImageView.getWidth() - thumbnailWidth) / 2;
int topAndBottomPadding = Math.round(mHeightScale * mImageView.getHeight() - thumbnailHeight) / 2;

mLeftDelta = thumbnailLeft - screenLocation[0] - leftAndRightPadding;
mTopDelta = thumbnailTop - screenLocation[1] - topAndBottomPadding;

runEnterAnimation();

return true;



P.S. Blogger don't let me use "pre" tag.