Android SDK UI Customization API

Android SDK UI and key mapping reference for customizations.

This document describes the different customizable sections of the Programmable Wallet SDK customization API. To get the most flexibility out of the SDK, use this reference with the SDK API.

Text, Color, and Font Customization

For text-related customization, there are two types of customization, dynamic and static:

  • For dynamic customization, update the source code's desired string, color, and font (as typeface).
  • For Static customization, add or update the strings.xml file located at src/main/res/values/strings.xml. To avoid the static customization being overwritten by the dynamic customization, use the null value for the text argument when initializing with theTextConfig() constructor, for example:
new TextConfig(null, color, typeface);
TextConfig(null, color, typeface)

Please reference the UI screenshots below with each string’s mapping code, then use the mapping code to find the Resource.TextsKey name in the Index Table for more detail of customization support and usage for each text string.

🔖

Note:

Some strings do not support static or dynamic customization for text, color, font and gradientColors using the TextConfig() constructor.

The detail of supporting scope can be found in the index table and the note column. If the app still customizes those unsupported values, it will give a WARN level log printed to logcat, filtered with CustomizeChecker for log abstraction.

The correct usage for unsupported value when initializing with the TextConfig() constructor is as follows:

new TextConfig("Your Text Here", null /*gradientColors*/, null); //color is 0 by default.
new TextConfig("", 0 /*color*/, null);
new TextConfig("Your Text Here");
TextConfig("Your Text Here", null /*gradientColors*/, null) //color is 0 by default.
TextConfig("", 0 /*color*/, null)
TextConfig("Your Text Here")

New PIN Code

A1 / C1~C5

Confirm PIN Code

C6~C7

Enter PIN Code

A2 / C8~C9, C5-1, C5-2

Security Intros

A3~A4 / C10~C11

Security Questions Customization

Please reference the Security Question section in the SDK for how to customize the question by using setSecurityQuestions method.

A5 / C12~C25

Security Summary

A6 / C26~C32

Security Confirm

C33~C37 / B1

Recover PIN Code

A7 / C39~C60

Alert Pop Window

C61~C62

Confirm Transaction

C63~C90

Verify OTP

C99~C105


A Index Table - Resource.TextsKey

#Resource.TextsKeyTextConfigs lengthTextConfig.textTextConfig.textColorTextConfig.fontTextConfig.gradientColorscolors.xmlstyles.xmlNote🔖
A1newPinCodeHeadlineFree✅🔖✅🔖circlepw_text_maincirclepw_heading3textColor will be applied if gradientColors is null.
A2enterPinCodeHeadlineFree✅🔖✅🔖circlepw_text_maincirclepw_heading3textColor will be applied if gradientColors is null.
A3securityIntroHeadlineFree✅🔖✅🔖circlepw_text_maincirclepw_heading4textColor will be applied if gradientColors is null.
A4securityIntroLink2🔖✅🔖✅🔖circlepw_text_actioncirclepw_body2TextConfigs: [DisplayText, URL]Only display when the array length is not less then 2 and the URL is not empty.Set color / font according to TextConfig[0]. 
A5securityQuestionHeaders<= 5🔖✅🔖✅🔖circlepw_text_auxiliarycirclepw_body2TextConfigs over the length limit will be ignored.
A6securitySummaryQuestionHeadersSame as securityQuestionHeaders (A5)circlepw_text_main2circlepw_heading5TextConfigs over the length limit will be ignored.
A7recoverPinCodeHeadlineFree✅🔖✅🔖circlepw_text_maincirclepw_heading3textColor will be applied if gradientColors is null.

B Index Table - Resource.IconTextsKey

Use this Index Table to reference the Dynamic special Icon, Text, Color, and Font Customization. Both the icon image and the text fields are dynamically configured together.

Use RemoteImageSetter or LocalImageSetter for icon images:

  • RemoteImageSetter constructor:
    • RemoteImageSetter(int drawableId, String url)
  • LocalImageSetter constructor:
    • LocalImageSetter(int drawableId)

The SDK uses glide as the image loader for remote images. For the cache strategy, please see DiskCacheStrategy.AUTOMATIC.

#Resource.IconTextsKeyTextConfigs lengthTextConfig.textTextConfig.textColorTextConfig.fontTextConfig.gradientColorscolors.xmlstyles.xmlNote🔖
B1securityConfirmationItems<= 4🔖circlepw_text_maincirclepw_body2TextConfigs over the length limit will be ignored.

C Index Table - Resource.Key

🔖

Note:

The gradientColors field is not supported for the Keys in this table. If you dynamically set the color as gradientColor, the effect will be ignored and the WARN level log will be printed.

