How to implement first launch tutorial like Android Lollipop apps: Like Sheets, Slides app?

I have Android 5.0 final build flashed in my Nexus 5. I noticed it has very beautiful, clean and elegant way of showing tutorial at first launch. Apps like "Sheets", "Slides" etc.

How can we implement that in our Android L compatible apps?

Also the app fades off the first launch screen and then shows the tutorial.

Solution 1:

There is a pretty good library for emulating these first run tutorials: https://github.com/PaoloRotolo/AppIntro

Click for larger image

Solution 2:

First of all, there's no secret. The quality of the illustrations is the key to get this pretty result. So unless you're a designer yourself, you'll have to find a good designer for them.

Appart from that, I can see several ways to get close to this.

1. First, there's a very subtle parallax effect on the illustrations. You can achieve it by using this ParallaxTransformPage gist. I use it and it works pretty well.

2. Also, here's a lib that let you smoothly change the screen's background color while switching pages.

3. For the splashscreen fade out animation, you can do something like this :

   final ImageView launchScreen = (ImageView) context.findViewById(R.id.launch_screen_view);
   new Handler().postDelayed(new Runnable()
   {
       @Override
       public void run()
       {
           Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.fade_out);
           animation.setAnimationListener(new Animation.AnimationListener()
           {
               // ...
   
               @Override
               public void onAnimationEnd(Animation animation)
               {
                   launchScreen.setVisibility(View.GONE);
               }
           });
           launchScreen.startAnimation(animation);
       }
   }, 2000);
   

4. Follow linkas's answer for the use of a ViewPagerIndicator and how to launch the tutorial only the first time user launches the app.