SDK overviewAndroidiOSDemoChangelog

Customization

SDK uses Material Theme for UI elements and allows customization of them to match your design guidelines.

You might change visuals via configs without the need of new SDK build for:

  • texts,
  • icons and images,
  • fonts and text sizes,
  • colors (both normal and dark theme),
  • shadows,
  • spacing,
  • activity indicators,
  • element radiuses,
  • enable/disable specific features and UI elements.

Most of these elements might be changed by adding a resource to your app with overlapping name what SDK uses. All examples listed below can be also inspected in our demo app. We will provide you with a starting configuration with a demo app based on your design manual. Then you might fine tune it without the need of new SDK build.

Text changes

Add values to your strings.xml or separate file like:

<string name="dateio_offers_list_cashback_history_this_month">Next payout</string>

Then default SDK text “Cashback this month” will be replaced with “Next payout”. SDK supports multiple languages. For now, we support CZ, HU, RO and EN. New language can be added upon request. If you want to change English texts, use values folder. To change other texts use values-<ISO639-1-Code> folders.

Full list of strings can be found here.

Spacing, shadows, element radiuses

Add a value to your dimens.xml or similar file like this: 

<dimen name="dateio_offers_history_margin_x">10dp</dimen> 
<dimen name="dateio_offers_offer_image_border_radius">8dp</dimen> 
<dimen name="dateio_offers_offer_elevation">3dp</dimen>

Then you will override our base values by this. Full list will be provided in next versions.

Icons and images

You might override our default icons and images with files in the drawable folder. For example, put your icon for date in file dateio_ic_date.xml. Then default icon for date will be overridden.

