Android "first time" app user tutorial

Question

I'm trying to create an opening tutorial that consists of four panes for my application, but since I'm new to Android, I want to make sure I'm considering all of my options before marking this task as "complete". I know of three ways, I can only really accomplish one. There are no requirements for this tutorial, but some "wanted features" would be a sliding action to each pane would be nice as well as the image and the bottom (navigation circles) not moving and the title on top not moving.

One Way

4 separate activities and 4 separate layouts

The red circled items are textViews that are centered horizontally and pushed off the top.

The white circled items are imageViews that are centered horizontally and vertically.

The purple circled are imageViews that are centered horizontally and pushed off the bottom.

Second Way

4 fragments on one activity

Fragments were difficult to learn, but the more I read about them/see tutorials on them, they seem to only really be used for tablets. Would it be a valid way to accomplish this?

Third Way

ViewPager?

http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html

I've never used this before, but I know it's an option.

Final Question

Which way is used more often/what's the proper way to implement this? Is there any way to only have the middle part (the image) slide in, but the title (top) and the navigation images (bottom) just change once the image slides in?

Answer 1

Here's some code to do it the ViewPager way (which is exactly how u do it)

package com.test.viewpager;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class WalkthroughActivity extends Activity {

    private static final int MAX_VIEWS = 5;

    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.walkthrough_activity);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(new WalkthroughPagerAdapter());
        mViewPager.setOnPageChangeListener(new WalkthroughPageChangeListener());
    }


    class WalkthroughPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return MAX_VIEWS;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == (View) object;
        }

        @Override
        public Object instantiateItem(View container, int position) {
            Log.e("walkthrough", "instantiateItem(" + position + ");");
            LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View imageViewContainer = inflater.inflate(R.layout.walkthrough_single_view, null);
            ImageView imageView = (ImageView) imageViewContainer.findViewById(R.id.image_view);

            switch(position) {
            case 0:
                imageView.setImageResource(R.drawable.image1);
                break;

            case 1:
                imageView.setImageResource(R.drawable.image2);
                break;

            case 2:
                imageView.setImageResource(R.drawable.image3);
                break;

            case 3:
                imageView.setImageResource(R.drawable.image4);
                break;

            case 4:
                imageView.setImageResource(R.drawable.image5);
                break;
            }

            ((ViewPager) container).addView(imageViewContainer, 0);
            return imageViewContainer;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager)container).removeView((View)object);
        }
    }


    class WalkthroughPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageSelected(int position) {
            // Here is where you should show change the view of page indicator
            switch(position) {

            case MAX_VIEWS - 1:
                break;

            default:

            }

        }

    }
}

And here's my walkthrough_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/screen_navigation_button" />

    <!--  This TextView will not swipe when you swipe in the ViewPager -->

    <TextView
        android:id="@id/screen_navigation_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:padding="10dip"
        android:text="Hello, Walkthrough!"
        android:textSize="18sp" />

</RelativeLayout>

And walkthrough_single_view.xml is as simple as this -

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

Hope that helps :)

Answer 2

ViewPagerIndicator

I recommend you to use ViewPager way, Try the ViewPagerIndicator library developed by Jake Wharton because it also provides a few different tab types that you can choose from, besides being very easy to style.

https://github.com/JakeWharton/Android-ViewPagerIndicator

There's a sample code for ViewPagerIndicator application too at here

Paging indicator widgets that are compatible with the ViewPager from the Android Support Library to improve discoverability of content.

Try out the sample application on the Google Play.