Mobile SDK - Theming

The Powered by 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 better understand how those values map to various pieces of the UX, click here to see a visual representation.

iOS

To support this in your iOS app, create a concrete implementation of the PoweredByDoshTheme 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:

struct CustomTheme: PoweredByDoshTheme {
    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" }
}

Android

Breaking Change

As of 3.0.0 version, xml based theme/configuration is no longer supported and theming now requires an invocation to PoweredByDosh.instance?.setTheme(). Users upgrading from any 2.x using theming should follow these instructions to keep the same look & feel

To support this in your Android app, there is a theme interface called PoweredByDoshTheme. As part of this interface you can create a concrete implementation of PoweredByDoshPalette and PoweredByDoshFonts interfaces. 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.

class MyPalette: PoweredByDoshPalette {
    override val header = PoweredByDoshColor("{hex_color}")
    override val interactive = PoweredByDoshColor("{hex_color}")
    override val primary = PoweredByDoshColor("{hex_color}")
    override val lightGray = PoweredByDoshColor("{hex_color}")
    override val mediumGray = PoweredByDoshColor("{hex_color}")
    override val darkGray = PoweredByDoshColor("{hex_color}")
    override val darkText = PoweredByDoshColor("{hex_color}")
}

class MyFonts: PoweredByDoshFonts {
    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
}

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

You'll have to create a font family for each font you want to override

Migrating from versions prior to 3.0.0

Use the following mappings to setup the PoweredByDoshPalette instance with values you currently have on your xml files

PoweredByDoshPalette property	Xml Color
header	dosh_core_header
primary	dosh_core_primary
interactive	dosh_core_interactive
lightGray	dosh_core_light_gray
mediumGray	dosh_core_medium_gray
darkGray	dosh_core_dark_gray
darkText	dosh_core_black

PoweredByDoshFonts property	Xml Font
bold	dosh_font_bold
light	dosh_font_light
medium	dosh_font_medium
regular	dosh_font_regular

Navigation Bar

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.

iOS

struct CustomTheme: PoweredByDoshTheme {
    ...
    var navigationBarStyle: DoshNavigationBarStyle = DoshNavigationBarStyle(
        backgroundColor: UIColor.white,
        separatorColor: UIColor(hex: "d6dbe0"),
        backButtonImage: UIImage(named: "myBackButton")!,
        titleTextStyle: DoshTextStyle(weight: .medium, size: 16, color: UIColor.black))
}

Android

class MyToolbarStyle: PoweredByDoshToolbarStyle {
    override val backButton = PoweredByDoshImage.AsResource(R.drawable.my_back_button)
    override val backgroundColor = PoweredByDoshColor("{hex_color}")
    override val separatorColor = PoweredByDoshColor("{hex_color}")
    override val titleColor = PoweredByDoshColor("{hex_color}")
    override val iconColor = PoweredByDoshColor("{hex_color}")
    override val titleFont = R.font.my_font_title
    override val titleSize =  18.sp
}

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

Migrating from versions prior to 3.0.0

Use the following mappings to setup the PoweredByDoshPalette instance with values you currently have on your xml files

PoweredByDoshToolbarStyle property	Xml Color
title	dosh_core_navigation_bar_title
backgroundColor	dosh_core_navigation_bar_background
separatorColor	dosh_core_navigation_bar_separator

PoweredByDoshToolbarStyle property	Xml Font
titleFont	dosh_font_navigation_bar

Program Name

When you first launch the Cardlytics SDK you'll notice the navigation bar title defaults to Offers. Additionally, if you're leveraging the optional account summary module, you'll notice the title there defaults to Offers Summary. These titles are 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 and the account summary title to Rewards Summary. To update the program name, please refer to the following examples.

iOS

dosh.rewardsProgramName = "Rewards"

Android

PoweredByDosh.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 as well as the header shape on the view showing details about a selected merchant. Logos can either have a circular or rounded rectangle treatment. The header shape be either be diagonal across the screen or rectangular. To better understand how those values visually effect the UX, click here to see a visual representation.. An example choosing circular logos and a rectangular header is shown below:

iOS

struct CustomTheme: PoweredByDoshTheme {
    ...
    let logoStyle: DoshLogoStyle = .circular
    let brandDetailsHeaderStyle: DoshBrandDetailsHeaderStyle = .rectangular
}

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

    let dosh = Dosh.initialize(applicationId: "poweredbydemo-application-id")
    dosh.theme = CustomTheme()

Android

  val uiOptions = PoweredByUiOptions("Rewards", DoshLogoStyle.CIRCLE, DoshBrandDetailsHeaderStyle.RECTANGLE)
  PoweredByDosh.instance?.showDoshRewards(this, uiOptions)