Parallax and Alpha tricks on Android ViewPager

Google’s latest Android apps include a really slick ‘Product Tour’ on first run which introduces the product, they’ve got some beautiful UI touches including smooth cross-fading backgrounds, subtle parallax scrolling, a clean footer with a simple circle indicator, and when you scroll the last page the tutorial fades to transparent revealing the app underneath:

14253026241425302634

Here’s the product tour in our own Pennine Way app, it includes all the same transitions:

The full Activity source is below, it has a simple ViewPager indicator rather than using a library, look at the ViewPager.PageTransformer implementation CrossfadePageTransformer which is where all the alpha/crossfade and parallax transitions happen:

The TutorialActivity layout, which includes the footer, also note the root background which makes the Activity transparent for the last ViewPager slide:

The TutorialPane Fragment has no logic, it just displays the layout: