Sefa Kerem
- Apr 9
- 3 min read

Using Pinview in Kotlin

PinView is a PIN view component used in Android applications. This component provides a more visually beautiful and user-friendly experience for the user when entering the PIN.

This article will explain step by step how to create a PIN view using the ChaosLeung/PinView component.

Step 1: Prepare your project To use ChaosLeung/PinView, there are dependencies you need to add to your project first. Add the project to the dependencies section of your build.gradle file like this:

dependencies {
    implementation 'com.chaos.view:pinview:1.4.3'
}

Step 2: Prepare your layout file To design your PIN view, you first need to create a layout file. In this file you will place your PIN skin. The sample layout file below has been prepared to include your PIN view.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.chaos.view.PinView
        android:id="@+id/pinview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:pinBackground="@drawable/pin_background"
        app:pinTextColor="@color/pin_text_color"
        app:pinTextSize="@dimen/pin_text_size"
        app:pinLength="4" />

</RelativeLayout>

In the example above, the PIN view is wrapped with RelativeLayout. The PinView element is your PIN view itself. Additionally, various properties are defined for the properties of the PIN view using app: prefix.

Step 3: Set the properties of the component The properties of the PinView element are defined in XML using app: prefix. For example, the app:pinLength property determines the PIN length. Setting these properties will determine how the user experiences the PIN view. The following features are frequently used:

app:pinLength: Determines the PIN length.
app:pinTextSize: Determines the size of the PIN text.
app:pinTextColor: Sets the PIN text color.
app:pinBackground: Sets the PIN background.

Step 4: Write your Java code After setting the properties of your PIN view, in order to use the PIN view in your Java code, you first need to get a reference using the ID specified in the XML file. For this add the following code in your onCreate() method:

PinView pinView = findViewById(R.id.pinview);

Next, you should add a listener to check whether the PIN has been entered correctly. The following code is an example listener that will check if the PIN has been entered correctly:

pinView.setPinViewEventListener(new PinViewEventListener() {
    @Override
    public void onDataEntered(PinView pinview, boolean fromUser) {
        // Do something
        String pin = pinview.getValue();
        if (pin.equals("1234")) {
            Toast.makeText(MainActivity.this, "PIN doğru", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(MainActivity.this, "PIN yanlış", Toast.LENGTH_SHORT).show();
        }
    }
});

In the above code, a PinViewEventListener is created using the setPinViewEventListener() method and the onDataEntered() method is run when the PIN is entered correctly. The code example checks that the PIN should be "1234" and shows a Toast message.

Step 5: Final steps Your PIN view is now ready! However, you may want to add some additional features. For example, you may want to display the keyboard as the user enters the PIN. To do this, add the following permission to your AndroidManifest.xml file:

<uses-permission android:name="android.permission.VIBRATE"/>

Then add the following code to your onCreate() method to pop up the keyboard:


InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(pinView, InputMethodManager.SHOW_IMPLICIT);

However, you may want to use a different method to check if the PIN was entered correctly. For example, you can use the "onSubmit" method instead of "onDataEntered". The following code example checks whether the PIN has been entered correctly using the onSubmit method:

pinView.setPinViewEventListener(new PinViewEventListener() {
    @Override
    public void onSubmit(PinView pinview, String pin) {
        // Do something
        if (pin.equals("1234")) {
            Toast.makeText(MainActivity.this, "PIN doğru", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(MainActivity.this, "PIN yanlış", Toast.LENGTH_SHORT).show();
        }
    }
});

Finally, you can make any feature or design changes you want. For example, you may want to clear the screen after the PIN is entered. To do this, once the PIN is entered correctly , the PinView needs to be cleared. For this, you can use the following code:

pinView.setPinViewEventListener(new PinViewEventListener() {
    @Override
    public void onSubmit(PinView pinview, String pin) {
        // Do something
        if (pin.equals("1234")) {
            Toast.makeText(MainActivity.this, "PIN doğru", Toast.LENGTH_SHORT).show();
            pinview.clearValue();
        } else {
            Toast.makeText(MainActivity.this, "PIN yanlış", Toast.LENGTH_SHORT).show();
        }
    }
});

In this code example, it is checked whether the PIN has been entered correctly by using the onSubmit() method. If the PIN is correct, a Toast message is shown and the PinView is cleared.

In conclusion, by following the steps above, you can create a PIN view on Android using the ChaosLeung/PinView library. You can customize this view as you wish and check if the PIN was entered correctly.

Using Pinview in Kotlin

Recent Posts