Onboarding View

Onboarding views are presented when logging in to George, to e.g. allow notification permissions. When new major features become available or should be heavily promoted (e.g. Apple Pay), custom interstitial modals are presented to advertise the functionality.

In general, such interstitial screens should be used sparingly in order not to overwhelm the user with multiple onboarding screens right after login.

Rules For Android

The onboarding screens are not in Compose yet.
Implement a class that inherits from OnboardingInfo and pass an instance to the start method of the OnboardingScreenActivity with the parameter onboardingInfo.

Visual

Onboarding View has a mandatory visual as the top most element.

Illustration

The component is built to support a square illustration which is rendered at 200x200

Icon

If no illustration is available, the XL variant of any of our library icons can be used. The icon should be used in @3x size, which means it will render at 144x144

Text Area

The text area supports both paragraph- and list-style.

Although not recommended, the component can be configured to have a scroll-container to fit longer text.

Example - Onboarding View with Scroll Container

Actions

Onboarding View uses the default Button Group configuration which consists of a suggested action (using a Primary Button) and an alternative action (using a Tertiary Button)

Tokens

Element	Token
icon	`color.fill.mono`
headline	`color.text.mono`
text	`color.text.mono`
background	`color.surface.brand`