Android SDK UI Customization API

UI and Key Mapping Reference

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);

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");

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~C47

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_subheadβœ…βœ…βœ…circlepw_text_auxiliarycirclepw_body2
C2circlepw_pin_digit_configβŒβŒβŒβœ…circlepw_text_maincirclepw_pinDigitTextNormal
circlepw_main_bt_backgroundSucceed
circlepw_errorFailed
C3circlepw_hide_pincirclepw_hide_pinβœ…βœ…βœ…circlepw_text_actioncirclepw_actionTextNormal
circlepw_text_action_pressedPressed
C4circlepw_show_pincirclepw_show_pinβœ…βœ…βœ…circlepw_text_actioncirclepw_actionTextNormal
circlepw_text_action_pressedPressed
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_headlineβœ…βœ…βœ…circlepw_text_maincirclepw_heading3
C7circlepw_confirm_pincode_subheadcirclepw_confirm_pincode_subheadβœ…βœ…βœ…circlepw_text_auxiliarycirclepw_body2
C8circlepw_enter_pincode_subheadcirclepw_enter_pincode_subheadβœ…βœ…βœ…circlepw_text_auxiliarycirclepw_body2
c9circlepw_enter_pincode_forgot_pincirclepw_enter_pincode_forgot_pinβœ…βœ…βœ…circlepw_text_actioncirclepw_actionText
C10circlepw_security_intros_descriptioncirclepw_security_intros_descriptionβœ…βœ…βœ…circlepw_text_auxiliary2circlepw_body2
C11circlepw_continuecirclepw_continueβœ…βœ…βœ…circlepw_main_bt_textcirclepw_mainButtonTextNormal
circlepw_main_bt_text_pressedPressed
circlepw_disabled_main_bt_textDisabled
C12circlepw_security_questions_titlecirclepw_security_questions_titleβœ…βœ…βœ…circlepw_text_maincirclepw_toolbarTitle
C13circlepw_security_questions_required_markcirclepw_security_questions_required_markβœ…βœ…βœ…circlepw_errorcirclepw_metadata1
C14circlepw_security_questions_question_input_configβŒβŒβœ…βœ…circlepw_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_headerβœ…βœ…βœ…circlepw_text_auxiliarycirclepw_body2
C17circlepw_security_questions_answer_input_configβŒβŒβœ…βœ…circlepw_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_headerβœ…βœ…βœ…circlepw_text_auxiliarycirclepw_body2
C20circlepw_security_questions_answer_hint_input_configβŒβŒβœ…βœ…circlepw_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_nextβœ…βœ…βœ…circlepw_main_bt_textcirclepw_mainButtonTextNormal
circlepw_main_bt_text_pressedPressed
circlepw_disabled_main_bt_textDisabled
C24circlepw_select_question_titlecirclepw_select_question_titleβœ…βœ…βœ…circlepw_text_maincirclepw_toolbarTitle
C25circlepw_select_question_item_configβŒβŒβœ…βœ…circlepw_text_maincirclepw_body1
C26circlepw_security_summary_titlecirclepw_security_summary_titleβœ…βœ…βœ…circlepw_text_maincirclepw_toolbarTitle
C27circlepw_question_labelcirclepw_question_labelβœ…βœ…βœ…circlepw_text_auxiliary2circlepw_body2
C28circlepw_security_summary_question_value_configβŒβŒβœ…βœ…circlepw_text_summarycirclepw_body2
C29circlepw_answer_labelcirclepw_answer_labelβœ…βœ…βœ…circlepw_text_auxiliary2circlepw_body2
C30circlepw_security_summary_answer_value_configβŒβŒβœ…βœ…circlepw_text_summarycirclepw_caption2
C31circlepw_hint_labelcirclepw_hint_labelβœ…βœ…βœ…circlepw_text_auxiliary2circlepw_body2
C32circlepw_security_summary_hint_value_configβŒβŒβœ…βœ…circlepw_text_summarycirclepw_body2
C33circlepw_security_confirm_titlecirclepw_security_confirm_titleβœ…βœ…βœ…circlepw_text_maincirclepw_toolbarTitle
C34circlepw_security_confirm_headlinecirclepw_security_confirm_headlineβœ…βœ…βœ…circlepw_text_maincirclepw_heading4
C35circlepw_security_confirm_input_headlinecirclepw_security_confirm_input_headlineβœ…βœ…βœ…circlepw_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_configβŒβŒβœ…βœ…circlepw_text_maincirclepw_body1
C37-1circlepw_security_confirm_input_matchcirclepw_security_confirm_input_matchβœ…βŒβŒβŒβŒThe 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_configβŒβŒβœ…βœ…circlepw_text_main2circlepw_body1
C40circlepw_hint_tagcirclepw_hint_tagβœ…βœ…βœ…circlepw_tag_textcirclepw_metadata2
C41circlepw_recover_pincode_answer_hint_configβŒβŒβœ…βœ…circlepw_tag_following_textcirclepw_metadata1
C42circlepw_recover_pincode_answer_input_headerβœ…βœ…βœ…βœ…circlepw_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_configβŒβŒβœ…βœ…circlepw_text_maincirclepw_body1
C45circlepw_confirmcirclepw_confirmβœ…βœ…βœ…circlepw_main_bt_textcirclepw_mainButtonText
circlepw_main_bt_text_pressed
circlepw_disabled_main_bt_text

