Style the Android SDK user interface

You can customise the colours and typography of your integration. The process depends on the integration type you chose to set up payments and mandates.

Style your Jetpack Compose integration

When integrating via Jetpack Compose, to change colours or typography, you have to provide your own version of LightColorDefaults, DarkColorDefaults and TypographyDefaults. You can use .copy() to override just a single colour.

For example, define your theme as below, and include it within your Jetpack Compose code to process payments or mandates.

TrueLayerTheme(
    lightPalette = LightColorDefaults.copy(primary = Color.Red),
    darkPalette = DarkColorDefaults.copy(primary = Color.DarkGray),
    typography = TypographyDefaults
)

To find a full list of colours you can override, see the details of androidx.compose.material.Colors in the Android reference documentation.

Material You

The SDK supports Material You and dynamic colours. This can be enabled when creating a theme as below:

TrueLayerTheme(
    lightPalette = LightColorDefaults.copy(primary = Color.Red),
    darkPalette = DarkColorDefaults.copy(primary = Color.DarkGray),
    dynamicColorsEnabled = true
)

Material 3 migration

The SDK now also uses Material 3 components and themes. If you're using Material 2, to customise the theme of the SDK you'll need to make the following changes.

1. Add the Compose Material 3 library

// Add to your projects `build.gradle`.
implementation "androidx.compose.material3:material3:1.0.0-alpha15"

2. Update the names of colours and typography styles to override by following the migration guide here
3. To override shapes, you need to replace androidx.compose.material.Shapes with androidx.compose.material3.Shapes.

When the theme is not explicit

You may choose to integrate the SDK using Theme without parameters, like this:

setContent {
    Theme {
        Processor(
            ...
        )
    }
}

In this case SDK reads all styles from the Context of the enclosing Activity. Ensure that the enclosing activity style is based on the NoActionBar variant.

Style your Android Activity or AndroidX Activity integration

When integrating via Android Activity or AndroidX Activity, you can define styles of the SDK views using XML files. You need to override style TrueLayerPaymentsTheme as this is used by the SDK to style internal Activities. To do this, define the style in your theme.xml file.

<style name="TrueLayerPaymentsTheme" parent="TrueLayerPaymentsParentTheme">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@android:color/holo_red_light</item>
    <item name="colorPrimaryVariant">@android:color/holo_red_dark</item>
    <!-- Text colors -->
    <item name="android:textColorPrimary">@color/textColorPrimary</item>
    <item name="android:textColorSecondary">@color/textColorSecondary</item>
    <!-- Status bar -->
    <item name="android:statusBarColor">?attr/colorPrimary</item>
    <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
</style>

Although you can set your application theme as a parent, we recommend you use the TrueLayerPaymentsParentTheme as your parent to remain up to date with any SDK updates. If you're using your application theme, ensure that the parent of the TrueLayerPaymentsTheme is the NoActionBar variant.

Remember to assign this style to your activity in the AndroidManifest.xml file.

<activity android:name=".screens.examples.ActivityXIntegration"
            android:theme="@style/TrueLayerPaymentsTheme"/>