# Resource.Keystring.xmltexttextColorfontcolors.xmlstyles.xmlNote
C1circlepw_new_pincode_subheadcirclepw_new_pincode_subheadcirclepw_text_auxiliarycirclepw_body2
C2circlepw_pin_digit_configcirclepw_text_maincirclepw_pinDigitTextNormal
circlepw_main_bt_backgroundSucceed
circlepw_errorFailed
C5circlepw_pincode_error_config❌🔖❌🔖circlepw_errorcirclepw_body2For text, see Error Message:incorrectUserPin(155112)userPinLocked(155119)pinCodeNotMatched(155703)
C5-1circlepw_pin_remain_attemps_templatecirclepw_pin_remain_attemps_template✅🔖e.g. You have %s attempts left.
C5-2circlepw_pin_lock_period_templatecirclepw_pin_lock_period_template✅🔖e.g. You’ve used up all PIN attempts. Please wait for %s mins to retry later..
C6circlepw_confirm_pincode_headlinecirclepw_confirm_pincode_headlinecirclepw_text_maincirclepw_heading3
C7circlepw_confirm_pincode_subheadcirclepw_confirm_pincode_subheadcirclepw_text_auxiliarycirclepw_body2
C8circlepw_enter_pincode_subheadcirclepw_enter_pincode_subheadcirclepw_text_auxiliarycirclepw_body2
C9circlepw_enter_pincode_forgot_pincirclepw_enter_pincode_forgot_pincirclepw_text_actioncirclepw_actionText
C10circlepw_security_intros_descriptioncirclepw_security_intros_descriptioncirclepw_text_auxiliary2circlepw_body2
C11circlepw_continuecirclepw_continuecirclepw_main_bt_textcirclepw_mainButtonTextNormal
circlepw_main_bt_text_pressedPressed
circlepw_disabled_main_bt_textDisabled
C12circlepw_security_questions_titlecirclepw_security_questions_titlecirclepw_text_maincirclepw_toolbarTitle
C13circlepw_security_questions_required_markcirclepw_security_questions_required_markcirclepw_errorcirclepw_metadata1
C14circlepw_security_questions_question_input_configcirclepw_text_maincirclepw_body1
C15circlepw_security_questions_question_placeholdercirclepw_security_questions_question_placeholder✅🔖✅🔖circlepw_placeholdercirclepw_body1Set ​​TextView’s textColorHint and hint. Apply circlepw_security_questions_question_input_config (C14)’s font.
C16circlepw_security_questions_answer_headercirclepw_security_questions_answer_headercirclepw_text_auxiliarycirclepw_body2
C17circlepw_security_questions_answer_input_configcirclepw_text_maincirclepw_body1
C18circlepw_security_questions_answer_placeholdercirclepw_security_questions_answer_placeholder✅🔖✅🔖❌🔖circlepw_placeholdercirclepw_body1Set ​​TextView’s textColorHint and hint. Apply circlepw_security_questions_answer_input_config (C17)’s font.
C19circlepw_security_questions_answer_hint_headercirclepw_security_questions_answer_hint_headercirclepw_text_auxiliarycirclepw_body2
C20circlepw_security_questions_answer_hint_input_configcirclepw_text_maincirclepw_body1
C21circlepw_security_questions_answer_hint_placeholdercirclepw_security_questions_answer_hint_placeholder✅🔖✅🔖❌🔖circlepw_placeholdercirclepw_body1Set ​​TextView’s textColorHint and hint. Apply circlepw_security_questions_answer_hint_input_config (C20)’s font.
C22circlepw_security_questions_error_config❌🔖❌🔖circlepw_errorcirclepw_metadata1For text, see Error Message:hintsMatchAnswers(155705)
C23circlepw_nextcirclepw_nextcirclepw_main_bt_textcirclepw_mainButtonTextNormal
circlepw_main_bt_text_pressedPressed
circlepw_disabled_main_bt_textDisabled
C24circlepw_select_question_titlecirclepw_select_question_titlecirclepw_text_maincirclepw_toolbarTitle
C25circlepw_select_question_item_configcirclepw_text_maincirclepw_body1
C26circlepw_security_summary_titlecirclepw_security_summary_titlecirclepw_text_maincirclepw_toolbarTitle
C27circlepw_question_labelcirclepw_question_labelcirclepw_text_auxiliary2circlepw_body2
C28circlepw_security_summary_question_value_configcirclepw_text_summarycirclepw_body2
C29circlepw_answer_labelcirclepw_answer_labelcirclepw_text_auxiliary2circlepw_body2
C30circlepw_security_summary_answer_value_configcirclepw_text_summarycirclepw_caption2
C31circlepw_hint_labelcirclepw_hint_labelcirclepw_text_auxiliary2circlepw_body2
C32circlepw_security_summary_hint_value_configcirclepw_text_summarycirclepw_body2
C33circlepw_security_confirm_titlecirclepw_security_confirm_titlecirclepw_text_maincirclepw_toolbarTitle
C34circlepw_security_confirm_headlinecirclepw_security_confirm_headlinecirclepw_text_maincirclepw_heading4
C35circlepw_security_confirm_input_headlinecirclepw_security_confirm_input_headlinecirclepw_text_main2circlepw_caption1
C36circlepw_security_confirm_input_placeholdercirclepw_security_confirm_input_placeholder✅🔖✅🔖❌🔖circlepw_placeholdercirclepw_body1Set ​​TextView’s textColorHint and hint. Apply circlepw_security_confirm_input_config (C37)’s font.
C37circlepw_security_confirm_input_configcirclepw_text_maincirclepw_body1
C37-1circlepw_security_confirm_input_matchcirclepw_security_confirm_input_matchThe text is the answer that requires user type. e.g. I agree
C38circlepw_recover_pincode_error_config❌🔖❌🔖circlepw_text_maincirclepw_body2For text, see Error Message:incorrectSecurityAnswers(155115)securityAnswersLocked(155120)
C38-1circlepw_answer_remain_attemps_templatecirclepw_answer_remain_attemps_template✅🔖e.g. You have %s attempts left.
C38-2circlepw_answer_lock_period_templatecirclepw_answer_lock_period_template✅🔖e.g. Please wait for %s mins to retry later
C39circlepw_recover_pincode_question_configcirclepw_text_main2circlepw_body1
C40circlepw_hint_tagcirclepw_hint_tagcirclepw_tag_textcirclepw_metadata2
C41circlepw_recover_pincode_answer_hint_configcirclepw_tag_following_textcirclepw_metadata1
C42circlepw_recover_pincode_answer_input_headercirclepw_text_auxiliarycirclepw_body2
C43circlepw_recover_pincode_answer_input_placeholdercirclepw_recover_pincode_answer_input_placeholder✅🔖✅🔖❌🔖circlepw_placeholdercirclepw_body1Set ​​TextView’s textColorHint and hint. Apply circlepw_recover_pincode_input_config (C44)’s font.
C44circlepw_recover_pincode_input_configcirclepw_text_maincirclepw_body1
C45circlepw_confirmcirclepw_confirmcirclepw_main_bt_textcirclepw_mainButtonTextNormal
circlepw_main_bt_text_pressedPressed
circlepw_disabled_main_bt_textDisabled
C46circlepw_pin_biometrics_allow_titlecirclepw_pin_biometrics_allow_titlecirclepw_text_maincirclepw_heading3
C47circlepw_pin_biometrics_allow_subtitlecirclepw_pin_biometrics_allow_subtitlecirclepw_text_auxiliarycirclepw_body2
C48circlepw_skipcirclepw_skipcirclepw_second_bt_textcirclepw_secondButtonNormal
circlepw_second_bt_textPressed
circlepw_second_bt_text_disabledDisabled
C49circlepw_pin_biometrics_disablecirclepw_pin_biometrics_disablecirclepw_plain_bt_textcirclepw_plainButtonNormal
circlepw_plain_bt_textPressed
circlepw_plain_bt_text_disabledDisabled
C50circlepw_pin_biometrics_encrypt_titlecirclepw_pin_biometrics_encrypt_title
C51circlepw_pin_biometrics_encrypt_negative_textcirclepw_pin_biometrics_encrypt_negative_text
C52circlepw_pin_biometrics_encrypt_subtitlecirclepw_pin_biometrics_encrypt_subtitle
C53circlepw_pin_biometrics_encrypt_desccirclepw_pin_biometrics_encrypt_desc
C54circlepw_pin_biometrics_decrypt_titlecirclepw_pin_biometrics_decrypt_title
C55circlepw_pin_biometrics_decrypt_negative_textcirclepw_pin_biometrics_decrypt_negative_text
C56circlepw_pin_biometrics_decrypt_subtitlecirclepw_pin_biometrics_decrypt_subtitle
C57circlepw_pin_biometrics_decrypt_desccirclepw_pin_biometrics_decrypt_desc
C58circlepw_pin_biometrics_update_titlecirclepw_pin_biometrics_update_title✅🔖circlepw_text_maincirclepw_heading3After the auto-fill PIN verify fails, the following biometrics setting page title will use this.
C59circlepw_pin_biometrics_update_subtitlecirclepw_pin_biometrics_update_subtitle✅🔖circlepw_text_auxiliarycirclepw_body2After the auto-fill PIN verify fails, the following biometrics setting page subtitle will use this.
C60circlepw_enter_pincode_use_biometricscirclepw_enter_pincode_use_biometricscirclepw_pressed_assist_text_colorcirclepw_actionText
C61circlepw_alert_pop_window_description_config❌🔖❌🔖circlepw_alert_pop_description_textcirclepw_body2For text, see Error Message:
biometricsKeyPermanentlyInvalidated(155710)
C62circlepw_alert_pop_window_confirmcirclepw_alert_pop_window_confirmcirclepw_alert_pop_btn_textcirclepw_actionText
C63circlepw_transaction_request_titlecirclepw_transaction_request_titlecirclepw_text_maincirclepw_heading3
C64circlepw_transaction_request_subtitlecirclepw_transaction_request_subtitlecirclepw_text_auxiliarycirclepw_body2
C65circlepw_transaction_request_main_currency✅🔖circlepw_text_promptcirclepw_txAmountMainTextAppend currency name as unit after amount, e.g. 20 USDC
C66circlepw_transaction_request_exchange_valuecirclepw_text_exchangecirclepw_txExchangeText
C67circlepw_transaction_request_from_labelcirclepw_transaction_request_from_labelcirclepw_text_promptcirclepw_txInfoText
C68circlepw_transaction_request_fromcirclepw_text_promptcirclepw_txInfoValueText
C69circlepw_transaction_request_to_labelcirclepw_transaction_request_to_labelcirclepw_text_promptcirclepw_txInfoText
C70circlepw_transaction_request_to_configcirclepw_text_promptcirclepw_txInfoValueText
C71circlepw_transaction_request_to_contract_namecirclepw_text_promptcirclepw_txInfoValueText
C72circlepw_transaction_request_to_contract_urlcirclepw_text_promptcirclepw_txInfoValueText
C73circlepw_transaction_request_network_fee_labelcirclepw_transaction_request_network_fee_labelcirclepw_text_promptcirclepw_txInfoText
C74circlepw_transaction_request_network_feecirclepw_text_promptcirclepw_txInfoValueText
C75circlepw_transaction_request_exchange_network_feecirclepw_text_exchangecirclepw_txInfoExchangeText
C76circlepw_transaction_request_total_labelcirclepw_transaction_request_total_labelcirclepw_text_promptcirclepw_txInfoText
C77circlepw_transaction_request_total_configcirclepw_text_promptcirclepw_txInfoValueText
C78circlepw_transaction_request_exchange_total_valuecirclepw_text_exchangecirclepw_txInfoExchangeText
C79circlepw_transaction_request_error_configcirclepw_errorcirclepw_body2
C80circlepw_transaction_request_fee_tipcirclepw_transaction_request_fee_tipcirclepw_tip_textcirclepw_feeTipText
C81circlepw_contract_interaction_contract_address_labelcirclepw_contract_interaction_contract_address_labelcirclepw_text_promptcirclepw_txInfoText
C82circlepw_contract_interaction_contract_address_configcirclepw_text_promptcirclepw_txInfoValueText
C83circlepw_contract_interaction_data_detailscirclepw_contract_interaction_data_detailscirclepw_text_promptcirclepw_txInfoValueText
C84circlepw_contract_interaction_abi_function_labelcirclepw_contract_interaction_abi_function_labelcirclepw_text_promptcirclepw_txInfoText
C85circlepw_contract_interaction_abi_function_configcirclepw_text_promptcirclepw_txInfoValueText
C86circlepw_contract_interaction_abi_parameter_labelcirclepw_contract_interaction_abi_parameter_labelcirclepw_text_promptcirclepw_txInfoText
C87circlepw_contract_interaction_call_data_labelcirclepw_contract_interaction_call_data_labelcirclepw_text_promptcirclepw_txInfoText
C88circlepw_contract_interaction_call_data_configcirclepw_text_interactivecirclepw_contractDataText
C89circlepw_transaction_request_raw_tx_descriptioncirclepw_transaction_request_raw_tx_descriptioncirclepw_text_auxiliarycirclepw_body2
C90circlepw_transaction_request_raw_tx_configcirclepw_text_auxiliarycirclepw_body2
C91circlepw_signature_request_titlecirclepw_signature_request_titlecirclepw_text_maincirclepw_heading3
C92circlepw_signature_request_contract_namecirclepw_text_promptcirclepw_signNameText
C93circlepw_signature_request_contract_urlcirclepw_text_sign_urlcirclepw_signUrlText
C94circlepw_signature_request_subtitlecirclepw_signature_request_subtitlecirclepw_text_auxiliarycirclepw_body2
C95circlepw_signature_request_descriptioncirclepw_signature_request_descriptioncirclepw_text_auxiliarycirclepw_body2
C96circlepw_signature_request_msg_configcirclepw_text_auxiliarycirclepw_body2
C97circlepw_signcirclepw_signcirclepw_main_bt_textcirclepw_mainButtonTextNormal
circlepw_main_bt_text_pressedPressed
circlepw_disabled_main_bt_textDisabled
C98circlepw_try_againcirclepw_try_againcirclepw_main_bt_textcirclepw_mainButtonTextNormal
circlepw_main_bt_text_pressedPressed
circlepw_disabled_main_bt_textDisabled
C99circlepw_email_otp_titlecirclepw_email_otp_titlecirclepw_text_maincirclepw_heading3
C100circlepw_email_otp_descriptioncirclepw_email_otp_descriptioncirclepw_text_auxiliarycirclepw_body2
C101circlepw_email_otp_email
C102circlepw_email_otp_head_config
C103circlepw_email_otp_dashcirclepw_email_otp_dash
C104circlepw_email_otp_send_again_hintcirclepw_email_otp_send_again_hint
C105circlepw_email_otp_send_againcirclepw_email_otp_send_again

