PinView Setup

PinView provides application ability to authenticate it using PIN or fingerprint.

• Add PinView in your layout file.

  <com.kevalpatel.passcodeview.PinView
          android:id="@+id/pin_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_below="@id/imageView"
          app:dividerColor="@color/colorPrimaryDark"
          app:fingerprintDefaultText="Scan your finger to unlock application"
          app:fingerprintEnable="true"
          app:fingerprintTextColor="@color/colorAccent"
          app:fingerprintTextSize="@dimen/finger_print_text_size"
          app:titleTextColor="@android:color/white"/>

• Get the instance of the view in your activity/fragment.

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //....
    //...
          
    PinView pinView = (PinView) findViewById(R.id.pin_view);
    //...
  }

• Set the authenticator

  • Set the authenticator which will tell if your pattern is correct or not.
  • The library provides inbuilt PasscodeViewPinAuthenticator. This authenticator will match the pin entered by the user with the correct PIN provided.
  • You can write your custom authenticator to customize the authentication logic.
  • Here is the example with the inbuilt PIN authenticator.

     //Set the authenticator.
     //REQUIRED
     final int[] correctPattern = new int[]{1, 2, 3,4}; 
     pinView.setPinAuthenticator(new PasscodeViewPinAuthenticator(correctPattern));

• Set the PIN length.

  • If you know the number of digits in the PIN you can set it.
  • But if you don't know the size of the PIN in advance you can set it to PinView.DYNAMIC_PIN_LENGTH. By default, if you don't set the size PinView will consider it dynamic PIN length.

    pinView.setPinLength(PinView.DYNAMIC_PIN_LENGTH);

• Set the shape of the pin indicators you want to use.

  • There are two built-in key shapes.
    • Round indicator
    • Dot indicator
  • If you want to create custom indicator with the custom shape, see How to create custom indicator?.
  • You can learn more about other indicators from here.
  • Here is the example of the round indicator.

      //Build the desired indicator shape and pass the theme attributes.
      //REQUIRED
      pinView.setIndicator(new CircleIndicator.Builder(pinView)
              .setIndicatorRadius(R.dimen.indicator_radius)
              .setIndicatorFilledColorResource(R.color.colorAccent)
              .setIndicatorStrokeColorResource(R.color.colorAccent)
              .setIndicatorStrokeWidth(R.dimen.indicator_stroke_width));

• Set the shape of the key you want to use.

  • There are three built-in key shapes.
    • Round key
    • Rectangle key
    • Square key
  • You can create your custom key using this guide. 👉 Custom key wiki
  • Here is the example of the round keys.

      //Build the desired key shape and pass the theme parameters.
      //REQUIRED
      pinView.setKey(new RoundKey.Builder(pinView)
              .setKeyPadding(R.dimen.key_padding)
              .setKeyStrokeColorResource(R.color.colorAccent)
              .setKeyStrokeWidth(R.dimen.key_stroke_width)
              .setKeyTextColorResource(R.color.colorAccent)
              .setKeyTextSize(R.dimen.key_text_size));

• Set key names (Optional).

  • Set the texts to display on different keys. This is an optional step. If you don't set the key names, by default PINView will display English locale digits.
  • If you want to learn more about key name localization visit here.

      //Set the name of the keys based on your locale.
      //OPTIONAL. If not passed key names will be displayed based on English locale.
      pinView.setKeyNames(new KeyNamesBuilder()
            .setKeyOne(this, R.string.key_1)
            .setKeyTwo(this, R.string.key_2)
            .setKeyThree(this, R.string.key_3)
            .setKeyFour(this, R.string.key_4)
            .setKeyFive(this, R.string.key_5)
            .setKeySix(this, R.string.key_6)
            .setKeySeven(this, R.string.key_7)
            .setKeyEight(this, R.string.key_8)
            .setKeyNine(this, R.string.key_9)
            .setKeyZero(this, R.string.key_0));

• Set callback listener to get callbacks when the user is authenticated or authentication fails.

      pinView.setAuthenticationListener(new AuthenticationListener() {
                 @Override
                 public void onAuthenticationSuccessful() {
                     //User authenticated successfully.
                     //Navigate to next screens.
                 }
     
                 @Override
                 public void onAuthenticationFailed() {
                     //Calls whenever authentication is failed or user is unauthorized.
                     //Do something if you want to handle unauthorized user.
                 }
             });
  ``

Screenshots:

Authentication Success	Authentication Fail