PasscodeView

<a href="https://www.paypal.me/kpatel2106"> <img src="https://img.shields.io/badge/paypal-donate-yellow.svg" /></a>

PasscodeView is an Android Library to easily and securely authenticate the user with the PIN code or using the fingerprint scanner.

Why❓

• Secure authentication is the key factor in many application (e.g. financial applications). Many application uses PIN-based authentication.

• But Android System doesn't provide any easy to set the view for PIN-based authentication which can tightly integrate and take advantage of fingerprint API introduced in newer versions of android. This limitation led me to work on this project.

• With the use of PasscodeView, you can easily integrate PIN & Fingerprint based authentication in your application.

Features:

This library provides an easy and secure PIN and Pattern based authentication view, which

• It provides access to built-in fingerprint-based authentication if the device supports fingerprint hardware. This handles all the complexities of integrating the fingerprint API with your application.
• It provides error feedback when PIN or pattern entered is wrong.
• Extremely lightweight.
• Supports dynamic PIN sizes for PIN-based authentication. That means you don't have to provide a number of PIN digits at runtime.
• Supports custom authentication logic for PIN and Pattern. That means you can send the PIN or pattern to the server for authentication too.
• It is highly customizable. So that you can match it with your application them. It provides you control over,
  • color and shape of each key. 👉 Guide
  • localized name of each key in pin keyboard. 👉 Guide
  • size of every single key.
  • color and shape of indicators to display a number of digits in the PIN.👉 Guide
  • color and shape of pattern indicators.
  • tactile feedback for key press and authentication success/failure events.

Demo:

Authentication using PIN/Fingerprint

|Success|Fail| |:---:|:---:| |||

|Fingerprint Success|Fingerprint Fail| |:---:|:---:| |||

Pattern based authentication

Here is the link of the demo application. 👉 Demo

How to use this library?

• Gradle Dependency:

  • Add below lines to app/build.gradle file of your project.

  dependencies {
      compile 'com.kevalpatel2106:passcodeview:2.0.0'
  }
  

  • To integrate using maven visit this page.

PIN based authentication:

• 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 which will tell if your pin 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.

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

• 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 key you want to use.

  • There are three built-in key shapes. You can also generate your own key by extending Key class.
    • Round key
    • Rectangle key
    • Square key
  • You can create your custom key using this guide. 👉 Custom key wiki
  • Here is the example for 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));
  

  Different Key Shape

  |Rectangle|Circle|Square| |:---:|:---:|:---:| ||||

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

  • There are three built in key shapes.
    • Round indicator
    • Dot indicator
    • Circle indicator
  • If you want to create custom indicator with the custom shape, see How to create custom indicator?.
  • Here is the example for 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 key names.

  • 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));
  

  Localized Texts

  |English|Hindi| |:---:|:---:| |||

• 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.
          }  
      });
  

Pattern based authentication:

• Add PatternView in your layout file.

  <com.kevalpatel.passcodeview.PatternView
          android:id="@+id/pattern_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:giveTactileFeedback="true"
          app:patternLineColor="@color/colorAccent"
          app:titleTextColor="@android:color/white"/>
  

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

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Pa