Skip to content
A generic Walkthrough / Onboarding Tutorial for Android apps.
Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Initial commit Mar 9, 2017
gradle Initial commit Mar 9, 2017
LICENSE Initial commit Mar 9, 2017
README.md Update README.md Mar 9, 2017
build.gradle Initial commit Mar 9, 2017
demo.png Add files via upload Mar 9, 2017
example.gif Add files via upload Mar 9, 2017
gradle.properties Initial commit Mar 9, 2017
gradlew Initial commit Mar 9, 2017
gradlew.bat Initial commit Mar 9, 2017
settings.gradle Initial commit Mar 9, 2017

README.md

Walkthrough / Onboarding Tutorial

alt tag

This is a generic Walkthrough / Onboarding Tutorial activity for Android apps. The screen has two parts to it: a screen shot of your app, and some description below. Demo it live in 2Do.

Why another walkthrough project?

Most onboarding projects out there rely on some pretty icons, colors and a bit of parallax. This is fine, except you miss out on the ability to actually showcase your app.

If your app is constantly improving, and you find yourself adding new features often, it becomes a burden to design and add new icons & colors to your onboarding view. With this project, all you do is take real screenshots of your app, create a new walk through section, as described below, and you're done. The activity will present you with screenshots of your app inside of a phone template, and you describe how you want these to transition and appear on screen.

Requirements

  • Android 5.0 Lollipop (API lvl 21) or greater (mainly since the project uses SVG drawables; replacing with PNGs would lower this down to API 14)
  • Your favorite IDE

How to customize

In WalkthroughActivityFragment, navigate to the initSections() method and define your sections there.

You simply construct a WalkthroughSection and define how you would like it to appear on screen. The embedded screenshot can move from left to right, top to bottom and have zoom applied to it. The image then accompanies a title and some description. In code, it's as simple as:

    WalkthroughSection section = new WalkthroughSection();
    
    /* Set the image, title and desription to show */
    section.sectionShotName = R.drawable.tut_inbox;
    section.sectionTitle = "Native Inbox for Getting Things Done®";
    section.sectionDescription = "Fancy David Allen's GTD® methodology? Enable the special Inbox to serve as your default collection list from Settings > Default Collection List.";
    
    /* 0 - 100. Vertical position. 
       0 = top part of phone hidden below the container; 
       100 = bottom of part of phone and container aligned 
    */
    section.sectionDeviceVerticalPercToShow = 40;
    
    /* -100 - 100. Horizontal position.
       0 = phone appears in center / normal;
       100 = phone's left edge to the right of the center position of the screen
       -100 = phone's right edge to the left of the center position of the screen
    */
    section.sectionDeviceHorizontalPercToShow = 0;
    
    /* 0 - 100. Zoom. Can be negative to zoom out.
       0 = normal size
       100 = twice as large 
    */
    section.sectionDeviceZoomPercToShow = 0;
    
    /* Add motion effect of slowly moving upwards towards infinity after appearing on screen */
    section.prolongMovingUp = 28;
    
    ...
    
    walkthroughSectionList.add(section)

Output

alt tag

Licence

Walkthrough Onboarding is released under the MIT license. See LICENSE for details.

Follow Us

Twitter URL Twitter Follow

You can’t perform that action at this time.