Error Messages

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

Possible display locationApiError.ErrorCodeDefault ValueNote
C5, C38unknown(-1)Unknown error
success(0)Success
C5, C38apiParameterMissing(1)API parameter missing
C5, C38apiParameterInvalid(2)API parameter invalid
C5, C38forbidden(3)Forbidden
C5, C38unauthorized(4)Unauthorized
C5, C38retry(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, C38invalidPhone(15)Invalid phone number '%s', format should be in E.164.
C5walletIdNotFound(156001)
C5tokenIdNotFound(156002)
C5transactionIdNotFound(156003)
C5entityCredentialNotFound(156004)
C5walletSetIdNotFound(156005)
userAlreadyExisted(155101)user already existed
userNotFound(155102)user not found
C5, C38userTokenNotFound(155103)user token not found
C5, C38userTokenExpired(155104)user token expired
C5, C38invalidUserToken(155105)invalid user token
C5userWasInitialized(155106)user was initialized
C5userHasSetPin(155107)user has set pin
C38userHasSetSecurityQuestion(155108)user has set security question
C5, C38userWasDisabled(155109)user was disabled
C5userDoesNotSetPinYet(155110)user does not set pin yet
C38userDoesNotSetSecurityQuestionYet(155111)user does not set security questions yet
C5incorrectUserPin(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
C5invalidApproveContent(155117)invalid approve content
C5, C38invalidSecretKey(155118)invalid secret key
C5userPinLocked(155119)Just display circlepw_pin_lock_period_template (C5-2)
C38securityAnswersLocked(155120)The answers you entered are incorrect.
C5walletIsFrozen(155501)Wallet is Frozen
C5maxWalletLimitReached(155502)Max wallet limit reachedΒ 
C5walletSetIdMutuallyExclusive(155503)WalletSetId can not be used together with blockchain and address filter
C5metadataUnmatched(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.

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_show_pin">Show PIN</string>
    <string name="circlepw_hide_pin">Hide PIN</string>
    <string name="circlepw_continue">Continue</string>
    <string name="circlepw_next">Next</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>

    <!--    [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>

    <!-- [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>
</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~D5

D Index Table

#Resource.IconImageView size (dp)
widthheight
D1securityIntroMain144144
D2selectCheckMark2424
D3dropdownArrow4040
D4errorInfo2121
D5securityConfirmMain144144

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 Intros

Security Questions

Security Summary

Security Confirm

Recover PIN Code

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#0073C3
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#3D3D3DPIN dot filled color
F27circlepw_background#FFFFFFGeneral background color
F28circlepw_security_confirm_main_bg#E9EEFE
F29circlepw_disabled_input_background#F5F5F5Disabled input field background color

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_success">#0073C3</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">#3D3D3D</color>
    <color name="circlepw_background">#FFFFFF</color>
    <color name="circlepw_security_confirm_main_bg">#E9EEFE</color>
    <color name="circlepw_disabled_input_background">#F5F5F5</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

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_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>

</resources>

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_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>

</resources>