Configure Tutorial Pages
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.