Skip to content

Mobile SDK - Theming

The Cardlytics Mobile SDK makes it easy to customize the default theme of the SDK to match your custom branding. This document helps outline how the provided values map to the current experience and how to override them.

Fonts and Colors

The SDK uses four different font weights (light, regular, medium, and bold) and three main color variations (header, primary, and interactive). The following code samples demonstrate how to override those values.

To support this in your iOS app, create a concrete implementation of the PoweredByCDLXTheme protocol. The protocol requires that the main colors be defined, but provides default values for the fonts, gray colors, and interactive elements so that they can be optionally overridden. The following example provides the main colors and custom fonts, but chooses to use the default values for everything else:

1
2
3
4
5
6
7
8
9
struct CustomTheme: PoweredByCDLXTheme {
    var headerColor: UIColor { UIColor.red }
    var primaryColor: UIColor { UIColor.green }
    var interactiveColor: UIColor { UIColor.blue }
    var boldFontName: String? { "MarkOT-Bold" }
    var mediumFontName: String? { "MarkOT-Medium" }
    var regularFontName: String? { "MarkOT-Book" }
    var lightFontName: String? { "MarkOT-Light" }
}

To support this in your Android app, you can also override the color and font values that are in the PoweredByCDLXTheme, this class is the entry point for all the colors, sizes and styles in the SDK. The SDK provides a DefaultTheme with default implementations for all the theme's definitions. The following example illustrates how use the default theme but still be able to select the fonts and palette colors.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
class MyPalette: PoweredByCDLXPalette {
    override val header = PoweredByCDLXColor("{hex_color}")
    override val interactive = PoweredByCDLXColor("{hex_color}")
    override val primary = PoweredByCDLXColor("{hex_color}")
    override val lightGray = PoweredByCDLXColor("{hex_color}")
    override val mediumGray = PoweredByCDLXColor("{hex_color}")
    override val darkGray = PoweredByCDLXColor("{hex_color}")
    override val darkText = PoweredByCDLXColor("{hex_color}")
}

class MyFonts: PoweredByCDLXFonts {
    override val bold = R.font.my_font_bold
    override val light = R.font.my_font_light
    override val medium = R.font.my_font_medium
    override val regular = R.font.my_font_regular
}

PoweredByCDLX.instance?.setTheme(DefaultTheme().copy(...,palette = MyPalette(), fonts = MyFonts()))

The SDK also supports theming the navigation bar used throughout the SDK experience. If the SDK theming is not provided, then the navigation bar defaults to the primary theme color as the background with white UI elements.

1
2
3
4
5
6
7
8
struct CustomTheme: PoweredByCDLXTheme {
    ...
    var navigationBarStyle: CDLXNavigationBarStyle = CDLXNavigationBarStyle(
        backgroundColor: UIColor.white,
        separatorColor: UIColor(hex: "d6dbe0"),
        backButtonImage: UIImage(named: "myBackButton")!,
        titleTextStyle: CDLXTextStyle(weight: .medium, size: 16, color: UIColor.black))
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
class MyToolbarStyle: PoweredByCDLXToolbarStyle {
    override val backButton = PoweredByCDLXImage.AsResource(R.drawable.my_back_button)
    override val backgroundColor = PoweredByCDLXColor("{hex_color}")
    override val separatorColor = PoweredByCDLXColor("{hex_color}")
    override val titleColor = PoweredByCDLXColor("{hex_color}")
    override val iconColor = PoweredByCDLXColor("{hex_color}")
    override val titleFont = R.font.my_font_title
    override val titleSize =  18.sp
}

PoweredByCDLX.instance?.setTheme(DefaultTheme().copy(...,toolbarStyle = MyToolbarStyle()))

Program Name

When you first launch the SDK, depending on the modules you're using, you may notice the navigation bar title defaults to Offers. This title is configurable to match the nomenclature of your specific program. For example, If your program refers to offers as Rewards, you could set that as the program name and it would update the feed title to Rewards. To update the program name, please refer to the following examples.

1
cdlx.rewardsProgramName = "Rewards"

1
PoweredByCDLX.instance?.rewardsProgramName = "Rewards"

Section Titles

The section titles in the offers feed can be customized. These fields are configured server-side, so please work with your Partner Manager if you prefer a value other than the default.

Logo and Header Styles

Another optional theming feature is the ability to customize logo image treatments. Logos can either have a circular or rounded rectangle treatment. An example choosing circular logos is shown below:

1
2
3
4
struct CustomTheme: PoweredByCDLXTheme {
    ...
    let logoStyle: CDLXLogoStyle = .circular
}

Then assign the theme to the PoweredByCDLX instance after the SDK has been initialized:

1
2
    let cdlx = CDLX.initialize(applicationId: "poweredbydemo-application-id")
    cdlx.theme = CustomTheme()

``` kotlin val uiOptions = PoweredByUiOptions("Rewards", CDLXLogoStyle.CIRCLE, CDLXBrandDetailsHeaderStyle.RECTANGLE) PoweredByCDLX.instance?.showRewards(activity, uiOptions)