Error Messages

When using this table, reference the ApiError heading in the WalletSDK section of the SDK.

Possible display locationApiError.ErrorCodeDefault ValueNote
C5, C38, C79unknown(-1)Unknown error
success(0)Success
C5, C38, C79apiParameterMissing(1)API parameter missing
C5, C38, C79apiParameterInvalid(2)API parameter invalid
C5, C38, C79forbidden(3)Forbidden
C5, C38, C79unauthorized(4)Unauthorized
C5, C38, C79retry(9)Retry
C5, C38customerSuspended(10)Customer suspended
C5, C38pending(11)Pending
C5, C38invalidSession(12)Invalid session
C5, C38invalidPartnerId(13)Invalid partner ID
C5, C38invalidMessage(14)Invalid Message published to a SQS queue.
C5, C38, C79invalidPhone(15)Invalid phone number '%s', format should be in E.164.
C5, C79walletIdNotFound(156001)
C5, C79tokenIdNotFound(156002)
C5, C79transactionIdNotFound(156003)
C5, C79entityCredentialNotFound(156004)
C5, C79walletSetIdNotFound(156005)
userAlreadyExisted(155101)user already existed
userNotFound(155102)user not found
C5, C38, C79userTokenNotFound(155103)user token not found
C5, C38, C79userTokenExpired(155104)user token expired
C5, C38, C79invalidUserToken(155105)invalid user token
C5userWasInitialized(155106)user was initialized
C5userHasSetPin(155107)user has set pin
C38userHasSetSecurityQuestion(155108)user has set security question
C5, C38, C79userWasDisabled(155109)user was disabled
C5, C79userDoesNotSetPinYet(155110)user does not set pin yet
C38userDoesNotSetSecurityQuestionYet(155111)user does not set security questions yet
C5, C79incorrectUserPin(155112)The PIN you entered is incorrect.
incorrectDeviceId(155113)incorrect device id
incorrectAppId(155114)app id not found
C38incorrectSecurityAnswers(155115)The answers you entered are incorrect.
invalidChallengeId(155116)invalid challenge id
C5, C79invalidApproveContent(155117)invalid approve content
C5, C38, C79invalidSecretKey(155118)invalid secret key
C5, C79userPinLocked(155119)Just display circlepw_pin_lock_period_template (C5-2)
C38securityAnswersLocked(155120)The answers you entered are incorrect.
C5, C79walletIsFrozen(155501)Wallet is Frozen
C5, C79maxWalletLimitReached(155502)Max wallet limit reached
C5, C79walletSetIdMutuallyExclusive(155503)WalletSetId can not be used together with blockchain and address filter
C5, C79metadataUnmatched(155504)metadata array length does not match wallet count
userCanceled(155701)User canceled
launchUiFailed(155702)
C5pinCodeNotMatched(155703)The PIN you entered is not the same as the first one.
C5insecurePinCode(155704)Your PIN can’t have repeating or consecutive numbers.
C22hintsMatchAnswers(155705)Your hint can’t be the same as the answer.
biometricsSettingNotEnabled(155708)"Biometrics instead of PIN" is disabled
deviceNotSupportBiometrics(155709)The device system doesn't support biometrics
C61biometricsKeyPermanentlyInvalidated(155710)Failed to decrypt biometrics key
biometricsUserSkip(155711)The user has not enabled biometrics yet
biometricsUserDisableForPin(155712)The user refused to enable biometrics
biometricsUserLockout(155713)Too many requests. Try again later.
biometricsUserLockoutPermanent(155714)Too many requests. The biometrics sensor on the device is locked.
biometricsUserNotAllowPermission(155715)The user didn't allow to enable biometrics.
biometricsInternalError(155716)Unexpected error for biometrics: %s

