How to implement first launch tutorial like Androi

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

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

Answer 2

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

Click for larger image

Answer 3

I found this library here:

CircleIndicator Library

It creates an Lollipop-like ViewPager with those circles. Just format the layout so that it's suitable for your app and then you should be fine. It doesn't contain an animation, but I think it's a start.

Answer 4

If you do not want to use a library, it is pretty simple. I used to use a library before, but I started implementing a custom version. All you have to do is use a tabbed view and view pager. Then design all these pages in the tutorial as fragments. These fragments can have any buttons, in any position, and different styling as you like because you are implementing each fragment yourself. And it is not difficult. In the end, just use shared preferences, to check if it is the first run. If it is how the activity which has all the fragments. Else do not show that activity.

Answer 5

Maybe you would like to use one of Roman Nurik solutions: https://github.com/romannurik/Android-WizardPager

Answer 6

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.