Android

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

</resources>

<?xml version="1.0" encoding="utf-8"?>
<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>
</resources>

<resources>
    <style name="circlepw_heading3">
        <item name="android:fontFamily">@font/avenir_heavy</item>
        <item name="android:fontWeight" tools:targetApi="o">600</item>
        <item name="android:textSize">24sp</item>
    </style>
    <style name="circlepw_heading4">
        <item name="android:fontFamily">@font/avenir_heavy</item>
        <item name="android:fontWeight" tools:targetApi="o">600</item>
        <item name="android:textSize">20sp</item>
    </style>
</resources>

<resources>
    <dimen name="circlepw_bottom_bt_margin_top">10dp</dimen>
    <dimen name="circlepw_intro_title_margin_bottom">24dp</dimen>
    <dimen name="circlepw_intro_custom_grab_icon_size">48dp</dimen>
</resources>

// Set endpoint and app ID
try {
    WalletSdk.init(getApplicationContext(), new WalletSdk.Configuration(endpoint, appId));
} catch (Throwable e){
    e.printStackTrace();
    return;
}

// setViewSetterProvider
WalletSdk.setViewSetterProvider(new MyViewSetterProvider());
// setLayoutProvider
WalletSdk.setLayoutProvider(new MyLayoutProvider(getApplicationContext()));
// Regester EventListener
WalletSdk.addEventListener(new EventListener() {
    @Override
       public void onEvent(ExecuteEvent event) {
           switch (event){
                  case forgotPin:
		     startActivity(forgotPinIntent);  
                  break;
           }
       }
});

// setSecurityQuestion
SecurityQuestion[] questions = new SecurityQuestion[]{
                    new SecurityQuestion("What is your father’s middle name?"),
                    new SecurityQuestion("What is your favorite sports team?"),
                    new SecurityQuestion("What is your mother’s maiden name?"),
                    new SecurityQuestion("What is the name of your first pet?"),
                    new SecurityQuestion("What is the name of the city you were born in?"),
                    new SecurityQuestion("What is the name of the first street you lived on?"),
                    new SecurityQuestion("When is your father’s birthday?", SecurityQuestion.InputType.datePicker)};
WalletSdk.setSecurityQuestions(questions);

// Execute
WalletSdk.execute(getActivity(), userToken, encryptionKey, 
          new String[]{challengeId}, 
          new Callback<ExecuteResult>() {
                @Override
                public boolean onError(Throwable error) {
if(error instanceof ApiError){
                              ApiError apiError = (ApiError) error;
                              if(apiError.getCode() == ApiError.ErrorCode.userCanceled){
				// App won't handle next step, SDK finishes the Activity.
                                  return false;                         
     }
                        	     startActivity(errorUiIntent);  
			     // App will handle next step, SDK keeps the Activity.
                               return true; 
                          }

                }


                @Override
                public void onResult(ExecuteResult result) {
  // success
                     }
                });

// Extend LayoutProvider and override
class MyLayoutProvider extends LayoutProvider {
        Context context;
        Typeface typeface;
        int color;
        public MyLayoutProvider(Context context) {
            this.context = context;
        }

        @Override
        public TextConfig getTextConfig(String key) {
            switch (key){
                case Resource.Key.circlepw_security_intros_description:
                    typeface = ResourcesCompat.getFont(context, R.font.en);
                    color = Color.parseColor("#105AAB");
                    return new TextConfig("customized description", color, typeface);
            }
            return super.getTextConfig(key);
        }


@Override
public IconTextConfig[] getIconTextConfigs(Resource.IconTextsKey key) {
            switch (key){
                case securityConfirmationItems: // SQ confirmation introduction items
                    return new IconTextConfig[]{
                            new IconTextConfig(
                                    new LocalImageSetter(R.drawable.intro_item0_icon),
                                    new TextConfig("This is the only way to recover my account access. ")),
                            new IconTextConfig(
                                    new RemoteImageSetter(R.drawable.error, "https://path/icon2.svg"),
                                    new TextConfig("Circle won’t store my answers so it’s my responsibility to remember them.")),
                            new IconTextConfig(
                                    new RemoteImageSetter(R.drawable.error, "https://path/icon3.svg"),
                                    new TextConfig("I will lose access to my wallet and my digital assets if I forget my answers. "))
                    };
}
   return super.getIconTextConfigs(key);
       }
@Override
        public TextConfig[] getTextConfigs(Resource.TextsKey key) {
            switch (key){
                case securityQuestionHeaders:
                    return new TextConfig[]{
                            new TextConfig("Choose your 1st question"),
                            new TextConfig("Choose your 2nd question")
                    };
                case securitySummaryQuestionHeaders:
                    return new TextConfig[]{
                            new TextConfig("1st Question"),
                            new TextConfig("2nd Question")
                    };
                case newPinCodeHeadline:
                case enterPinCodeHeadline:
                    return new TextConfig[]{
                            new TextConfig("Enter your "),
                            new TextConfig("PIN", getHeadingColor(), null),
                    };
                case securityIntroHeadline:
                    return new TextConfig[]{
                            new TextConfig("Set up your "),
                            new TextConfig("Recovery Method", getHeadingColor(), null),
                    };
            }
            return super.getTextConfigs(key);
        }

