SAP BTP SDK for Android Onboarding Screen Styles and Themes

Introduction

The Flows component of SAP BTP SDK for Android makes it easier for the client mobile app to handle all onboarding related processes, so the client mobile app developer can focus on the main business logic after flows finish.

But an enterprise mobile app usually has its own branding theme which defines the colors, text styles, shapes, etc. If the styles of the onboarding screens used inside the Flows component are difficult to be customized, it will make the onboarding screens look quite different as the other parts of the mobile app, eventually lead to a bad user experience.

In SAP BTP SDK for Android 3.4, we made some improvements to address the above issue. Let’s see some screenshots before we dive into the details.

Customizable Widgets

The above screenshots show most of the UI widgets used in the onboarding screens, they’re:

• Logo image
• Raised buttons
• Flat buttons
• Input fields
• Other UI elements, for example, avatar.

To make the style of each UI element easy to be customized, we extracted the style attributes out of the layout XML files and put them into the FioriTheme.Onboarding theme, thus the client code can just provide its own value in their own theme to override the default values.

Here are the extracted theme attributes:

    <!-- onboarding button -->
    <attr name="onboarding_button_raised_ref" format="reference" />
    <attr name="onboarding_button_raised_background_pressed" format="color" />
    <attr name="onboarding_button_raised_background_disabled" format="color" />
    <attr name="onboarding_button_raised_background" format="color" />
    <attr name="onboarding_button_raised_text" format="color" />
    <attr name="onboarding_button_raised_text_disabled" format="color" />

    <!-- onboarding borderless button -->
    <attr name="onboarding_button_flat_ref" format="reference" />
    <attr name="onboarding_button_flat_background_pressed" format="color" />
    <attr name="onboarding_button_flat_background_disabled" format="color" />
    <attr name="onboarding_button_flat_background" format="color" />
    <attr name="onboarding_button_flat_text" format="color" />
    <attr name="onboarding_button_flat_text_disabled" format="color" />

    <!-- onboarding simple property form cell -->
    <attr name="onboarding_simple_property_focused_ref" format="reference" />
    <attr name="onboarding_simple_property_focused_text_color" format="color" />
    <attr name="onboarding_simple_property_unfocused_ref" format="reference" />
    <attr name="onboarding_simple_property_unfocused_text_color" format="color" />

    <!-- Text Styles -->
    <!-- Head line text on launch screen -->
    <attr name="onboarding_text_headline_style_ref" format="reference"/>
    <!-- Title and description text on each screen -->
    <attr name="onboarding_text_title_style_ref" format="reference"/>
    <attr name="onboarding_text_body_style_ref" format="reference"/>
    <!-- User name text style for sign in and offline transaction error screen -->
    <attr name="onboarding_text_username_style_ref" format="reference"/>
    <!-- Consent text style reference -->
    <attr name="onboarding_text_consent_body_ref" format="reference"/>
    <attr name="onboarding_text_consent_learnmore_ref" format="reference"/>
    <attr name="onboarding_text_desc_style_ref" format="reference"/>

    <!-- Sign in and offline transaction error screen avatar style -->
    <attr name="onboarding_avatar_background" format="color" />
    <attr name="onboarding_avatar_text_color" format="color" />
    <attr name="onboarding_qr_confirm_checkmark_color" format="color" />

    <!-- Consent screen toolbar button -->
    <attr name="onboarding_consent_screen_toolbar_button_text_color" format="color" />
    <attr name="onboarding_consent_screen_toolbar_close_button_color" format="color" />

    <!-- Passcode Creation Screen validation checker -->
    <attr name="onboarding_passcode_rule_checker_not_pass_color" format="color" />
    <attr name="onboarding_passcode_rule_checker_pass_color" format="color" />

    <!-- Toolbar divider color, for the bottom toolbar on passcode and eula screen -->
    <attr name="onboarding_toolbar_divider_color" format="color" />

For the raised/flat buttons and the input fields used in the onboarding screens, since they’re Fiori widgets, please reference the Fiori document to know the details on how to fully customize them.

The theme attributes ended with ‘_ref’ in the above code mean that the client code can provide the fully custom style for the corresponding widgets, like raised/flat buttons, input fields, etc. For example, the client code can provide the fully style of onboarding_button_raised_ref to customize the raised buttons, or only provide onboarding_button_raised_text to define the enabled raised button text color.

Client Code Integration

To integrate this feature in your code, the following steps are needed:

1. In your ‘styles.xml’, a theme should be defined and extended from Onboarding. The client code can just define the theme attributes used in the client mobile app and use the default ones in the parent theme.
2. When using Flows component for onboarding/restore, the above theme must be passed into FlowContext.
3. In onboarding screens are used in your own Activity, please make sure the above theme is applied on the activity in your xml file.
4. In onboarding screens are used in your Fragment, please make sure your theme is wrapped in a ContextThemeWrapper, then inflate your fragment with the wrapper.

The online document has very detailed explanations on this topic with sample code, please check out.

Summary

With the above approach, we hope it could be easier to make the onboarding screens blend into your mobile app seamlessly. We’d also love to hear your feedback.