Theming in Jetpack Compose¶
A common way to apply design to UI controls is to specify colors and typography in a theme file and apply those defined colors and typographies according to the design specifications. The Fiori Jetpack Compose UI library follows this principle.
To implement the Fiori Compose UI, the Fiori Theme for Jetpack Compose needs to have been applied during runtime. So developers MUST apply the Fiori Theme for Jetpack Compose before using the Fiori Jetpack Compose UI library.
Using the Fiori Theme for Jetpack Compose in Your Code¶
Unlike declaring theme usages in AndroidManifest.xml in a view-based UI framework, app developers need to explicitly declare their theme usages in their app code. Composable code using the Fiori Jetpack Compose UI library must be wrapped in a compatible theme. You can choose from the following approaches, depending on the desired behavior:
@Composable {
...
// In your own compose function
TonalHorizonMaterialTheme {
FioriTonalHorizonTheme {
// Your compose code that uses the Fiori JC UI library
...
}
}
...
}
@Composable {
...
// In your own compose function
FioriHorizonTheme {
// Your compose code that uses the Fiori JC UI library
...
}
...
}
Use the first approach if you want your application to adopt the new Tonal Horizon theme. This theme is visually compatible with standard Material 3 components that use the TonalHorizonMaterialTheme. It aligns with the latest Material 3 best practices. This approach also provides support for high- and medium-contrast themes. For more information on handling contrast changes see UIModeManager.ContrastChangeListener.
The second approach continues to be supported for now, catering to applications not yet ready to migrate to the latest Material 3 standard. However, it will be deprecated at some point.
Theme Customization¶
Developers can easily use either theme by setting only the content argument. This argument specifies the composable content to display under the Fiori Theme. No other arguments are necessary.
@Composable
fun FioriTonalHorizonTheme(
darkTheme:Boolean = isSystemInDarkTheme(), // Indicates whether the codes are running under dark theme mode.
content: @Composable () ->Unit // Your composable codes that need to apply the Fiori theme for Jetpack Compose.
)
It is also feasible for developers to override the colors, typography, and shapes defined in the Android Material Theme namespace:
@Composable
fun FioriTonalHorizonTheme(
colors:ColorScheme?, // Colors defined in the Android Material namespace.
typography: Typography?, // Typography defined in the Android Material namespaces.
shapes: Shapes?, // Shapes defined in the Android Material namespace.
content:@Composable () ->Unit
)
Because Fiori UI design does not always use Android Material Theme namespace attributes, there are many colors and typographies defined in the SAP namespace. Developers can customize these attributes as necessary:
@Composable {
...
var overriddenColors = BaseColors(
SapFioriColorT2 = Color.Red // override T2 with Red
// There are many other attributes available for customization.
)
var overriddenAttributes = BaseAttributes(baseColors = overriddenColors)
CompositionLocalProvider(
LocalCustomizedFioriHorizonAttributes provides CustomizeAttributeHolder(overrideAttributes),
){ // Overridden attributes applied to FioriHorizonTheme here.
FioriTonalHorizonTheme {
// Your composable code
}
}
...
}