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.
To change the image, add the image in your /drawable directory, and add the following:
Cotter.colors.setSuccessImage(R.drawable.check);
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
For the full list of colors that you can set, see .
To edit the texts, it's the same as the instructions before. See the below.
For the full list of images that you can set, see .