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

Question

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\", \"Sli

Answer 1

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.