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

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 2

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 3

You can use ViewPagerIndicator here: http://viewpagerindicator.com/#download. Then, you should define SharedPreferences, to show that ViewPager only once. You can write:

public class MainActivity extends Activity {
    public static final String MyPrefs = "MyPrefs";
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SharedPreferences sp = getSharedPreferences(MyPrefs, Context.MODE_PRIVATE);
        if (!sp.getBoolean("first", false)) {
            SharedPreferences.Editor editor = sp.edit();
            editor.putBoolean("first", true);
            editor.commit();
            Intent intent = new Intent(this, SampleCirclesDefault.class); //call your ViewPager class
            startActivity(intent);
        }
    }
}

Answer 4

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 5

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

Answer 6

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

Click for larger image