Skip to content

Theming and Styling

The SAP BTP SDK for Android supports the standard Android Styles and Themes approach, allowing you to either readily adopt the SAP Fiori with Horizon Design Language for Android "out of the box," or customize the look and feel of your app to support your own requirements.

Prerequisites

Installation

dependencies {
    implementation 'com.sap.cloud.android:fiori-theme:${versions.sapCloudAndroidSdk}'
}

Available Libraries

The following libraries are available.

Gradle Dependency Line Library
com.sap.cloud.android:fiori-theme:${versions.sapCloudAndroidSdk} SAP Fiori with Horizon Theme

Using the SAP Fiori with Horizon Theme

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

<style name="AppTheme" parent="Theme.Fiori.Horizon">
     <!-- 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:

 <style name="AppTheme.NoActionBar" parent="Theme.Fiori.Horizon.NoActionBar" />

 <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.Fiori.Horizon.AppBarOverlay" />

 <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.Fiori.Horizon.PopupOverlay" />

Using these styles will result in your app using the Primary, PrimaryDark and Accent colors defined by the SAP Fiori with Horizon Theme, as well as the Fiori Search View Style and Button Style. Your app will also use SAP's custom Fiori 72 font as the default font.

Customizing the SAP Fiori with Horizon Theme

The SAP Fiori with Horizon Theme exposes a number of styles that you can customize if you'd like to use the theme with some alterations. You should add these customizations as elements of your overridden AppTheme. 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:

<style name="AppTheme" parent="Theme.Fiori.Horizon">
    <item name="colorPrimary">@color/red</item>
</style>

You can also customize the buttonStyle and searchViewStyle attributes.


Last update: December 14, 2021