Theming Fidel activity

[PoldaLuke]

Hi, i am trying to implement this SDK and would like to verify if its possible to change any theme attributes in the Fidel activity. I reviewed the examples, readme and documentation on https://fidel.uk/docs/ and i was not able to find any information on this.

I would like to be able to define colours for status bar and primary colour for other elements.

[iasif-experlabs]

Bumping up this thread. I would like to modify Fidel activity UI. That doesn't seems to be possible. Any leads?

[valllllll2000]

I am sorry but currently, we do not support customizing themes/styles on the SDK, if we do so in the future I will update this thread and the public documentation will also be updated.

[iasif-experlabs]

Alright

[qwertychouskie]

At Caruso, we are soon launching a revamped version of the Caruso Signature app written in React Native. We are using https://github.com/Enigmatic-Smile/rn-sdk for Android and iOS, and the normal web version for web.

Web looks great:

iOS lacks specific branding, but still fits in reasonably well, due to using the standard iOS look & feel:

Android, however, sticks out like a sore thumb:

The combination of the purple notification bar, the bright blue headerbar, and the faded mint-green checkbox look extremely out of place. Just being able to set theme colors to "Caruso Dark Blue" (#162973) would make a world of difference. As it stands now, we may have to look into using the Web version running inside a <WebView>, which would bring a lot of unnecessary complexity, but would at least bring the branding in line with what is acceptable for us.

Interestingly, there is indication that some colors are supposed to be configurable, but I couldn't find a way to configure them:

Please advise on how best to proceed so we can provide the best possible experience to our members.

[qwertychouskie]

I found a way to override these colors (and more). Create a values.xml resource file for your Android app. For React Native users, this path will be something like your-project/android/app/src/main/res/values/values.xml. The contents should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="fdl_colorPrimary">#162973</color>
    <color name="fdl_colorPrimaryDark">#162973</color>
    ... more overrides as desired ...
</resources>

Here is the full values.xml extracted from the current version of the Fidel Android SDK, as a reference:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="fdl_bodyText">#1B2733</color>
    <color name="fdl_captionedBodyText">#98A0AF</color>
    <color name="fdl_colorAccent">#3ec7ff</color>
    <color name="fdl_colorCardDetailsBackground">#F9FAFB</color>
    <color name="fdl_colorError">#E0270D</color>
    <color name="fdl_colorPrimary">#105EFB</color>
    <color name="fdl_colorPrimaryDark">#6300ff</color>
    <color name="fdl_colorSecondary">#E6F2FF</color>
    <color name="fdl_ctaButtonTitlePrimaryColor">#FFFFFF</color>
    <color name="fdl_ctaButtonTitleSecondaryColor">@color/fdl_colorPrimary</color>
    <color name="fdl_dimmedBodyText">#66000000</color>
    <color name="fdl_linkButtonColor">@color/fdl_colorPrimary</color>
    <color name="fdl_screenBackgroundColor">#FFFFFF</color>
    <color name="fdl_stroke">#E0E0E0</color>
    <color name="fdl_verificationTokenText">#000000</color>
    <dimen name="fdl_action_bar_close_button_padding">12dp</dimen>
    <dimen name="fdl_action_bar_title_left_margin">30dp</dimen>
    <dimen name="fdl_background_rectangle_radius">3dip</dimen>
    <dimen name="fdl_banner_height">100dp</dimen>
    <dimen name="fdl_between_ctas_spacing">8dp</dimen>
    <dimen name="fdl_card_form_btn_link_title_font_size">14sp</dimen>
    <dimen name="fdl_card_form_caption_font_size">11sp</dimen>
    <dimen name="fdl_card_form_card_font_size">20sp</dimen>
    <dimen name="fdl_card_form_height">330dp</dimen>
    <dimen name="fdl_card_form_row_caption_top_spacing">11dp</dimen>
    <dimen name="fdl_card_form_row_card_left_spacing">10dp</dimen>
    <dimen name="fdl_card_form_row_card_right_spacing">@dimen/fdl_card_form_row_card_left_spacing</dimen>
    <dimen name="fdl_card_form_row_height">70dp</dimen>
    <dimen name="fdl_card_form_row_invalid_item_left_spacing">@dimen/fdl_card_form_row_card_left_spacing</dimen>
    <dimen name="fdl_card_form_row_item_bottom_spacing">15dp</dimen>
    <dimen name="fdl_card_form_row_item_camera_height">24dp</dimen>
    <dimen name="fdl_card_form_row_item_camera_width">37dp</dimen>
    <dimen name="fdl_card_form_row_item_card_height">27dp</dimen>
    <dimen name="fdl_card_form_row_item_card_width">42dp</dimen>
    <dimen name="fdl_card_form_row_item_checkbox_height">@dimen/fdl_card_form_row_item_checkbox_width</dimen>
    <dimen name="fdl_card_form_row_item_checkbox_width">26dp</dimen>
    <dimen name="fdl_card_form_row_item_left_spacing">20dp</dimen>
    <dimen name="fdl_card_form_row_item_right_spacing">@dimen/fdl_card_form_row_item_left_spacing</dimen>
    <dimen name="fdl_card_form_row_item_tos_top_spacing">@dimen/fdl_card_form_row_item_left_spacing</dimen>
    <dimen name="fdl_card_form_row_tos_height">190dp</dimen>
    <dimen name="fdl_card_form_row_tos_left_spacing">@dimen/fdl_card_form_row_card_left_spacing</dimen>
    <dimen name="fdl_card_form_top">@dimen/fdl_banner_height</dimen>
    <dimen name="fdl_card_form_tos_font_vertical_spacing">5sp</dimen>
    <dimen name="fdl_card_verification_amount_input_maximum_text_size">64sp</dimen>
    <dimen name="fdl_card_verification_amount_input_vertical_margin">5dp</dimen>
    <dimen name="fdl_card_verification_bottom_text_bottom_margin">16dp</dimen>
    <dimen name="fdl_card_verification_main_content_spacing">12dp</dimen>
    <dimen name="fdl_card_verification_reconnect_card_bottom_margin">12dp</dimen>
    <dimen name="fdl_card_verification_reconnect_card_button_height">44dp</dimen>
    <dimen name="fdl_card_verification_right_text_spacing">12dp</dimen>
    <dimen name="fdl_cta_bottom_margin">16dp</dimen>
    <dimen name="fdl_cta_button_height">35dp</dimen>
    <dimen name="fdl_cta_success_icon_height">@dimen/fdl_cta_success_icon_width</dimen>
    <dimen name="fdl_cta_success_icon_width">18dp</dimen>
    <dimen name="fdl_intro_main_content_bottom_margin">16dp</dimen>
    <dimen name="fdl_intro_steps_bubble_dimen">20dp</dimen>
    <dimen name="fdl_intro_steps_bubble_text_size">12sp</dimen>
    <dimen name="fdl_intro_steps_padding_start">56dp</dimen>
    <dimen name="fdl_intro_steps_spacing">16dp</dimen>
    <dimen name="fdl_intro_steps_top_margin">24dp</dimen>
    <dimen name="fdl_intro_text_right_spacing">38dp</dimen>
    <dimen name="fdl_logo_bottom_spacing">40dp</dimen>
    <dimen name="fdl_progress_loader_height">@dimen/fdl_progress_loader_width</dimen>
    <dimen name="fdl_progress_loader_width">26dp</dimen>
    <dimen name="fdl_simple_cta_screen_content_spacing">16dp</dimen>
    <dimen name="fdl_text_content_top_margin">16dp</dimen>
    <dimen name="fdl_text_with_links_font_size">12sp</dimen>
    <string name="fdl_banner_description">Top Banner</string>
    <string name="fdl_card_already_linked">Card already linked</string>
    <string name="fdl_card_link_toolbar_close_description">Close</string>
    <string name="fdl_card_link_toolbar_title">Link card</string>
    <string name="fdl_card_number_hint">1234 0000 0000 0000</string>
    <string name="fdl_card_on_the_spot_verification_choice">I have access to card statement</string>
    <string name="fdl_card_scanning_icon_description">Scan card</string>
    <string name="fdl_card_scheme_logo_image_description">Card Scheme Logo</string>
    <string name="fdl_card_third_party_verification_choice">I don\'t have access to card statement</string>
    <string name="fdl_card_type_amex">Amex</string>
    <string name="fdl_card_type_generic_not_supported">Your card type is not yet supported</string>
    <string name="fdl_card_type_mastercard">Mastercard</string>
    <string name="fdl_card_type_not_supported_suffix">\u0020not yet supported</string>
    <string name="fdl_card_type_placeholder">Card</string>
    <string name="fdl_card_type_visa">Visa</string>
    <string name="fdl_card_verification_choice_informative_text">To finalize the card linking process we charged the &lt;b>%1$s&lt;/b> as \"CARD VERIFICATION FDEL\".&lt;br>&lt;br>Are you able to check the card account statement and validate the amount of the microcharge?</string>
    <string name="fdl_card_verification_choice_toolbar_title">Card Verification</string>
    <string name="fdl_card_verification_requested_bottom_info">You will receive a notification when your card has been verified.</string>
    <string name="fdl_card_verification_requested_cta">Done</string>
    <string name="fdl_card_verification_requested_toolbar_title">Verification Requested</string>
    <string name="fdl_card_verification_requested_top_info">We sent a verification request for your Card Administrator with the following data:</string>
    <string name="fdl_card_verification_toolbar_title">Verify card</string>
    <string name="fdl_checkbox_icon_description">Check to accept</string>
    <string name="fdl_country_label">Country of issue</string>
    <string name="fdl_country_value_canada">Canada</string>
    <string name="fdl_country_value_ireland">Ireland</string>
    <string name="fdl_country_value_japan">Japan</string>
    <string name="fdl_country_value_norway">Norway</string>
    <string name="fdl_country_value_sweden">Sweden</string>
    <string name="fdl_country_value_uk">United Kingdom</string>
    <string name="fdl_country_value_united_arab_emirates">United Arab Emirates</string>
    <string name="fdl_country_value_us">United States</string>
    <string name="fdl_cta_description">Call to action</string>
    <string name="fdl_cta_success_icon_description">Action Successful Confirmation Icon</string>
    <string name="fdl_default_card_icon_description">Card Icon</string>
    <string name="fdl_default_card_network">my card network</string>
    <string name="fdl_default_card_number_error_message">Invalid card number</string>
    <string name="fdl_default_card_number_label">Card number</string>
    <string name="fdl_default_consent_text">I authorise %s to monitor my payment card to identify transactions that qualify for a reward and for %s to share such information with %s, to enable my card linked offers and target offers that may be of interest to me. %sYou may opt-out of transaction monitoring on the payment card you entered at any time by %s.</string>
    <string name="fdl_default_country_value">United Kingdom</string>
    <string name="fdl_default_delete_instructions">going to your account settings</string>
    <string name="fdl_default_expiry_date_error_message">Invalid</string>
    <string name="fdl_default_privacy_text">For information about %s privacy practices, please see the &lt;a href=\'%s\'>Privacy Policy&lt;/a>.\u0020</string>
    <string name="fdl_default_program_name">our</string>
    <string name="fdl_error_card_consent_card_limit_exceeded">This card has exceeded its limit for transactions during the period and thus cannot be enrolled. For more information, please contact the bank that issued the card</string>
    <string name="fdl_error_card_consent_duplicate_card_transaction">A transaction with an identical amount and credit card information was submitted very recently. Please check your card statement to see if a recent charge already exists.</string>
    <string name="fdl_error_card_consent_incorrect_card_details">Incorrect card details. Please check your expiry date or card number</string>
    <string name="fdl_error_card_consent_insufficient_card_funds">Insufficient funds for the charge.</string>
    <string name="fdl_error_card_consent_issuer_processing_charge">Please contact your card issuer for more information</string>
    <string name="fdl_error_card_consent_processing_charge">Could not process payment, please try again later</string>
    <string name="fdl_error_linking_card">Error linking card</string>
    <string name="fdl_expiry_date_hint">MM / YY</string>
    <string name="fdl_expiry_date_label">Expiry date</string>
    <string name="fdl_intro_1st_step_text">Submit your card details</string>
    <string name="fdl_intro_2nd_step_text">Check your card statement for the microcharge</string>
    <string name="fdl_intro_3rd_step_text">Come back and enter the exact charge amount within 48 hours</string>
    <string name="fdl_intro_cta_button_tile">Continue</string>
    <string name="fdl_intro_toolbar_title">Get started</string>
    <string name="fdl_intro_top_text">For identity verification purposes, we will send a microcharge (refund will be processed within 72 hours) to the card you connect. To connect and verify your card, follow these steps:</string>
    <string name="fdl_link_button_description">Card Link Button</string>
    <string name="fdl_link_card_button_title">LINK CARD</string>
    <string name="fdl_link_card_success">Card linked successfully</string>
    <string name="fdl_logo_description">Fidel API Logo</string>
    <string name="fdl_north_america_card_network">your payment card network</string>
    <string name="fdl_north_america_consent_text">By submitting your card information and checking this box, you authorize %s to monitor and share transaction data with Fidel API (our service provider) to participate in %s program. You also acknowledge and agree that Fidel API may share certain details of your qualifying transactions with %s to enable your participation in %s program and for other purposes in accordance with the %s &lt;a href=\'%s\'>Terms and Conditions&lt;/a>%s%s</string>
    <string name="fdl_north_america_end_text">\u0020and &lt;a href=\'https://fidel.uk/legal/privacy/\'>Fidel API’s Privacy Policy&lt;/a>. You may opt-out of transaction monitoring on the linked card at any time by %s.</string>
    <string name="fdl_north_america_privacy_text">, %s &lt;a href=\'%s\'>Privacy Policy&lt;/a></string>
    <string name="fdl_primary_card_recognition_string_format">%1$s *** %2$s</string>
    <string name="fdl_radio_btn_selector_neutral_btn_title">Cancel</string>
    <string name="fdl_radio_btn_selector_positive_btn_title">Ok</string>
    <string name="fdl_radio_btn_selector_title">Select country</string>
    <string name="fdl_resolved_language">en</string>
    <string name="fdl_test_card_number_error_message">Invalid test card number</string>
    <string name="fdl_transaction_stream_card_network">your payment card network</string>
    <string name="fdl_transaction_stream_consent_text">By submitting your card information and checking this box, you authorize %s to monitor and share transaction data (e.g., amount, time, date and merchant name) with Fidel API (our service provider) and %s for the purposes of identifying relevant transactions and carrying out related expense management services. You also acknowledge and agree that relevant transaction details may be shared with involved third parties to enable spend management processes, in accordance with %s &lt;a href=\'%s\'>Terms and Conditions&lt;/a>%s and &lt;a href=\'https://fidel.uk/legal/privacy/\'>Fidel API’s Privacy Policy&lt;/a>. You may opt-out of transaction monitoring on the linked card at any time by %s.</string>
    <string name="fdl_transaction_stream_consent_text_mastercard">By submitting your card information and checking this
        box, you authorize %s to access, monitor and share transaction data (e.g., amount, time, date and merchant
        name) according to its &lt;a
        href=\'https://www.mastercard.us/en-us/vision/corp-responsibility/commitment-to-privacy/privacy.html\'>Privacy Policy&lt;/a> with Fidel API (our service provider) and %s for the
        purposes of
        identifying relevant transactions and carrying out related expense management services. You also acknowledge and agree that relevant transaction details may be shared with involved third parties to enable spend management processes, in accordance with %s &lt;a href=\'%s\'>Terms and Conditions&lt;/a>%s and &lt;a href=\'https://fidel.uk/legal/privacy/\'>Fidel API’s Privacy Policy&lt;/a>. You may opt-out of transaction monitoring on the linked card at any time by %s.</string>
    <string name="fdl_transaction_stream_privacy_text">\u0020and &lt;a href=\'%s\'>Privacy Policy&lt;/a></string>
    <string name="fdl_verification_error_cardalreadyverified">Card already verified.</string>
    <string name="fdl_verification_error_cardnotfound">Card not found.</string>
    <string name="fdl_verification_error_generic">Verification failed for unknown reason.</string>
    <string name="fdl_verification_error_incorrectamount">Incorrect amount.</string>
    <string name="fdl_verification_error_maximumattemptsreached">Maximum verification attempts reached.</string>
    <string name="fdl_verification_error_unauthorized">Unauthorized error.</string>
    <string name="fdl_verification_error_unexpected">Unexpected error.</string>
    <string name="fdl_verification_error_verificationnotfound">Verification not found.</string>
    <string name="fdl_verification_screen_bottom_text">If the microcharge is not visible on your statement within a few minutes, please contact your bank.</string>
    <string name="fdl_verification_screen_cta_title">Verify</string>
    <string name="fdl_verification_screen_reconnect_card_button_title">Reconnect your card</string>
    <string name="fdl_verification_screen_top_text">To finalize the card linking process we charged the &lt;b>%1$s&lt;/b> as \"CARD VERIFICATION FDEL\".</string>
    <style name="fdl_CTATitle" parent="@android:style/TextAppearance.Small">
        <item name="android:textSize">@dimen/fdl_card_form_btn_link_title_font_size</item>
        <item name="android:textColor">@color/fdl_ctaButtonTitlePrimaryColor</item>
        <item name="android:fontFamily">sans-serif-medium</item>
    </style>
    <style name="fdl_Divider">
        <item name="android:background">#969696</item>
    </style>
    <style name="fdl_Divider.Horizontal" parent="fdl_Divider">
        <item name="android:layout_height">1px</item>
    </style>
    <style name="fdl_Divider.Vertical" parent="fdl_Divider">
        <item name="android:layout_width">1px</item>
    </style>
    <style name="fdl_FidelActionBarTitle" parent="@android:style/TextAppearance.Medium">
        
        <item name="android:textColor">#ffffff</item>
        
    </style>
    <style name="fdl_FidelCardEditTextTheme">
        
        <item name="colorControlNormal">#ffffff</item>
        <item name="colorControlActivated">#ffffff</item>
        <item name="colorControlHighlight">#ffffff</item>
        <item name="android:textSize">@dimen/fdl_card_form_card_font_size</item>
        <item name="android:textColor">#000000</item>
        <item name="android:textStyle">normal</item>
        <item name="android:typeface">sans</item>
        <item name="android:textCursorDrawable">@drawable/fdl_cursor</item>
        
    </style>
    <style name="fdl_FidelCardFormCountry" parent="fdl_FidelCardEditTextTheme">
        
        
    </style>
    <style name="fdl_FidelCardFormInvalidItemCaption" parent="fdl_FidelCardFormItemCaption">
        <item name="android:textColor">@color/fdl_colorError</item>
    </style>
    <style name="fdl_FidelCardFormItemCaption" parent="@android:style/TextAppearance.Small">
        <item name="android:textSize">@dimen/fdl_card_form_caption_font_size</item>
        <item name="android:textColor">@color/fdl_dimmedBodyText</item>
        <item name="android:textStyle">normal</item>
        <item name="android:typeface">sans</item>
    </style>
    <style name="fdl_FidelExpiryEditTextTheme" parent="fdl_FidelCardEditTextTheme">
        
        <item name="android:padding">0dp</item>
        
    </style>
    <style name="fdl_FidelMainTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        
        <item name="colorPrimary">@color/fdl_colorPrimary</item>
        <item name="colorPrimaryDark">@color/fdl_colorPrimaryDark</item>
        <item name="colorAccent">@color/fdl_colorAccent</item>
    </style>
    <style name="fdl_ProgressLoader" parent="fdl_FidelMainTheme">
        <item name="colorAccent">#ffffff</item>
    </style>
    <style name="fdl_TextWithLinks" parent="fdl_FidelCardFormItemCaption">
        <item name="android:textSize">@dimen/fdl_text_with_links_font_size</item>
        <item name="android:lineSpacingMultiplier">1.2</item>
        <item name="android:textColorLink">@color/fdl_linkButtonColor</item>
    </style>
    <declare-styleable name="fdl_cta_button">
        <attr format="string" name="fdl_cta_button_title"/>
        <attr format="string" name="fdl_cta_button_priority"/>
    </declare-styleable>
    <declare-styleable name="fdl_intro_step">
        <attr format="integer" name="fdl_step_number"/>
        <attr format="string" name="fdl_text"/>
    </declare-styleable>
</resources>

(I would recommend not messing with anything besides basic style values like color, to avoid strange/unforseen breakages now and/or later down the line.)