Customize the Styles and Themes

1. Open the project you previously created using the SAP BTP SDK Wizard for Android.

2. Press Shift twice and type styles.xml to open the styles.xml file. The default themes and styles for the wizard-generated app are defined in this file.

3. Press Shift twice and type colors.xml to open the colors.xml file. The default colors for the wizard-generated app are defined in this file.

1. Define your logo. To change the logo image at the top of each onboarding screen , define the following style in the styles.xml file.
   XML

   Copy

   <style name="OnboardingLogo">
       <!-- The value is always @drawable/<your_logo_name_without_ext> -->
       <!-- Do not add the file extension e.g. .png -->
       <item name="android:src">@drawable/custom_logo</item>
       <item name="android:layout_height">72dp</item>
       <item name="android:layout_width">72dp</item>
   </style>
   

2. Define styles for flat and raised button. Both raised and flat button styles can be customized by specifying onboarding_button_flat_ref and onboarding_button_raised_ref. And the client code can also define the button background color and text color for different states.
   XML

   Copy

   <!-- onboarding flat button -->
   <item name="onboarding_button_flat_ref">@style/Widget.Onboarding.Button.Borderless</item>
   <item name="onboarding_button_flat_text">@color/sap_ui_flat_button_text_color</item>
   <item name="onboarding_button_flat_text_disabled">
       @color/onboarding_button_flat_text_disabled
   </item>
   <item name="onboarding_button_flat_background">
       @color/onboarding_button_flat_background
   </item>
   
   <!-- onboarding raised button -->
   <item name="onboarding_button_raised_ref">@style/Widget.Onboarding.Button.Borderless</item>
   <item name="onboarding_button_raised_background_pressed">@color/onboarding_button_raised_background_pressed</item>
   <item name="onboarding_button_raised_background_disabled">@color/onboarding_button_raised_background_disabled</item>
   <item name="onboarding_button_raised_background">@color/onboarding_button_raised_background</item>
   

3. Define styles for text input fields. The onboarding screens use the Fiori UI component SimplePropertyFormCell for the text input fields. Client code can customize the style and text color for the component.

   XML

   Copy

   <!-- SimplePropertyFormCell -->
   <item name="onboarding_simple_property_focused_ref">
       @style/Onboarding.SimplePropertyFormCell.Focused
   </item>
   <item name="onboarding_simple_property_focused_text_color">@color/onboarding_formcell_text</item>
   <item name="onboarding_simple_property_unfocused_ref">
       @style/Onboarding.SimplePropertyFormCell.Unfocused
   </item>
   <item name="onboarding_simple_property_unfocused_text_color">@color/onboarding_base_text</item>
   

   Besides the above theme attributes, client code can customize the active border for SimplePropertyFormCell in the colors.xml file.

   XML

   Copy

   <!-- SimplePropertyFormCell active value border -->
   <color name="sap_ui_field_active_border_color">@color/onboarding_active_border</color>
   

4. Define the theme. Put all the customized styles in a theme extended from the parent theme FioriTheme.Onboarding, so the client code can only provide the customized styles and simply use the default style in FioriTheme.Onboarding for the others.

   XML

   Copy

   <!-- styles.xml -->
   <style name="AppTheme" parent="FioriTheme.Onboarding">
   
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
   
       <!-- Sign In screen avatar background -->
       <item name="onboarding_avatar_background">@color/colorPrimary</item>
       <!-- If commented out, the default value in the 'onboarding' theme will be used.
       <item name="onboarding_avatar_text_color">@color/onboarding_avatar_text_color</item>
       -->
   
       <!-- onboarding raised button -->
       <item name="onboarding_button_raised_background_pressed">@color/colorPrimary</item>
       <item name="onboarding_button_raised_background_disabled">@color/colorPrimaryDark</item>
       <item name="onboarding_button_raised_background">@color/colorPrimary</item>
   
       <!-- onboarding flat button -->
       <item name="onboarding_button_flat_text">@color/colorAccent</item>
       <item name="onboarding_button_flat_text_disabled">@color/colorPrimaryDark</item>
       <item name="onboarding_button_flat_background">@color/onboarding_default_background</item>
   
       <!-- SimplePropertyFormCell -->
       <item name="onboarding_simple_property_focused_text_color">@color/colorAccent</item>
       <item name="onboarding_simple_property_unfocused_text_color">@color/colorPrimaryDark</item>
   </style>
   
   <style name="OnboardingLogo">
       <!-- The value is always @drawable/<your_logo_name_without_ext> -->
       <!-- Do not add the file extension e.g. .png -->
       <item name="android:src">@drawable/custom_logo</item>
       <item name="android:layout_height">72dp</item>
       <item name="android:layout_width">72dp</item>
   </style>
   

   Define the colors in colors.xml file.

   XML

   Copy

   <!-- colors.xml -->
   <!-- Primary colors -->
   <color name="colorPrimary">@color/colorPrimaryRed</color>
   <color name="colorPrimaryDark">@color/colorPrimaryDarkRed</color>
   <color name="colorAccent">@color/colorAccentRed</color>
   
   <!-- Red Theme -->
   <color name="colorPrimaryRed">#d12920</color>
   <color name="colorPrimaryDarkRed">#631216</color>
   <color name="colorAccentRed">#ab1d22</color>
   
   <!-- SimplePropertyFormCell active value border -->
   <color name="sap_ui_field_active_border_color">@color/colorPrimaryDark</color>
   

Client code may use its own screens in onboarding process or implement customized flows instead of predefined flows, and want to apply themes to the activities or the fragments.

Please see Flows Theme and Style for more information on UI customization.

For Android API Level 30 or above, we recommend that you use the theme download feature, which will apply the theme to the client application. Please see How to Use an Application Theme From a Client Application for the theme download feature.

Congratulations! You now have learned how to customize the styles and themes of the UI screens of Flows component!