Usingstrings.xml for Static Customization

The example values in the strings.xml file below can be used for Static Customization. The fields also show the default string values in the SDK if you do not set dynamic customization.

Please reference this example and add/update any desired text string in your strings.xml under the res/values folder.

To avoid dynamic customization, return a TextConfig that doesn't contain text or null in getTextConfig(String key) and getTextConfigs(Resource.TextsKey key) function. For example, a configuration that doesn't have new TextConfig(null, color, typeface), return null, or super.getTextConfig(key) in its switch statement.

<resources>
    <!-- [General] -->
    <string name="circlepw_continue">Continue</string>
    <string name="circlepw_next">Next</string>
    <string name="circlepw_skip">Skip</string>
    <string name="circlepw_question_label">Question:</string>
    <string name="circlepw_answer_label">Answer:</string>
    <string name="circlepw_hint_label">Hint:</string>
    <string name="circlepw_hint_tag">Hint</string>
    <string name="circlepw_empty"></string>
    <string name="circlepw_empty_placeholder">-</string>
    <string name="circlepw_confirm">Confirm</string>
    <string name="circlepw_pin_remain_attemps_template">You have %s attempts left.</string>
    <string name="circlepw_pin_lock_period_template">You’ve used up all PIN attempts. Please wait for %s mins to retry later.</string>
    <string name="circlepw_answer_remain_attemps_template">You have %s attempts left.</string>
    <string name="circlepw_answer_lock_period_template">Please wait for %s mins to retry later.</string>
    <string name="circlepw_sign">Sign</string>
    <string name="circlepw_try_again">Try again</string>

    <!-- [Page] EnterPINCode -->
    <string name="circlepw_enter_pincode_subhead">Let us know if it’s really you.</string>
    <string name="circlepw_enter_pincode_forgot_pin">Forgot PIN?</string>
    <string name="circlepw_enter_pincode_use_biometrics">Use Biometrics</string>

    <!-- [Page] NewPINCode -->
    <string name="circlepw_new_pincode_subhead">Your PIN can’t have repeating (e.g. 000000) or consecutive (e.g. 123456) numbers.</string>
    <!-- [Page] ConfirmPINCode -->
    <string name="circlepw_confirm_pincode_headline">Re-enter your PIN to confirm</string>
    <string name="circlepw_confirm_pincode_subhead"></string>
    <!-- [Page] SecurityIntros -->
    <string name="circlepw_security_intros_description">This is the only way to recover wallet access if you forget your PIN. Pick 2 security questions and provide answers for access recovery.</string>

    <!-- [Page] SecurityQuestions -->
    <string name="circlepw_security_questions_title">Recovery method</string>
    <string name="circlepw_security_questions_required_mark">*</string>
    <string name="circlepw_security_questions_question_placeholder">Select one question</string>
    <string name="circlepw_security_questions_answer_header">Provide an answer</string>
    <string name="circlepw_security_questions_answer_placeholder">Type your answer here</string>
    <string name="circlepw_security_questions_answer_hint_header">Provide an answer hint (optional)</string>
    <string name="circlepw_security_questions_answer_hint_placeholder">Type your hint here</string>
    
    <!-- [Page] SelectQuestion -->
    <string name="circlepw_select_question_title">Select one question</string>
    <!-- [Page] SecuritySummary -->
    <string name="circlepw_security_summary_title">Summary</string>
    
    <!-- [Page] SecurityConfirm -->
    <string name="circlepw_security_confirm_title">Confirmation</string>
    <string name="circlepw_security_confirm_headline">Keep your questions safe</string>
    <string name="circlepw_security_confirm_input_headline">Type \"I agree\" to proceed:</string>
    <string name="circlepw_security_confirm_input_placeholder">Type \"I agree\" here</string>
    <string name="circlepw_security_confirm_input_match">I agree</string>
    
    <!-- [Page] RecoverPINCode -->
    <string name="circlepw_recover_pincode_answer_input_header">Enter your answer here</string>
    <string name="circlepw_recover_pincode_answer_input_placeholder">Type your answer here</string>

    <!-- [PageBiometricsAllowFragment] -->
    <string name="circlepw_pin_biometrics_allow_title">Allow Biometrics for Web3 Access</string>
    <string name="circlepw_pin_biometrics_allow_subtitle">Elevate your experience with effortless biometrics  recognition</string>
    <string name="circlepw_pin_biometrics_disable">Don\'t ask me again</string>
    <string name="circlepw_pin_biometrics_encrypt_title">Verify It\'s Youe</string>
    <string name="circlepw_pin_biometrics_encrypt_negative_text">Cancel</string>
    <string name="circlepw_pin_biometrics_encrypt_subtitle"></string>
    <string name="circlepw_pin_biometrics_encrypt_desc"></string>
    <string name="circlepw_pin_biometrics_decrypt_title">Verify It\'s Youe</string>
    <string name="circlepw_pin_biometrics_decrypt_negative_text">Cancel</string>
    <string name="circlepw_pin_biometrics_decrypt_subtitle"></string>
    <string name="circlepw_pin_biometrics_decrypt_desc"></string>

    <string name="circlepw_pin_biometrics_update_title">Update Biometrics for Web3 Access</string>
    <string name="circlepw_pin_biometrics_update_subtitle">Please update your biometrics</string>
    <string name="circlepw_alert_pop_window_title">Alert</string>
    <string name="circlepw_alert_pop_window_confirm">OK</string>
    <!-- [HostSsoPinFragment] -->
    <string name="circlepw_transaction_request_title">Confirm transaction</string>
    <!-- [HostSsoPinFragment] -->
    <string name="circlepw_transaction_request_subtitle">Please click confirm to proceed the transaction</string>
    <string name="circlepw_transaction_request_from_label">From</string>
    <string name="circlepw_transaction_request_to_label">To</string>
    <string name="circlepw_transaction_request_network_fee_label">Network fee</string>
    <string name="circlepw_transaction_request_total_label">Total</string>
    <string name="circlepw_transaction_request_fee_tip">Please note this is an estimated fee. Network fees may vary based on network traffic and transaction complexity.</string>
    <string name="circlepw_transaction_request_raw_tx_description">Transaction details:</string>
    <string name="circlepw_signature_request_title">Signature Request</string>
    <string name="circlepw_signature_request_subtitle">Click on sign button to provide a signature for verification.</string>
    <string name="circlepw_signature_request_description">You are signing:</string>
    <string name="circlepw_contract_interaction_title">Contract Interaction</string>
    <string name="circlepw_contract_interaction_subtitle">Please click confirm to proceed the  contract execution.</string>
    <string name="circlepw_contract_interaction_contract_address_label">Contract address</string>
    <string name="circlepw_contract_interaction_data_details">Data Details</string>
    <string name="circlepw_contract_interaction_abi_function_label">ABI Function</string>
    <string name="circlepw_contract_interaction_abi_parameter_label">ABI Parameters</string>
    <string name="circlepw_contract_interaction_call_data_label">Call Data</string>
    <!-- [HostVerifyOtpFragment] -->
    <string name="circlepw_email_otp_title">Enter verification code</string>
    <!-- [PageVerifyOtpFragment] -->
    <string name="circlepw_email_otp_description">The one-time passcode has been sent to %s</string>
    <string name="circlepw_email_otp_email">your email</string>
    <string name="circlepw_email_otp_dash">-</string>
    <string name="circlepw_email_otp_send_again_hint">Don’t receive the code?</string>
    <string name="circlepw_email_otp_send_again">Send again</string>
