Skip to content

Customizing the Onboarding Screens

Customize the onboarding screens' style and layout by:

  • Changing the color scheme.
  • Modifying elements such as the logo, default text appearance, and button style.
  • Replacing the default screens with your own layout.

Every resource which is contained in a library can be overriden in the app project.

Changing UI Element Colors

Change the color of a view element such as a title or button by overriding the default onboarding colors. You can also create a unique color scheme such as a "dark theme" for your app.

There are three types of onboarding colors:

  • Basic Colors: These colors are based on the new Fiori design guidline specification and use a special naming convention at the onboarding library. Do not override these colors. The numbered scale in the following table indicates the color tint.

  • Basic (Reusable) Component Colors: These colors are used for recurrent view elements such as text color.

  • Specific (Unique) Component Colors: These colors are used for view elements which are used once such as the EULA button background.

The "basic" and "specific" component colors can be overridden and can be connected directly with their view elements.

Basic Colors

Warning

Do not change these color settings!

Color Name HEX
White onboarding_white #ffffff
Grey onboarding_grey_40 #f7f7f7
onboarding_grey_50
onboarding_grey_100
onboarding_grey_200
onboarding_grey_300
onboarding_grey_400
onboarding_grey_500
Blue onboarding_blue_40 #c6dae5
onboarding_blue_50
onboarding_blue_90
onboarding_blue_100
onboarding_blue_200
onboarding_blue_250
onboarding_blue_300
Red onboarding_red_200 #d9364c

Overridable Colors

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<color name="onboarding_default_background">@color/onboarding_white</color>
<color name="onboarding_default_statusbar">@color/onboarding_white</color>
<color name="onboarding_default_text">@color/onboarding_grey_500</color>
<color name="onboarding_default_error">@color/onboarding_red_200</color>

<color name="onboarding_button_raised_background">@color/onboarding_blue_200</color>
<color name="onboarding_button_raised_background_pressed">@color/onboarding_blue_100</color>
<color name="onboarding_button_raised_background_disabled">@color/onboarding_blue_50</color>
<color name="onboarding_button_raised_text">@color/onboarding_white</color>
<color name="onboarding_button_raised_text_pressed">@color/onboarding_white</color>
<color name="onboarding_button_raised_text_disabled">@color/onboarding_blue_40</color>

<color name="onboarding_button_flat_background">@color/onboarding_white</color>
<color name="onboarding_button_flat_background_pressed">@color/onboarding_grey_40</color>
<color name="onboarding_button_flat_background_disabled">@color/onboarding_white</color>
<color name="onboarding_button_flat_text">@color/onboarding_blue_300</color>
<color name="onboarding_button_flat_text_pressed">@color/onboarding_blue_300</color>
<color name="onboarding_button_flat_text_disabled">@color/onboarding_blue_90</color>

<color name="onboarding_edittext_line">@color/onboarding_blue_250</color>
<color name="onboarding_edittext_cursor">@color/onboarding_blue_250</color>
<color name="onboarding_edittext_cancel">@color/onboarding_grey_300</color>

<color name="onboarding_progress_bar">@color/onboarding_blue_200</color>

<!-- Welcome specific colors -->
<color name="onboarding_welcome_footnote">@color/onboarding_grey_400</color>
<color name="onboarding_welcome_footnote_link">@color/onboarding_grey_400</color>

<!-- Passcode specific colors -->
<color name="onboarding_policy_check_icon">@color/onboarding_white</color>
<color name="onboarding_policy_check_background_done">@color/onboarding_blue_300</color>
<color name="onboarding_policy_check_background_not_done">@color/onboarding_grey_200</color>

<!-- EULA specific colors -->
<color name="onboarding_eula_button_background">@color/onboarding_grey_100</color>
<color name="onboarding_eula_button_text">@color/onboarding_blue_300</color>

Modifying Styles

You can extend existing styles with your own attributes like any other Android application. For example, you can change or hide the logo, changing the default text appearance, or changing the button style.

Changing the Logo on Every Screen

Add these lines to style.xml and replace resource (android:src) with a valid path:

1
2
3
<style name="OnboardingLogo">-->
    <item name="android:src">@drawable/ic_android_logo</item>
</style>

Set the android:visibility attribute to invisible as follows:

1
2
3
<style name="OnboardingLogo">-->
    <item name="android:visibility">invisible</item>
</style>

Changing the Default Text Appearance

You can change the text color, font family, and so on for your app:

1
2
3
4
5
<style name="TextAppearance.AppCompat.Onboarding" parent="TextAppearance.AppCompat">
        <item name="android:fontFamily">@font/fiori72</item>
        <item name="android:textColor">@color/onboarding_default_text</item>
        <item name="android:gravity">center</item>
    </style>

Changing the Button Style

