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", "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.

Answer 1

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

Click for larger image

Answer 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.

Answer 3

This git should help you implement what you want: https://github.com/spongebobrf/MaterialIntroTutorial,

This android Library demonstrating a material intro tutorial much like the ones on Google Sheets, as you mention.

In addition, this library takes the background color set for each page and when scrolling between the two pages, the two colors will fade into one another

Here are few more intro gits that can help you out:

1. https://github.com/HeinrichReimer/material-intro
2. https://github.com/PaoloRotolo/AppIntro