        private int getHeadingColor(){
              return Color.parseColor("#0073C3");
        }

        @Override
        public String getErrorString(ApiError.ErrorCode code) {
            switch (code){
                case userCanceled:
                    return context.getString(R.string.user_canceled);
            }
            return super.getErrorString(code);
        }

        @Override
        public String getDateFormat(){
            return Resource.DateFormat.MMDDYYYY_SLASH; // "​​MM/DD/YYYY"
        }

        @Override
        public boolean isDebugging(){
            return BuildConfig.DEBUG;
        }

    }

// Extend ResourceProvider and override
    class MyViewSetterProvider extends ViewSetterProvider{

        @Override
        public IToolbarSetter getToolbarImageSetter(Resource.ToolbarIcon type) {
            switch (type){
                case back:
                    return new LocalToolbarImageSetter(R.drawable.ic_back);
                case close:
                    return new RemoteToolbarImageSetter(R.drawable.error, "https://path/close.svg");
            }
            return super.getToolbarImageSetter(type);
        }
	@Override
        public IImageViewSetter getImageSetter(Resource.Icon type) {
            switch (type){
                case securityIntroMain:
                    return new LocalImageSetter(R.drawable.main);
                case selectCheckMark:
                    return new RemoteImageSetter(R.drawable.error, "https://path/check.svg");
                case dropdownArrow:
                    return new RemoteImageSetter(R.drawable.error, "https://path/arrow.svg");
                case errorInfo:
                    return new RemoteImageSetter(R.drawable.error, "https://path/errorinfo.svg");
                case securityConfirmMain:
                    return new RemoteImageSetter(R.drawable.error, "https://path/main2.svg");
            }
            return super.getImageSetter(type);
        }
    }

// Set endpoint and app ID
try {
    WalletSdk.init(getApplicationContext(), new WalletSdk.Configuration(endpoint, appId));
} catch (Throwable e){
    e.printStackTrace();
    return;
}

WalletSdk.init(getApplicationContext(), new WalletSdk.Configuration(endpoint, appId));
// setViewSetterProvider
WalletSdk.setViewSetterProvider(new MyViewSetterProvider());
// setLayoutProvider
WalletSdk.setResourceProvider(new MyLayoutProvider(getApplicationContext()));
// Regester EventListener
WalletSdk.addEventListener(new EventListener() {
    @Override
       public void onEvent(ExecuteEvent event) {
           switch (event){
                  case forgotPin:
		     startActivity(forgotPinIntent);  
                  break;
           }
       }
});

// setSecurityQuestion
SecurityQuestion[] questions = new SecurityQuestion[]{
                    new SecurityQuestion("What was your childhood nickname?"),
                    new SecurityQuestion("What is the name of your favorite childhood friend?"),
                    new SecurityQuestion("In what city or town did your mother and father meet?"),
                    new SecurityQuestion("What is the middle name of your oldest child?"),
                    new SecurityQuestion("When is your birthday?", SecurityQuestion.InputType.datePicker)};
WalletSdk.setSecurityQuestions(questions);

// Execute
WalletSdk.execute(getActivity(), userToken, encryptionKey, 
          new String[]{challengeId}, 
          new Callback<ExecuteResult>() {
                @Override
                public boolean onError(Throwable error) {
if(error instanceof ApiError){
                              ApiError apiError = (ApiError) error;
                              if(apiError.getCode() == ApiError.ErrorCode.userCanceled){
				// App won't handle next step, SDK finishes the Activity.
                                  return false;                         
     }
                        	     startActivity(errorUiIntent);  
			     // App will handle next step, SDK keeps the Activity.
                               return true; 
                          }

                }


                @Override
                public void onResult(ExecuteResult result) {
  // success
                     }
                });

// Extend LayoutProvider and override
class MyLayoutProvider extends LayoutProvider {
        Context context;
        Typeface typeface;
        int color;
        public MyLayoutProvider(Context context) {
            this.context = context;
        }