Use this default style then add and/or replace existing attributes with your changes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<style name="Widget.Onboarding.Button" parent="Widget.AppCompat.Button">
    <item name="android:gravity">center</item>
    <item name="android:textColor">@drawable/button_text_color</item>
    <item name="android:background">@drawable/button_background</item>
    <item name="android:paddingLeft">@dimen/padding_standard</item>
    <item name="android:paddingRight">@dimen/padding_standard</item>
    <item name="android:textSize">13sp</item>
    <item name="android:stateListAnimator">@animator/button_shadow</item>
    <item name="android:fontFamily">@font/fiori72</item>
</style>

Backward Compatibility

Use this table to determine what style you should use instead of the old one. The new naming convention mostly follows the Android Material Design Guidlines. These categories are based on the onboarding components.

Category Name Depricated name
Theme Onboarding.Default.Light.Theme OnboardingDefaultDarkTheme
Logo OnboardingLogo
Flat Button Widget.Onboarding.Button OnboardingDefaultTheme.ButtonPrimary
TextAppearance.Fiori.Onboarding.Button
TextAppearance.Fiori.Onboarding.Button_13
TextAppearance.Fiori.Onboarding.Button_14
Borderless Button Widget.Onboarding.Button.Borderless TextAppearance.Fiori.Onboarding.Button.Borderless
EditText Widget.Onboarding.EditText OnboardingDefaultTheme.EditText
Default text TextAppearance.AppCompat.Onboarding
Headline TextAppearance.Fiori.Onboarding.Headline TextAppearance.Fiori.Onboarding.Headline_LaunchScreen
Title TextAppearance.Fiori.Onboarding.Title OnboardingDefaultTheme.HeadlineText
TextAppearance.Fiori.Onboarding.Headline
Body TextAppearance.Fiori.Onboarding.Body OnboardingDefaultTheme.DetailText
OnboardingDefaultTheme.DetailTextLargeLineSpace
Footnote TextAppearance.Fiori.Onboarding.Footnote
Edittext error error_appearance
Passcode policy tick icon Onboarding.Default.Light.Theme.PasscodePolicyTick OnboardingDefaultDarkTheme.PasscodePolicyTick
Passcode policy label OnboardingDefaultTheme.PasscodePolicyLabel
Error message TextAppearance.Fiori.Onboarding.Error
EULA button TextAppearance.Fiori.Onboarding.Button.Borderless_14

Using Your Own Custom Layout

Using styles to customize your app's onboarding has some limitations. For example, you can't: Rearrange the existing views in the layout hierarchy. Add or remove elements. * Create a full redesigned screen for another display size.

To get around this problem, you can create your own layout implementation that overrides the libraries located in your project resources. The only requirement is that the new layouts must contain all the IDs which the default screens refer to; Otherwise, you app will throw a runtime exception.

The following are the required IDs:

Launch Screen

ID Type
launchscreen_headline TextView
launchscreen_viewflipper ViewFlipper
launchscreen_button_primary Button
launchscreen_button_demo Button
launchscreen_footnote TextView
progress_bar ProgressBar

Activation Screen

ID Type
activationscreen_title TextView
activationscreen_instruction TextView
activation_email_address EditText
activationscreen_button_discovery Button
activationscreen_button_choose_discovery Button
activationscreen_button_qrcode_scan Button
activationscreen_button_choose_qrcode_scan Button
activationscreen_image ImageView
progess_bar ProgessBar

Passcode Screens (Common)

ID Type
passcode_field EditText
header_title TextView
header_instruction_text TextView
done_button Button
inputLayout TextInputLayout
progess_bar ProgessBar

Set Passcode Screen

ID Type
lowercase_layout LinearLayout
uppercase_layout LinearLayout
digit_layout LinearLayout
symbol_layout LinearLayout
lowercase_label TextView
uppercase_label TextView
digit_label TextView
symbol_label TextView
lowercase_image ImageView
uppercase_image ImageView
digit_image ImageView
symbol_image ImageView
skip_button Button
group_stack LinearLayout

Confirm Passcode Screen

ID Type
cancel_button Button

Enter Passcode Screen

ID Type
reset_button Button
second_done_button Button
skip_button Button

Change Passcode Screen

The Change Passcode screen contains elements of the Enter, Set, and Confirm Passcode screens; Use them all.

EULA Screen

ID Type
eula_confirm Button
eula_reject Button
eula_title TextView
eula_webview WebView
progress_bar ProgressBar

Enable Fingerprint Screen

ID Type
enable_fingerprint_button Button
skip_for_now_button Button
enable_fingerprint_headline_label TextView
enable_fingerprint_detail_label TextView

Fingerprint Screen

ID Type
confirm_fingerprint_headline_label TextView
confirm_fingerprint_detail_label TextView
confirm_fingerprint_try_password_button Button
fingerprint_error_label TextView
error_sign_image ImageView
progress_bar ProgressBar

Fingerprint Error Screen

ID Type
fingerprint_error_reset_button Button
fingerprint_error_headline_label TextView
fingerprint_error_detail_label TextView

QRCode Screen

ID Type
qr_confirm_headline_label TextView
qr_confirm_detail_label TextView
qr_confirm_path TextView
qr_confirm_continue Button
progress_bar ProgressBar