</resources>

Image Customization

The SDK uses glide as the image loader for remote images. For the cache strategy, please see DiskCacheStrategy.AUTOMATIC. Use RemoteImageSetter or LocalImageSetter for icon images:

  • RemoteImageSetter constructor:

    • RemoteImageSetter(int drawableId, String url)
  • LocalImageSetter constructor:

    • LocalImageSetter(int drawableId)

Each image has its suggested size of width and height shown in the index table's ImageView size column. Follow the suggested size to avoid the possibility of a broken layout or unexpected display.

Resource.Icon

D1~D14

D Index Table

#Resource.IconImageView size (dp)
widthheight
D1securityIntroMain144144
D2selectCheckMark2424
D3dropdownArrow4040
D4errorInfo2121
D5securityConfirmMain144144
D6biometricsAllowMain8080
D7showPin2015
D8hidePin2015
D9alertWindowIcon2424
D10transactionTokenIcon3636
D11networkFeeTipIcon1616
D12showLessDetailArrow2020
D13showMoreDetailArrow2020
D14requestIcon7272

Resource.ToolbarIcon

E Index Table

#Resource.ToolbarIconImageView size (dp)
widthheight
E1close2424
E2back24 24

Color Customization

Colors can be customized in a Static way as a static string; with the UI screenshots and Key mapping index table below, the colors of each string can be defined in the colors.xml.Note that some keys are not specified in the screenshot but can be referenced from the A and C index table in the colors.xml column.

