Customization

You can customize your screen texts, colors, images, and buttons.

See a Complete Example below.

Understand the Flow

There are 4 flows:

PinEnrollment: This flow allows the user to register their PIN for the first time, then register their biometrics
PinVerification: This is used to verify the user's biometrics or use PIN.
PinReset : This is used to reset user's pin if they forgot the pin by sending a code to their email or phone number.
PinChange : This is used to change the user's pin if they know what the current pin is.

1. Customize the header title of each screen

Screen names for Pin Enrollment flow: PinEnrollmentEnterPin ,PinEnrollmentReEnterPin
Screen names for Pin Verification flow: PinVerification
Screen names for Pin Reset flow: PinReset , PinResetEnterPin , PinResetReEnterPin
Screen names for Pin Change flow: PinChangeVerifyPin , PinChangeEnterPin , PinChangeReEnterPin

To customize the Header of each screen, call Cotter.strings.setHeaders(<ScreenName>, <YourHeader>).

Do this right after your call Cotter.init, before starting any flow.

Cotter.init(this.getApplicationContext(), "https://www.cotter.app/api/v0",
  getString(R.string.user_id), // user id
  getString(R.string.api_key_id), // api key id
  getString(R.string.api_secret_key)); // api secret key

  // Setting strings for Headers
  Cotter.strings.setHeaders(ScreenNames.PinEnrollmentEnterPin, "Activate PIN");
  Cotter.strings.setHeaders(ScreenNames.PinEnrollmentReEnterPin, "Confirm PIN");
  Cotter.strings.setHeaders(ScreenNames.PinVerification, "Verification");
  Cotter.strings.setHeaders(ScreenNames.PinChangeVerifyPin, "Change PIN");
  Cotter.strings.setHeaders(ScreenNames.PinChangeEnterPin, "New PIN");
  Cotter.strings.setHeaders(ScreenNames.PinChangeReEnterPin, "Confirm New PIN");
  Cotter.strings.setHeaders(ScreenNames.PinReset, "Reset PIN");
  Cotter.strings.setHeaders(ScreenNames.PinResetEnterPin, "Activate New PIN");
  Cotter.strings.setHeaders(ScreenNames.PinResetReEnterPin, "Confirm New PIN");

2. Customize Pin-Enrollment Enter Pin Screen

This is the first screen on the PinEnrollment flow.

To set the text for a specific element on a screen, specify the screen name, the name of the element, and the value.

The syntax is like the following:

Cotter.strings.set___<ScreenName>___Strings(Strings.__<ElementName>__, <ValueYouWant>)

For example, if you want to update the Title to "Enter PIN":

Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.Title, "Enter PIN");

Put this below Cotter.init before you start any flow.

Advanced Customization

Setting the colors

As shown in the picture, there are 3 main colors that you can set:

ColorAccent
ColorPrimary
ColorDanger

Cotter.colors.setColorPrimary("#5E9051");
Cotter.colors.setColorAccent("#53228B");
Cotter.colors.setColorDanger("#B00020");

For the full list of colors that you can set, see Setting Colors and Images.

Error Text Views

There are 3 different places where errors may pop up:

PinEnrollmentEnterPin: Error happens when the PIN is too weak, with the error Strings.ErrorCombination. To update:

Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.ErrorCombination, "Your PIN is too weak!");

PinEnrollmentReEnterPin: Error happens when the PIN is not the same as the PIN entered originally, with the error Strings.ErrorNoMatch. To update:

Cotter.strings.setPinEnrollmentReEnterPinStrings(Strings.ErrorNoMatch, "Your PINs don't match");

PinVerification: Error happens when the user entered an invalid PIN, with the error Strings.ErrorInvalid. To update:

Cotter.strings.setPinVerificationStrings(Strings.ErrorInvalid, "Invalid PIN");

3. Customize PinEnrollmentSuccess page

To change the image, add the image in your /drawable directory, and add the following:

Cotter.colors.setSuccessImage(R.drawable.check);

To edit the texts, it's the same as the instructions before. See the Complete Example below.

For the full list of images that you can set, see Setting Colors and Images.

4. Customize PinVerification and PinReset Screen

// PinVerification
Cotter.strings.setPinVerificationStrings(Strings.ForgotPin, "Lupa PIN");

// PinReset
Cotter.strings.setPinReset(Strings.Title, "Verification Code");
Cotter.strings.setPinReset(Strings.Subtitle, "We have sent the code to");
Cotter.strings.setPinReset(Strings.ResendCode, "Reset Code");
Cotter.strings.setPinReset(Strings.ErrorInvalid, "The code you entered is wrong");