In list below you can find all available icons and images:

  • dateio_ic_activate 24.dp x 24.dp –⁠ Shown when offer is activated. Both in offers list and detail.
  • dateio_ic_badge_is_extended 16.dp x 16.dp –⁠ Shown in badge when offer is extended.
  • dateio_ic_badge_is_new 16.dp x 16.dp –⁠ Shown in badge when offer is new.
  • dateio_ic_badge_place 16.dp x 16.dp –⁠ Shown in badge when we have user location.
  • dateio_ic_cashback 48.dp x 48.dp –⁠ Shown in history card, history and in CCB history. Indicating cashback.
  • dateio_ic_close 24.dp x 24.dp –⁠ Close button "X" for simple how it works and navigation.
  • dateio_ic_close_circle 30.dp x 30.dp – Close button (X) for popups and detailed how it works.
  • dateio_ic_close_floating_error 32.dp x 32.dp – Icon for close floating error. Shown only when dateio_errors_show_close_button = true.
  • dateio_ic_coins 24.dp x 24.dp –⁠ Shown in history. Indicating full paid amount.
  • dateio_ic_date_card 24.dp x 24.dp – Shown as badge on offer card .⁠
  • dateio_ic_date_detail 24.dp x 24.dp – Shown as date badge or section in offer detail.⁠
  • dateio_ic_email 24.dp x 24.dp –⁠ Icon for button "send link" in offer detail.
  • dateio_ic_empty 48.dp x 48.dp –⁠ Shown when offer list have no offers.
  • dateio_ic_ending_soon 24.dp x 24.dp –⁠ Shown as badge when offer is ending soon. Both in offers list and detail.
  • dateio_ic_error 48.dp x 48.dp – Full screen error. E.g. detail unable to load, offers cant be loaded and etc.
  • dateio_ic_eshop 24.dp x 24.dp –⁠ Icon for "affiliate" offers and button "go to e-shop" in detail.
  • dateio_ic_header_saved 48.dp x 48.dp – Icon for "totally saved" component on main screen. Might be disabled.
  • dateio_ic_hourglass 24.dp x 24.dp –⁠ Shown in history when transaction is waiting for verification.
  • dateio_ic_info 16.dp x 16.dp – Shown in history, for info when cashback will be paid.
  • dateio_ic_navigation_1 24.dp x 24.dp –⁠ Icon for first navigation action.
  • dateio_ic_navigation_2 24.dp x 24.dp –⁠ Icon for second navigation action.
  • dateio_ic_navigation_back 24.dp x 24.dp –⁠ Icon for go back action in navigation.
  • dateio_ic_question 24.dp x 24.dp – Icon for help button in navigation.
  • dateio_ic_offer_about 24.dp x 24.dp – Shown in detail - about offer icon. Might be disabled.
  • dateio_ic_offer_locations 24.dp x 24.dp – Shown in detail - where offer might be redeemed icon. Might be disabled.
  • dateio_ic_offer_terms 24.dp x 24.dp – Shown in detail - offer terms icon. Might be disabled.
  • dateio_ic_offer_transaction_history 24.dp x 24.dp – Shown in detail - transactions history icon (only for CCB). Might be disabled.
  • dateio_ic_offer_voucher_history 24.dp x 24.dp – Shown in detail - voucher usage history icon. Might be disabled.
  • dateio_ic_online 24.dp x 24.dp –⁠ Shown as badge for online offers. Both in offers list and detail.
  • dateio_ic_percent 28.dp x 28.dp – Show when dateio_percent_as_image = true. Discount with percentage will use this icon instead of text.
  • dateio_ic_place 24.dp x 24.dp –⁠ Shown as badge for brick store offers. Both in offers list and detail.
  • dateio_ic_redemption 24.dp x 24.dp –⁠ Shown in CCB detail, when user makes redemption.
  • dateio_ic_returned_goods 24.dp x 24.dp –⁠ Shown in CCB detail, when user returned goods.
  • dateio_ic_search 18.dp x 18.dp – Icon for search in main page and for leading icon in search input.
  • dateio_ic_shop_brick 24.dp x 24.dp –⁠ Icon for brick shops in offer detail.
  • dateio_ic_shop_online 24.dp x 24.dp –⁠ Icon for online shops in offer detail
  • dateio_ic_tutorial_close 18.dp x 18.dp –⁠ Close tutorials icon.
  • dateio_ic_voucher 24.dp x 24.dp –⁠ Icon for vouchers. Shown in detail and in voucher action on offers list.
  • dateio_ic_warning 24.dp x 24.dp –⁠ Shown in contextual warnings and errors. E.g. activation failed.
  • dateio_img_category_placeholder 490.dp x 320.dp –⁠ Placeholder for category.
  • dateio_img_detail_logo_placeholder 48.dp x 48.dp –⁠ Placeholder for logo in detail.
  • dateio_img_detail_placeholder 700.dp x 280.dp –⁠ Placeholder for main image in detail.
  • dateio_img_detailed_bottom_sheet_step_1 130.dp x 100.dp – Image for first step in detailed help popup.
  • dateio_img_detailed_bottom_sheet_step_2 130.dp x 100.dp – Image for second step in detailed help popup.
  • dateio_img_detailed_bottom_sheet_step_3 130.dp x 100.dp – Image for third step in detailed help popup.
  • dateio_img_placeholder 116.dp x 116.dp –⁠ Placeholder for main image in offers list.
  • dateio_img_voucher_error 200.dp x 200.dp –⁠ Error image when there is an issue with the voucher.
  • dateio_img_welcome_banner 96.dp x 84.dp – Image for welcome banner. Used only when TutorialType.HOW_IT_WORKS_WIDGET is set.

Fonts and text sizes

SDK uses Material type system. Thus, you should define 13 text styles. Each text element in the SDK uses one of these styles. If you already use Material system, defined styles will be applied. If not and you use compose, you can style texts by eg:

val typography = Typography( 
    h6 = TextStyle( 
        fontFamily = inter, 
        fontSize = 18.sp, 
        fontWeight = FontWeight.SemiBold 
    ), 
    …
)

And then use it in MaterialTheme as typography = typography. If you use XML layout you can set it in Theme.xml, e.g.

<item name="textAppearanceHeadline2">@style/TextAppearance.App.Headline6</item>

Where you can define its style in type.xml, e.g.

<style name="TextAppearance.App.Headline6"parent="TextAppearance.MaterialComponents.Headline6"> 
    <item name="android:textSize">18.sp</item> 
    <item name="fontWeight">500</item> 
</style>

To prevent conflicts, when your app already use Material components, and for some reasons this values are not the same, we suggest to use for SDK part of app a new theme for this fragment / activity e.g. like this context?.theme?.applyStyle(R.style.Theme_DateioSDKdemo, true). Remember to reset the style when you go back to your app.

