# 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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cotter.app/sdk-reference/android/android-sdk-2/customization.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.