Skip to content

Configure Tutorial Pages

Alexander Vlasov edited this page Nov 11, 2016 · 1 revision

First of all you need to create XML layouts for your tutorial pages. Specify IDs for those views that would be used in the parallax effect. Then there are two ways how you can configure your pages.

Via TutorialPageOptionsProvider

This provider will automatically create instances of PageFragment with proper PageOptions configuration. This method will suit to those developers who don't need any additional work inside of PageFragment such as user input handling, etc.

First, create an instance of TutorialPageOptionsProvider:

final TutorialPageOptionsProvider tutorialPageOptionsProvider = new TutorialPageOptionsProvider() {
	@NonNull
	@Override
	public PageOptions provide(int position) {
		@LayoutRes int pageLayoutResId;
		TransformItem[] tutorialItems;
		switch (position) {
			case 0: {
				pageLayoutResId = R.layout.fragment_page_first;
				tutorialItems = new TransformItem[]{
						TransformItem.create(R.id.ivFirstImage, Direction.LEFT_TO_RIGHT, 0.2f),
						...,
						TransformItem.create(R.id.ivEighthImage, Direction.RIGHT_TO_LEFT, 0.07f)
				};
				break;
			}
			case 1: {
				pageLayoutResId = R.layout.fragment_page_second;
				tutorialItems = new TransformItem[]{
						TransformItem.create(R.id.ivFirstImage, Direction.RIGHT_TO_LEFT, 0.2f),
						...,
						TransformItem.create(R.id.ivEighthImage, Direction.LEFT_TO_RIGHT, 0.07f)
				};
				break;
			}
			case 2: {
				pageLayoutResId = R.layout.fragment_page_third;
				tutorialItems = new TransformItem[]{
						TransformItem.create(R.id.ivFirstImage, Direction.RIGHT_TO_LEFT, 0.2f),
						...,
						TransformItem.create(R.id.ivSeventhImage, Direction.LEFT_TO_RIGHT, 0.14f)
				};
				break;
			}
			default: {
				throw new IllegalArgumentException("Unknown position: " + position);
			}
		}

		return PageOptions.create(pageLayoutResId, position, tutorialItems);
	}
};

Then pass it to tutorial options builder:

final TutorialOptions tutorialOptions = TutorialFragment.newTutorialOptionsBuilder(context)
    ...
    .setTutorialPageProvider(tutorialPageOptionsProvider)
    ...
    .build();

That's it.

Via TutorialPageProvider

If you need to handle something inside tutorial's page fragment, you need to create your own implementation of PageFragment and override PageFragment#getLayoutResId() and PageFragment#getTransformItems() methods:

public class FirstPageFragment extends PageFragment {

    @Override
    protected int getLayoutResId() {
        return R.layout.fragment_page_first;
    }

    @Override
    protected TransformItem[] provideTransformItems() {
        return new TransformItem[] {
                // TransformItem.create(view for transform, moving direction, shift coefficient)
                TransformItem.create(R.id.ivFirstImage, Direction.LEFT_TO_RIGHT, 0.2f),
                ...
                TransformItem.create(R.id.ivEighthImage, Direction.RIGHT_TO_LEFT, 0.07f)
        };
    }
}

Then create an instance of TutorialPageProvider and override providePage(int) method:

final TutorialPageProvider<Fragment> tutorialPageProvider = new TutorialPageProvider<Fragment>() {
	@NonNull
	@Override
	public Fragment providePage(int position) {
		switch (position) {
			case 0:
				return new FirstPageFragment();
			...
			default:
				throw new IllegalArgumentException("Unknown position: " + position);
		}
	}
};

and pass it to tutorial options builder:

final TutorialOptions tutorialOptions = TutorialFragment.newTutorialOptionsBuilder(context)
    ...
    .setTutorialPageProvider(tutorialPageProvider)
    ...
    .build();

NOTE: if you're using android.app.Fragment class for your fragments, you should extend your tutorial pages fragments from PageFragment class. If you're using android.support.v4.app.Fragment class, then extend tutorial pages fragments from PageSupportFragment. Don't forget to pass a proper Fragment type during creation of TutorialPageProvider instance.