4. Customize Alert Dialogs.

There are 2 places where an AlertDialog will pop-up:

PinEnrollmentEnterPin: AlertDialog pop up when the user clicks 'X' to exit the screen.
PinVerification: On a very rare occasion, the signature generated by the biometrics may be invalid. In which case, the AlertDialog will pop up.

To update the AlertDialog strings on the PinEnrollmentEnterPin screen:

Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogTitle, "Are you sure you don't want to setup PIN?");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogSubtitle, "Setting up your PIN is important to secure your account.");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogPositiveButton, "Setup PIN");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogNegativeButton, "Next Time");

5. Customize Biometric Prompt

There are 2 screens where the BiometricPrompt will pop up:

PinEnrollmentSuccess: when Pin Enrollment is successful, user can then enroll their biometrics
PinVerification: When user's default authentication method is biometrics, user will be prompted to verify their biometrics when an authentication is required.

Complete Example

See the full list of API for:

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // Initialize Cotter
        Cotter.init(this.getApplicationContext(), "https://www.cotter.app/api/v0","<your user id>", "<your api key id>", "<your api secret key>");
        
        // ------ Setting strings for Headers ------ //
        Cotter.strings.setHeaders(ScreenNames.PinEnrollmentEnterPin, "Aktivasi PIN");
        Cotter.strings.setHeaders(ScreenNames.PinEnrollmentReEnterPin, "Konfirmasi PIN");
        Cotter.strings.setHeaders(ScreenNames.PinVerification, "Verifikasi");
        Cotter.strings.setHeaders(ScreenNames.PinChangeVerifyPin, "Ganti PIN");
        Cotter.strings.setHeaders(ScreenNames.PinChangeEnterPin, "PIN Baru");
        Cotter.strings.setHeaders(ScreenNames.PinChangeReEnterPin, "Konfirmasi PIN Baru");
        Cotter.strings.setHeaders(ScreenNames.PinReset, "Reset PIN");
        Cotter.strings.setHeaders(ScreenNames.PinResetEnterPin, "Aktivasi PIN Baru");
        Cotter.strings.setHeaders(ScreenNames.PinResetReEnterPin, "Konfirmasi PIN Baru");
       

        // ----- SETTING STRINGS FOR PIN VERIFICATION -----//
        // Pin Verification page
        Cotter.strings.setPinVerificationStrings(Strings.Title, "Masukkan PIN");
        Cotter.strings.setPinVerificationStrings(Strings.ForgotPin, "Lupa PIN");
        Cotter.strings.setPinVerificationStrings(Strings.ErrorInvalid, "PIN tidak sesuai.");
        // Biometric prompt
        Cotter.strings.setPinVerificationStrings(Strings.BiometricTitle, "Verifikasi");
        Cotter.strings.setPinVerificationStrings(Strings.BiometricSubtitle,
                "Sentuh sensor sidik jari untuk melanjutkan");
        Cotter.strings.setPinVerificationStrings(Strings.BiometricNegativeButton, "Input PIN");
        // Alert dialog when biometric signature is not valid
        Cotter.strings.setPinVerificationStrings(Strings.DialogTitle, "Biometric kamu tidak bisa diverifikasi");
        Cotter.strings.setPinVerificationStrings(Strings.DialogSubtitle, "Kamu boleh masukkan PIN atau coba lagi.");
        Cotter.strings.setPinVerificationStrings(Strings.DialogPositiveButton, "Input PIN");
        Cotter.strings.setPinVerificationStrings(Strings.DialogNegativeButton, "Coba lagi");
        // ----- END SETTING STRINGS FOR PIN VERIFICATION -----//


        // Setting colors
        Cotter.colors.setColorPrimary("#5E9051");
        Cotter.colors.setColorAccent("#53228B");
        Cotter.colors.setColorDanger("#B00020");
}

public void openPinEnrollment(View view) {
    Cotter.PinEnrollment.startFlow(view, <CallbackScreen>.class, "PIN_ENROLLMENT");
}

public void openPinVerification(View view) {
    Cotter.user.setUserInformation("Emily", "hello@gmail.com", "EMAIL");
    Cotter.PinVerification.startFlow(view, <CallbackScreen>.class, "LOGIN");
}

Screen Names Reference

PreviousAdvanced Methods NextSetting Strings

Last updated 4 years ago