New, Confirm, and Enter PIN Code

Security Intro

Security Questions

Security Summary

Security Confirm

Recover PIN Code

Biometrics Setup

Confirm Transaction

Contract Interaction

Signature Request

Verify Email OTP

F Index Table

#colors.xmlColor CodeNote
F1circlepw_text_main# 1A1A1A
F2circlepw_text_auxiliary# 3D3D3D
F3circlepw_text_action# 136FD8Normal action text color
F4circlepw_text_action_pressed# B3136FD8Pressed action text color
F5circlepw_placeholder# A3A3A3
F6circlepw_error# F55538
F7circlepw_error_background# FDF2F2
F8circlepw_text_main2# 1C1C1C
F9circlepw_text_auxiliary2# 707070
F10circlepw_text_summary# 0073C3
F11circlepw_disabled_main_bt_text# 80FFFFFFDisabled button text color
F12circlepw_main_bt_text# FFFFFFNormal button text color
F13circlepw_main_bt_text_pressed# FFFFFFPressed button text color
F14circlepw_disabled_main_bt_background# 800073C3Disabled button background color
F15circlepw_main_bt_background# 0073C3Normal button background color
F16circlepw_main_bt_background_pressed# 1AA3FFPressed button background color
F17circlepw_success# 0B9C4A
F18circlepw_input_boarder# E8E8E8Normal input field border
F19circlepw_input_boarder_focused# 46B5FFFocused input field border
F20circlepw_tag_text# 005339Tag text color
F21circlepw_tag_background# E1F2FFTag background color
F22circlepw_tag_following_text# 0073C3
F23circlepw_divider# F0EFEF
F24circlepw_pin_dot_base# FFFFFFPIN dot unfilled color
F25circlepw_pin_dot_base_boarder# 707070PIN dot unfilled border color
F26circlepw_pin_dot_activated# 0073C3PIN dot filled color
F27circlepw_background# FFFFFFGeneral background color
F28circlepw_security_confirm_main_bg# E9EEFE
F29circlepw_disabled_input_background# F5F5F5Disabled input field background color
F30circlepw_second_bt_text# 0073C3
F31circlepw_second_bt_text_disabled# 800073C3
F32circlepw_second_bt_border# 0073C3
F33circlepw_second_bt_border_disabled# 800073C3
F34circlepw_second_bt_background# FFFFFF
F35circlepw_second_bt_background_pressed# F1F9FE
F36circlepw_second_bt_background_disabled# 80F1F9FE
F37circlepw_plain_bt_text# 0073C3
F38circlepw_plain_bt_text_disabled# 800073C3
F39circlepw_plain_bt_background# FFFFFF
F40circlepw_plain_bt_background_pressed# F1F9FE
F41circlepw_plain_bt_background_disabled# 80F1F9FE
F42circlepw_text_prompt# 29233B
F43circlepw_text_interactive# 0073C3
F44circlepw_interactive_bg# F9F9FC
F45circlepw_text_exchange# F0EFEF
F46circlepw_tip_text# FFFFFF
F47circlepw_transaction_request_fee_tip_bg# 29233B
F48circlepw_text_sign_url# 8E8E93
F49circlepw_otp_head_text# 000000
F50circlepw_otp_hint_text# 6B6580
F51circlepw_otp_action_text# 007AFF

