# Customization You can customize your screen texts, colors, images, and buttons. See a [Complete Example](#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(, )`. {% hint style="info" %} Do this right after your call `Cotter.init`, **before starting any flow**. {% endhint %} ```java 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. ![PinEnrollment Flow](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M7p1OJYo5UogGi32Sr0%2F-M7p2NQtmiJhD3CLR3or%2FPinEnrollmentFlow.png?alt=media\&token=99a9ba48-82e4-45e5-bb54-c5fd165a247d) 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: ```java Cotter.strings.set______Strings(Strings.____, ) ``` For example, if you want to **update the Title to "Enter PIN"**: ```java Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.Title, "Enter PIN"); ``` {% hint style="danger" %} Put this **below Cotter.init** before you start any flow. {% endhint %} ### Advanced Customization #### Setting the colors As shown in the picture, there are 3 main colors that you can set: * `ColorAccent` * `ColorPrimary` * `ColorDanger` ```java 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](https://docs.cotter.app/sdk-reference/android/styling#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: ```java 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: ```java 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: ```java 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: ```java Cotter.colors.setSuccessImage(R.drawable.check); ``` To edit the texts, it's the same as the instructions before. See the [Complete Example](#complete-example) below. For the full list of images that you can set, see [Setting Colors and Images](https://docs.cotter.app/sdk-reference/android/styling#setting-colors-and-images). ### 4. Customize PinVerification and PinReset Screen ![PinVerification and PinReset screen](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M3Kt1em1hZiO7bDo7HY%2F-M3Kuep-ncJie4aCOVCh%2Fimage.png?alt=media\&token=53e74fa7-3d3c-435f-a56d-9e33984a04a6) ```java // 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: ```java 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: * [Setting strings](https://docs.cotter.app/sdk-reference/android/android-sdk-2/setting-strings) * [Setting colors and images](https://docs.cotter.app/sdk-reference/android/styling#setting-colors-and-images) {% code title="MainActivity.java" %} ```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","", "", ""); // ------ 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, .class, "PIN_ENROLLMENT"); } public void openPinVerification(View view) { Cotter.user.setUserInformation("Emily", "hello@gmail.com", "EMAIL"); Cotter.PinVerification.startFlow(view, .class, "LOGIN"); } ``` {% endcode %} ## Screen Names Reference ![Pin Enrollment Flow](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M3K2STqydA_7T7JH2nG%2F-M3KCJaqQ9yvoSrSXzDy%2Fimage.png?alt=media\&token=0f29dc5b-82ea-465e-ba31-215dafa20ed3) ![](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M3K2STqydA_7T7JH2nG%2F-M3KCTmJtMnPbda6Ref8%2Fimage.png?alt=media\&token=8387041c-4326-4756-bcbd-4a634f005d65) ![](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M3K2STqydA_7T7JH2nG%2F-M3KCXPphXnc18z3PYcw%2Fimage.png?alt=media\&token=aff4dce0-070a-4ceb-8210-00ed2a468e92) ![](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M3KEGZWhi-of63gS9i1%2F-M3KENDAERQnAQkQXYPI%2Fimage.png?alt=media\&token=74bc051d-23d5-42cf-89a9-c10ffa272649)