The idea of a parallax is to give the illusion of depth thanks to targets seemingly moving at a different pace. You have probably already noticed the effect in real life when riding on a straight line e.g. staring at individual scenery items from a train window.

The idea is basically that the closer an object is to you, the faster it seems to move to your eyes. The extreme being the background (like distant mountains) which doesn’t seem to move at all.

This effect, called Parallax, is used proficiently on iOS and Android launchers when scrolling through your apps to make it look like your wallpaper is further away from your icons as they move.

We can re-create parallax pretty easily on Android using the ViewPager class of the support package as a foundation for handling the touch events and displaying our content.

Our goal here is to create an awesome on-boarding screen to present your app. Each “slides” will have its own background and a couple of visual elements (text, device frame, other widgets) that will be arranged in different virtual layer (i.e. some will move faster than others).

Check out an example below of such a screen and the slightly different position offsets applied to each elements:

The core idea is to setup a ViewPager taking up all the screen space (you can even use the new KitKat translucent window chrome like in the screencast with the Holo.*.NoActionBar.Translucent style) and then create a generic FrameLayout -based layout (remember how FrameLayout is your friend?) for the page. You don’t need to add an ImageView for the background since we will directly use the background property of the FrameLayout .

It’s also not necessary to have pre-scaled those background images since setting them as the background drawable of the main FrameLayout will automatically make them fit but it’s better if their dimensions are close to the form factor of the device (16/9 portrait usually) so that they don’t appear squashed (if you want to get fancy you might want to dynamically blur those too).

Afterwards, just sprinkle the layout with TextView , ImageView or whatever other view you may want to showcase your app using the layout_gravity and layout_margin attributes to align them on the screen. Here is the example, very dumb, layout I’m using for the demo:

<FrameLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:id= "@+id/backgroundFrame" android:background= "@drawable/onboarding_bg_1" > <TextView android:text= "A Big Title About Something" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:id= "@+id/bigTitle" android:layout_gravity= "center_horizontal|top" android:layout_marginTop= "64dp" android:textColor= "#ffffffff" android:textSize= "24sp" android:shadowColor= "#ff000000" android:shadowDx= "0" android:shadowDy= "1" android:shadowRadius= "0.5" /> <TextView android:text= "A Subtitle About the Thing" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:id= "@+id/bigSubtitle" android:layout_gravity= "center_horizontal|bottom" android:layout_marginBottom= "64dp" android:textColor= "#ffffffff" android:textSize= "20sp" android:shadowColor= "#ff000000" android:shadowDx= "0" android:shadowDy= "1" android:shadowRadius= "0.5" /> <ImageView android:src= "@android:drawable/ic_menu_gallery" android:layout_width= "200dp" android:layout_height= "300dp" android:id= "@+id/centerImage" android:layout_gravity= "center" /> </FrameLayout>

Once you have wired your ViewPager with an Adapter feeding the right content, we are going to create a PageTransformer which is where the parallax magic is gonna be created. Implementing this interface requires only one method which is called for every scroll offset of a given page View together with a value indicating its position relative to the center of the screen.

That relative position is very handy because it’s clamped between -1 (left of the screen) and +1 (right of the screen) with the zero value in the middle. That means we can derive a very simple parallax equation based on its value:

public class OnBoardingPageTransformer : Java . Lang . Object , ViewPager . IPageTransformer { float parallaxCoefficient ; float distanceCoefficient ; IEnumerable < int >[] viewLayers ; public OnBoardingPageTransformer ( float parallaxCoefficient , float distanceCoefficient , params IEnumerable < int >[] viewLayers ) { this . parallaxCoefficient = parallaxCoefficient ; this . distanceCoefficient = distanceCoefficient ; this . viewLayers = viewLayers ; } public void TransformPage ( View page , float position ) { float coefficient = page . Width * parallaxCoefficient ; foreach ( var layer in viewLayers ) { foreach ( var viewID in layer ) { var v = page . FindViewById ( viewID ); if ( v != null ) v . TranslationX = coefficient * position ; } coefficient *= distanceCoefficient ; } } }

The trick is then to have a way to define layers and then let the user supply a couple of arguments to parametrize the effect. In the above class, we achieve this by letting the user gives a list of view IDs for each layer they want to create. You can then set the instance on your ViewPager by calling the SetPageTransformer method.