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¶
- The latest version of Android Studio
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.