An OnboardingSupportFragment provides a common and simple way to build onboarding screen for applications.
Building the screenThe view structure of onboarding screen is composed of the common parts and custom parts. The common parts are composed of icon, title, description and page navigator and the custom parts are composed of background, contents and foreground.
To build the screen views, the inherited class should override:
onCreateBackgroundView(LayoutInflater, ViewGroup)to provide the background view. Background view has the same size as the screen and the lowest z-order.
onCreateContentView(LayoutInflater, ViewGroup)to provide the contents view. The content view is located in the content area at the center of the screen.
onCreateForegroundView(LayoutInflater, ViewGroup)to provide the foreground view. Foreground view has the same size as the screen and the highest z-order
Each of these methods can return
null if the application doesn't want to provide it.
Page informationThe onboarding screen may have several pages which explain the functionality of the application. The inherited class should provide the page information by overriding the methods:
getPageCount()to provide the number of pages.
getPageTitle(int)to provide the title of the page.
getPageDescription(int)to provide the description of the page.
Note that the information is used in
onCreateView(LayoutInflater, ViewGroup, Bundle), so should be initialized before
AnimationOnboarding screen has three kinds of animations:
Logo Splash AnimationWhen onboarding screen appears, the logo splash animation is played by default. The animation fades in the logo image, pauses in a few seconds and fades it out.
In most cases, the logo animation needs to be customized because the logo images of applications are different from each other, or some applications may want to show their own animations.
The logo animation can be customized in two ways:
- The simplest way is to provide the logo image by calling
setLogoResourceId(int)to show the default logo animation. This method should be called in
Fragment.onCreateView(LayoutInflater, ViewGroup, Bundle).
- If the logo animation is complex, then override
onCreateLogoAnimation()and return the
Animatorobject to run.
If the inherited class provides neither the logo image nor the animation, the logo animation will be omitted.
Page enter animationAfter logo animation finishes, page enter animation starts, which causes the header section - title and description views to fade and slide in. Users can override the default fade + slide animation by overriding
onCreateDescriptionAnimator(). By default we don't animate the custom views but users can provide animation by overriding
Page change animationWhen the page changes, the default animations of the title and description are played. The inherited class can override
onPageChanged(int, int)to start the custom animations.
Finishing the screen
If the user finishes the onboarding screen after navigating all the pages,
onFinishFragment() is called. The inherited class can override this method to show another
fragment or activity, or just remove this fragment.
OnboardingSupportFragment must have access to an appropriate theme. Specifically, the fragment must
R.style.Theme_Leanback_Onboarding, or a theme whose parent is set to that theme.
Themes can be provided in one of three ways:
- The simplest way is to set the theme for the host Activity to the Onboarding theme or a theme that derives from it.
- If the Activity already has a theme and setting its parent theme is inconvenient, the
existing Activity theme can have an entry added for the attribute
R.styleable.LeanbackOnboardingTheme_onboardingTheme. If present, this theme will be used by OnboardingSupportFragment as an overlay to the Activity's theme.
- Finally, custom subclasses of OnboardingSupportFragment may provide a theme through the
onProvideTheme()method. This can be useful if a subclass is used across multiple Activities.
If the theme is provided in multiple ways, the onProvideTheme override has priority, followed by
the Activity's theme. (Themes whose parent theme is already set to the onboarding theme do not
need to set the onboardingTheme attribute; if set, it will be ignored.)
Returns the background color of the arrow if it's set through
Returns the color of the arrow if it's set through
Returns the text color of DescriptionView if it's set through
Returns the background color of the dot if it's set through
Returns the resource id of the main icon.
Returns the resource ID of the splash logo image.
Returns the start button text if it's set through
Returns the text color of TitleView if it's set through
Called to have the fragment instantiate its user interface view.
Returns the theme used for styling the fragment.
Called to ask the fragment to save its current dynamic state, so it can later be reconstructed in a new instance if its process is restarted.