The AppBar is an evolution of the ActionBar which provides us with a rich toolbox for defining and customising the behaviour. All apps will have different requirements for their AppBars and each app may have different AppBar implementations in different Activities. In this series, rather than look at the AppBar implementations themselves, we’re going to explore how can integrate and animate different elements of the AppBar to provide smooth UI and UX which implement material design style animations and transitions.
Previously we stretched our images to be 20% wider than the screen with 10% overhanging on both left and right edges. In this article we’ll use that extra width to create some subtle motion during ViewPager transitions.
Putting these images in to motion is actually pretty straightforward now that we have the wider images, and already have the alpha fade animations in place.
The first thing that we nee to do is to to make sure that the X translation of the outgoing image is reset when we start the transition animation:
class ImageAnimator {
.
.
.
public void start(int startPosition, int finalPosition) {
actualStart = startPosition;
start = Math.min(startPosition, finalPosition);
end = Math.max(startPosition, finalPosition);
@DrawableRes int incomingId = pagerAdapter.getImageId(finalPosition);
positionFactor = 1f / (end - start);
outgoing.setImageDrawable(imageView.getDrawable());
outgoing.setTranslationX(0f);
outgoing.setVisibility(View.VISIBLE);
outgoing.setAlpha(1f);
imageView.setImageResource(incomingId);
}
.
.
.
}
If we didn’t do this we may get a glitch on the first frame of the transition animation because the outgoing image has an X translation value from the last transition.
Next we need to apply X translation values depending on the offset value of the transition. The offset value will be in the range from 0.0f (at the start of the transition) to 1.0f at the end of the transition. For the outgoing image this needs to translate to a value of 0 offset to -10% of the image width when moving to the left, and 0 offset to +10% of the image width when moving to the right; and for the incoming image this needs to translate to a value of +10% of image width to 0 offset when moving to the left, and -10% of the image width to 0 offset when moving to the right:
class ImageAnimator {
private static final float FACTOR = 0.1f;
.
.
.
public void forward(int position, float positionOffset) {
float offset = getOffset(position, positionOffset);
int width = imageView.getWidth();
outgoing.setTranslationX(-offset * (FACTOR * width));
imageView.setTranslationX((1 - offset) * (FACTOR * width));
imageView.setAlpha(offset);
}
public void backwards(int position, float positionOffset) {
float offset = getOffset(position, positionOffset);
int width = imageView.getWidth();
outgoing.setTranslationX((1 - offset) * (FACTOR * width));
imageView.setTranslationX(-(offset) * (FACTOR * width));
imageView.setAlpha(1 - offset);
}
.
.
.
}
That’s all there is to it thanks to the preparatory work we’ve already done with the alpha transitions and the image sizing. If we now run this we can see a nice movement and cross-fade, with the movement being much softer than that of the individual pages within the ViewPager:
It is a very similar effect to that in Kirill Grouchnikov’s Google+ post about some new transitions in the Play Store app but the image edges are not visible in our implementation and the whole effect is just very slightly softer as a result.
That concludes our look at some of the things we can do with feature images in the AppBar.
The source code for this article is available here.
© 2015, Mark Allison. All rights reserved.
Copyright © 2015 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.
