Skip to content

Theming and Styling

By supporting the standard Android "Styles and Themes" approach (see https://developer.android.com/guide/topics/ui/look-and-feel/themes), the SAP Cloud Platform SDK allows developers to either readily adopt the SAP Fiori Design Language for Android "out of the box" or customize the look and feel of their application to support their own requirements.

Prerequisites

Installation

1
2
3
dependencies { 
    implementation 'com.sap.cloud.android:fiori:2.0.0'}
}

Available libraries

The following libraries are available.

Gradle Dependency Line Library
com.sap.cloud.android:fiori:2.0.0 fiori

Using the default Fiori Theme

Assuming that you are following the standard Android approach of referring to your application's theme using "@style/AppTheme" from AndroidManifest.xml, applying the default Fiori Theme to your application involves updating the styles.xml file (located in the res\values folder) to refer to "FioriTheme" as the parent to your AppTheme:

1
2
3
<style name="AppTheme" parent="FioriTheme">
     <!-- Customize your theme here - see below -->
</style>
You may also wish to use the Fiori definitions for the "NoActionBar", "AppBarOverlay" and "PopupOverlay" styles, by doing the following:

1
2
3
4
5
 <style name="AppTheme.NoActionBar" parent="FioriTheme.NoActionBar" />

 <style name="AppTheme.AppBarOverlay" parent="FioriTheme.AppBarOverlay" />

 <style name="AppTheme.PopupOverlay" parent="FioriTheme.PopupOverlay" />
Using these styles will result in your application using the Primary, PrimaryDark and Accent colors defined by Fiori, as well as the Fiori Search View Style, Button Style, Drop Down Item Style, Text View Style and Object Cell Style. Your application will also use SAP's custom Fiori "72" font (https://experience.sap.com/72/) as its default font.

Customizing the Fiori Theme

The Fiori Theme exposes a number of styles that you can customize if you'd like to use the Fiori Theme, but with some alterations. These customizations should be added as elements of your overridden App Theme. For example, to change the primary color from the standard Fiori primary color to red (assuming that "red" is defined in your colors.xml file), you would make the following change:

1
2
3
<style name="AppTheme" parent="FioriTheme">
    <item name="colorPrimary">@color/red</item>
</style>
Other Fiori-specific attributes than can be customized include colorPrimaryDark, colorAccent, objectCellStyle, buttonStyle and searchViewStyle.