Reputation: 101

How to create a guided tour for an android application

A couple of months ago I bought myself an HTC ONE X. I admired they way they guide the user in taking his first steps in the phone with interactive widgets and help functions.

I would like to add this kind of functionality to Rogerthat, the app we are building, but I wonder if there are tools / libraries that can help me achieve this?

Upvotes: 6

Answers (6)

Behzad Momahed Heravi

Reputation: 1393

I did a guided tour for my app that allows the user to navigate through 4 note pages and see the instructions. Here's the code:

public static void tour(final Context context, final String title, final int pageNumber, 
                        final Drawable icon, final String[] pageMessage, final int[] layouts, final ViewGroup root) {
    Builder tourDialog = new AlertDialog.Builder(context);
    int nPage = 0;
    
    
    if (pageMessage!=null){
        tourDialog.setMessage(pageMessage[pageNumber]);
        nPage = pageMessage.length;
    }
    
    if (layouts!=null){         
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        View layout1 = inflater.inflate(layouts[pageNumber], root);
        tourDialog.setView(layout1);
        //tourDialog.setView(views[pageNumber]);
        nPage = layouts.length;
    }
    
    
    tourDialog.setTitle(title+" (page "+(pageNumber+1)+"/"+nPage+")");
    
    tourDialog.setPositiveButton("Prev",
            new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int whichButton) {
                    tour(context, title,  pageNumber-1, icon, pageMessage,layouts, root);
                    return;
                }
            });


    tourDialog.setNeutralButton("Next",
            new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int whichButton) {
                    tour(context, title,  pageNumber+1, icon, pageMessage,layouts, root);
                    return;
                }
            });
    tourDialog.setNegativeButton("Ok",
            new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int whichButton) {
                    return;
                }
            });
    if (icon!=null)
        tourDialog.setIcon(icon);
    AlertDialog dialog = tourDialog.create();
    
    dialog.show();
    
    if (pageNumber==0)
        dialog.getButton(AlertDialog.BUTTON_POSITIVE).setEnabled(false);
    else if (pageNumber==nPage-1){
        dialog.getButton(AlertDialog.BUTTON_NEUTRAL).setEnabled(false); 
    }
}

Example of usage:

int[] layout = {R.layout.note1, R.layout.note2, R.layout.note3, R.layout.note4}; //resource id of each page's layout
tour(context, "Notes ", 0,getResources().getDrawable(R.drawable.gmpte_logo_25px),null, layout, (ViewGroup) findViewById(R.id.root));

and an example of note page layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@+id/root"
  android:padding="10dip">
          
<TextView android:id="@+id/text_before"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textColor="#FFF"
          android:textSize="16dp"
          android:text="@string/note1_before_text"
          android:layout_marginTop="10dp"/>
<ImageView android:id="@+id/image"
          android:contentDescription="@string/desc"
          android:src="@drawable/mylocation_blue"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_toRightOf="@+id/text_before"
          />
<TextView
    android:id="@+id/text_after"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/text_before"
    android:layout_below="@+id/image"
    android:text="@string/note1_after_text"
    android:textColor="#FFF"
    android:textSize="16dp" />
</RelativeLayout>

You need to write your own layout for each note page, but use the same id (android:id="@+id/root") for the root layout in each page.

Upvotes: 5

xarlymg89

Reputation: 2617

You can try TourGuide http://worker8.github.io/TourGuide

It's fairly up-to-date (uses Kotlin 1.2) and works pretty nicely.

Most of the alternatives I've checked recently (in 2021), are either not working or buggy.

TourGuide is not perfect (it's been 3 years since it's last commit), and the maintainer doesn't seem to respond to PRs or issues.

Upvotes: 0

dnocode

Reputation: 2088

I wrote little library That contains a simple component for making a app tour. It`s very restricted to my case but maybe could be your case . Single LessonCardView Showed onstartactivity for the first time or on button click Any criticism ,help or advice will be appreciated. thanks https://github.com/dnocode/DnoLib

Upvotes: 0