Setting of fonts size is obligatory. Otherwise SDK will be using default system fonts size, which will be most likely too big.

Turn on/off some UI elements

You might switch on/off some UI elements based on your preferences by overriding values in bool.xml or similar file e.g.: 

<bool name="dateio_offers_card_icons">false</bool>

Then you will override our default value. Full list will be provided in future versions.

Colors

SDK uses set of colors listed below.

You can find preview and how we use these colors in our Figma.

Surfaces - backgrounds
  • dateioSurfaceBackground – For page background.
  • dateioSurfacePrimary – For main elements e.g. offer cards, floating parts, popups.
  • dateioSurfaceSecondary – For big parts that need more emphasis - e.g. main section of offer in detail.
  • dateioSurfaceTertiary – For navigation background.
  • dateioSurfaceQuaternary – For semi-highlighted parts e.g. card with user savings.
  • dateioSurfaceQuinary – For tutorials background.
  • dateioSurfaceBrand – For product background - usually main bank color.
Fill - buttons, icons and lines
  • dateioFillPrimary – For main buttons and icons e.g. activate offer, go to e-shop, search or other primary buttons.
  • dateioFillSecondary – For accompanying icons - not used as we use icons overlaying.
  • dateioFillTertiary – For new and extended badges.
  • dateioFillQuaternary – For line dividers and linear progress background.
  • dateioFillDisabled – For disabled background buttons or other disabled elements, used in conjunction with "dateioTextDisabled".
Text - font colors
  • dateioTextPrimary – For main and important elements e.g. headers, offer name, section name and etc.
  • dateioTextSecondary – For supplementary text or long blocks of text.
  • dateioTextTertiary – For additional neutral messages e.g. empty offers or low importance texts e.g. date of transactions, shop address and etc.
  • dateioTextDisabled – For disabled text color or disabled buttons text. Use in conjunction with "dateioFillDisabled".
  • dateioTextPlaceholder – For leading / trailing icons in input and placeholder.
State and StateWeak - colors according to meaning of the message
  • dateioStatePositive – For positive texts e.g. discount, client received cashback.
  • dateioStateNegative – For negative values.
  • dateioStateError – For error texts.
  • dateioStateWarning – For alert texts and other warnings messages e.g. offer will be ending soon.
  • dateioStateInfo – For important but non-interactive messages or texts e.g. offer activated button text.
  • dateioStateDefault – For neutral messages or badges text e.g. offer ending date, online badge.
  • dateioStateActive – For clickable texts, links or others elements, but not for buttons. For buttons "dateioFillX" is used.
  • dateioStateWeakPositive – For background to "dateioStatePositive" - positive messages.
  • dateioStateWeakNegative – For background to "dateioStateNegative" - negative values.
  • dateioStateWeakError – For background to "dateioStateError" - errors messages.
  • dateioStateWeakWarning – For background to "dateioStateWarning" - offers ending soon and other warning messages.
  • dateioStateWeakInfo – For background to "dateioStateInfo" - offer activated button or text, other non-interactive backgrounds.
  • dateioStateWeakDefault – For background to "dateioStateDefault" - neutral messages and badges.
  • dateioStateWeakActive – For background to "dateioStateActive" - active accompanying color.
Monocolors - similar or same in normal and night theme
  • dateioMonoLight – For secondary buttons text e.g. go to history, for extended and new badges. Should be similar in light and dark theme.
  • dateioMonoDark – For primary buttons text e.g. activate offer. Should be similar in light and dark theme.
Rest - shadows, ripples
  • dateioScrimPrimary – For scrim tint behind popups and bottom sheets.
  • dateioShadowPrimary – For primary elements shadow e.g. offer cards, history card, search input, categories and etc.
  • dateioShadowSecondary – For floating buttons and errors shadow.
  • dateioSurfaceRipple – For surfaces ripple e.g. offer cards or shop.
  • dateioStateActiveRipple – For primary buttons ripple.

We will prepare configuration derived from Figma in form of dateio_colors.xml andvalues-night/dateio_colors.xml for dark theme. You will just need to add these values / files to your application and you can fine-tune it as needed without a new SDK build.

Please note that even if your app doesn't use a dark theme, you will need to set values-night/dateio_colors.xml. In this case with the same colors as normal theme. Otherwise, the SDK’s default night theme will be used!