Using colors.xml for Static Customization

The example values in the colors.xml file can be used for Static Customization. The fields also show the default string values in the SDK if you do not set dynamic customization.

Please reference this example and add/update any desired text color in your colors.xml under the res/values folder of the App project.

To avoid dynamic customization, return a TextConfig that contains text only with no color value in the getTextConfig(String key) and getTextConfigs(Resource.TextsKey key) functions. For example, use a configuration with new TextConfig(key, 0, typeface), return null, or super.getTextConfig(key) in its switch statement.

<resources> 
    <color name="circlepw_text_main">#1A1A1A</color> 
    <color name="circlepw_text_auxiliary">#3D3D3D</color>
    <color name="circlepw_text_action">#136FD8</color> 
    <color name="circlepw_text_action_pressed">#B3136FD8</color> 
    <color name="circlepw_placeholder">#A3A3A3</color> 
    <color name="circlepw_error">#F55538</color> 
    <color name="circlepw_error_background">#FDF2F2</color> 
    <color name="circlepw_text_main2">#1C1C1C</color> 
    <color name="circlepw_text_auxiliary2">#707070</color> 
    <color name="circlepw_text_summary">#0073C3</color> 
    <color name="circlepw_disabled_main_bt_text">#80FFFFFF</color> 
    <color name="circlepw_disabled_main_bt_background">#800073C3</color> 
    <color name="circlepw_main_bt_text">#ffffff</color> 
    <color name="circlepw_main_bt_background">#0073C3</color> 
    <color name="circlepw_main_bt_text_pressed">#ffffff</color> 
    <color name="circlepw_main_bt_background_pressed">#1AA3FF</color> 
    <color name="circlepw_second_bt_text">#0073C3</color>
    <color name="circlepw_second_bt_text_disabled">#800073C3</color>
    <color name="circlepw_second_bt_border">#0073C3</color>
    <color name="circlepw_second_bt_border_disabled">#800073C3</color>
    <color name="circlepw_second_bt_background">#FFFFFF</color>
    <color name="circlepw_second_bt_background_pressed">#F1F9FE</color>
    <color name="circlepw_second_bt_background_disabled">#80F1F9FE</color>
    <color name="circlepw_plain_bt_text">#0073C3</color>
    <color name="circlepw_plain_bt_text_disabled">#800073C3</color>
    <color name="circlepw_plain_bt_background">#FFFFFF</color>
    <color name="circlepw_plain_bt_background_pressed">#F1F9FE</color>
    <color name="circlepw_plain_bt_background_disabled">#80F1F9FE</color>
    <color name="circlepw_success">#0B9C4A</color> 
    <color name="circlepw_input_boarder">#E8E8E8</color> 
    <color name="circlepw_input_boarder_focused">#46B5FF</color> 
    <color name="circlepw_tag_text">#005339</color> 
    <color name="circlepw_tag_background">#E1F2FF</color> 
    <color name="circlepw_tag_following_text">#0073C3</color> 
    <color name="circlepw_divider">#F0EFEF</color> 
    <color name="circlepw_pin_dot_base">#ffffff</color> 
    <color name="circlepw_pin_dot_base_boarder">#707070</color> 
    <color name="circlepw_pin_dot_activated">#0073C3</color>
    <color name="circlepw_background">#FFFFFF</color> 
    <color name="circlepw_security_confirm_main_bg">#E9EEFE</color> 
    <color name="circlepw_disabled_input_background">#F5F5F5</color> 
    <color name="circlepw_alert_pop_window_background">#B3111827</color>
    <color name="circlepw_alert_pop_title_text">#1D1B20</color>
    <color name="circlepw_alert_pop_description_text">#49454F</color>
    <color name="circlepw_alert_pop_btn_text">#000000</color>
    <color name="circlepw_pin_dot_focused_boarder">#1894E8</color>
    <color name="circlepw_text_prompt">#29233B</color>
    <color name="circlepw_text_exchange">#979797</color>
    <color name="circlepw_text_sign_url">#8E8E93</color>
    <color name="circlepw_transaction_request_fee_tip_bg">#29233B</color>
    <color name="circlepw_tip_text">#FFFFFF</color>
    <color name="circlepw_interactive_bg">#F9F9FC</color>
    <color name="circlepw_text_interactive">#0073C3</color>
    <color name="transparent">#00000000</color>
    <color name="circlepw_otp_head_text">#000000</color>
    <color name="circlepw_otp_hint_text">#6B6580</color>
    <color name="circlepw_otp_action_text">#007AFF</color>
