Skip to content
Alexander Vlasov edited this page Sep 1, 2016 · 1 revision

Setup pages colors

Just provide array of color values to TutorialOptions.Builder#setPagesColors(int array). The array with colors must have length equal to pages count.

public class CustomTutorialFragment extends TutorialFragment {

    private static final int TOTAL_PAGES = 3;

    private int[] pagesColors = new int[] { Color.RED, Color.BLUE, Color.DKGRAY };

    @Override
    protected TutorialOptions provideTutorialOptions() {
        return newTutorialOptionsBuilder(getContext())
                .setPagesCount(TOTAL_PAGES)
                .setPagesColors(pagesColors)
                // setup other configuration ...
                .build();
    }
}

Infinite scroll

To loop tutorial pages you have set TutorialOptions.Builder#setUseInfiniteScroll(boolean) to true.

Auto remove TutorialFragment - scroll from last tutorial page to your content

If you want to provide smooth transition from last tutorial page to content - just setup TutorialOptions.Builder#setUseAutoRemoveTutorialFragment(boolean) to true.

Indicator view customization

There is IndicatorOptions class for configuration indicator view. Here's example:

public class CustomTutorialFragment extends TutorialFragment {
    @Override
    protected TutorialOptions provideTutorialOptions() {
        return newTutorialOptionsBuilder(getContext())
                .setIndicatorOptions(IndicatorOptions.newBuilder(getContext())
                        .setElementSizeRes(R.dimen.indicator_size)
                        .setElementSpacingRes(R.dimen.indicator_spacing)
                        .setElementColorRes(android.R.color.darker_gray)
                        .setSelectedElementColor(android.R.color.white)
                        .setRenderer(Drawable.create(getContext()))
                        .build())
                // setup other configuration ...
                .build();
    }
}

As you can see, you can specify element size, element spacing (aka padding), element color, selected element color, and implementation of Renderer interface. There are 2 default implementation inside Renderer.Factory:

Also in sample module there are two implementaions:

Clone this wiki locally