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
OnboardingInfoand pass an instance to the start method of theOnboardingScreenActivitywith the parameteronboardingInfo.
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.
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 |