</resources>

Style Customization

Styles can be customized in a Static way as a static style by using the UI screenshots and Key mapping index table below. The styles of each string can be defined in the styles.xml file.

To avoid dynamic customization,  return TextConfig that contains text only in getTextConfig(String key) and getTextConfigs(Resource.TextsKey key) functions. For example, use new TextConfig(“Your text here”) or super.getTextConfig(key) to ignore that key in the switch statement.

🔖

Note:

Some keys (error message) are not specified in the screenshot but can be referenced from the A and C index table at the styles.xmlfile column.

G Index Table

#styles.xml
G1circlepw_heading3
G2circlepw_heading4
G3circlepw_heading5
G4circlepw_body1
G5circlepw_body2
G6circlepw_caption1
G7circlepw_caption2
G8circlepw_metadata1
G9circlepw_metadata2
G10circlepw_actionText
G11circlepw_pinDigitText
G12circlepw_mainButtonText
G13circlepw_toolbarTitle
G14circlepw_datePicker
G15circlepw_secondButtonText
G16circlepw_plainButtonText
G17circlepw_txAmountMainText
G18circlepw_txInfoText
G19circlepw_txInfoValueText
G20circlepw_detailToggleText
G21circlepw_contractDataText
G22circlepw_txExchangeText
G23circlepw_txInfoExchangeText
G24circlepw_feeTipText
G25circlepw_otpHeadText
G26circlepw_otpSendAgainHintText
G27circlepw_signNameText
G28circlepw_signUrlText

Using the styles.xml file for Static Customization

The example values in the styles.xml file can be used for Static Customization. The fields also show the default style values in the SDK if you do not set dynamic customization.

Please reference this example and add or update any desired text styles in your styles.xml file under the res/values folder of the App project.

The style can be used to define textSize and fontWeight, and it can also be used in conjunction with the static colors key defined in colors.xml, such as in the following:

<item name="colorControlActivated">@color/circlepw_input_boarder_focused</item>
<resources>
    <style name="circlepw_heading3">
        <item name="android:textSize">24sp</item>
    </style>
    <style name="circlepw_heading4">
        <item name="android:textSize">20sp</item>
    </style>
    <style name="circlepw_heading5">
        <item name="android:textSize">18sp</item>
    </style>
    <style name="circlepw_body1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_body2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_caption1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_caption2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_metadata1">
        <item name="android:textSize">12sp</item>
    </style>
    <style name="circlepw_metadata2">
        <item name="android:textSize">10sp</item>
    </style>
    <style name="circlepw_actionText">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_pinDigitText">
        <item name="android:textSize">40sp</item>
    </style>
    <style name="circlepw_mainButtonText">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_secondButtonText">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_plainButtonText">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_toolbarTitle">
        <item name="android:textSize">18sp</item>
    </style>

    <style name="circlepw_datePicker" parent="Theme.AppCompat.Light.Dialog">
        <!-- Top background-->
        <item name="colorAccent">@color/circlepw_main_bt_background</item>
        <!--selected Item color-->
        <item name="colorControlActivated">@color/circlepw_main_bt_background</item>
        <!-- arrow bordercolor(<>)-->
        <item name="android:selectableItemBackgroundBorderless">@color/circlepw_background</item>
        <!--Calender Background color -->
        <item name="android:windowBackground">@color/circlepw_background</item>
        <!-- Ok Cancel Color-->
        <item name="colorOnPrimary">@color/circlepw_main_bt_background</item>
        <!-- Week TextColor-->
        <item name="android:textColorSecondary">@color/circlepw_text_main</item>
        <!-- Calender Number color arrow color (< >) -->
        <item name="android:textColorPrimary">@color/circlepw_text_main</item>
        <!--day , month-->
        <item name="android:textColorPrimaryInverse">@color/circlepw_background</item>
        <!-- year-->
        <item name="android:textColorSecondaryInverse">@color/circlepw_background</item>
    </style>

    <style name="circlepw_txAmountMainText">
        <item name="android:textSize">40sp</item>
    </style>
    <style name="circlepw_txInfoText">
        <item name="android:textSize">15sp</item>
    </style>
    <style name="circlepw_txInfoValueText">
        <item name="android:textSize">15sp</item>
    </style>
    <style name="circlepw_detailToggleText">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_contractDataText">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_txExchangeText">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_txInfoExchangeText">
        <item name="android:textSize">13sp</item>
    </style>
    <style name="circlepw_feeTipText">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_otpHeadText">
        <item name="android:textSize">24sp</item>
    </style>
    <style name="circlepw_otpSendAgainHintText">
        <item name="android:textSize">15sp</item>
    </style>
    <style name="circlepw_signName" parent="circlepw_signNameText">
        <item name="android:textColor">@color/circlepw_text_prompt</item>
    </style>
    <style name="circlepw_signUrl" parent="circlepw_signUrlText">
        <item name="android:textColor">@color/circlepw_text_sign_url</item>
    </style>
</resources>