        @Override
        public TextConfig getTextConfig(String key) {
            switch (key){
                case Resource.Key.circlepw_security_intros_description:
                    typeface = ResourcesCompat.getFont(context, R.font.en);
                    color = Color.parseColor("#105AAB");
                    return new TextConfig("customized description", color, typeface);
            }
            return super.getTextConfig(key);
        }


@Override
public IconTextConfig[] getIconTextConfigs(Resource.IconTextsKey key) {
            switch (key){
                case securityConfirmationItems: // SQ confirmation introduction items
                    return new IconTextConfig[]{
                            new IconTextConfig(
                                    new LocalImageSetter(R.drawable.intro_item0_icon),
                                    new TextConfig("This is the only way to recover my account access. ")),
                            new IconTextConfig(
                                    new RemoteImageSetter(R.drawable.error, "https://path/icon2.svg"),
                                    new TextConfig("Circle won’t store my answers so it’s my responsibility to remember them.")),
                            new IconTextConfig(
                                    new RemoteImageSetter(R.drawable.error, "https://path/icon3.svg"),
                                    new TextConfig("I will lose access to my wallet and my digital assets if I forget my answers. "))
                    };
}
   return super.getIconTextConfigs(key);
       }
@Override
        public TextConfig[] getTextConfigs(Resource.TextsKey key) {
            switch (key){
                case securityQuestionHeaders:
                    return new TextConfig[]{
                            new TextConfig("Choose your 1st question"),
                            new TextConfig("Choose your 2nd question"),
                            new TextConfig("Choose your 3rd question")
                    };
                case securitySummaryQuestionHeaders:
                    return new TextConfig[]{
                            new TextConfig("1st Question"),
                            new TextConfig("2nd Question"),
                            new TextConfig("3rd Question")
                    };
                case enterPinCodeHeadline:
                    return new TextConfig[]{
                            new TextConfig("Enter your "),
                            new TextConfig("Web3 PIN", getGradientColors(), getGradientTypeface()),
                    };
                case securityIntroHeadline:
                    return new TextConfig[]{
                            new TextConfig("Set up your "),
                            new TextConfig("Recovery Method", getGradientColors(), getGradientTypeface()),
                    };
                case newPinCodeHeadline:
                    return new TextConfig[]{
                            new TextConfig("Enter your new "),
                            new TextConfig("Web3 PIN", getGradientColors(), getGradientTypeface()),
                    };
            }
            return super.getTextConfigs(key);
        }

private int[] getGradientColors(){
            return new int[]{
                    Color.parseColor("#00B14F"),
                    Color.parseColor("#23B64B"),
                    Color.parseColor("#35BA47"),
                    Color.parseColor("#43BE43"),
                    Color.parseColor("#4FC23F"),
                    Color.parseColor("#59C53C"),
                    Color.parseColor("#62C838"),
                    Color.parseColor("#6ACA34"),
                    Color.parseColor("#71CD31"),
                    Color.parseColor("#77CF2D"),
                    Color.parseColor("#7DD02A"),
                    Color.parseColor("#82D228"),
                    Color.parseColor("#85D325"),
                    Color.parseColor("#88D424"),
                    Color.parseColor("#8AD522"),
                    Color.parseColor("#8CD521"),
                    Color.parseColor("#8CD521"),
            };
        }
        private Typeface getGradientTypeface(){
            return ResourcesCompat.getFont(context, R.font.en);
        }

        @Override
        public String getErrorString(ApiError.ErrorCode code) {
            switch (code){
                case userCanceled:
                    return context.getString(R.string.user_canceled);
            }
            return super.getErrorString(code);
        }

        @Override
        public String getDateFormat(){
            return Resource.DateFormat.MMDDYYYY_SLASH; // "​​MM/DD/YYYY"
        }

        @Override
        public boolean isDebugging(){
            return BuildConfig.DEBUG;
        }

    }

// Extend ResourceProvider and override
    class MyViewSetterProvider extends ViewSetterProvider{

        @Override
        public IToolbarSetter getToolbarImageSetter(Resource.ToolbarIcon type) {
            switch (type){
                case back:
                    return new LocalToolbarImageSetter(R.drawable.ic_back);
                case close:
                    return new RemoteToolbarImageSetter(R.drawable.error, "https://path/close.svg");
            }
            return super.getToolbarImageSetter(type);
        }
	@Override
        public IImageViewSetter getImageSetter(Resource.Icon type) {
            switch (type){
                case securityIntroMain:
                    return new LocalImageSetter(R.drawable.main);
                case selectCheckMark:
                    return new RemoteImageSetter(R.drawable.error, "https://path/check.svg");
                case dropdownArrow:
                    return new RemoteImageSetter(R.drawable.error, "https://path/arrow.svg");
                case errorInfo:
                    return new RemoteImageSetter(R.drawable.error, "https://path/errorinfo.svg");
                case securityConfirmMain:
                    return new RemoteImageSetter(R.drawable.error, "https://path/main2.svg");
            }
            return super.getImageSetter(type);
        }
    }