How to Implement PIN View in Android? || How to Implement OTP View in Android?

Step-by-Step Implementation

Step 1: Create a new project in Android Studio and select Java as the language. If you are new to Android refer to How to Create/Start a New Project in Android Studio.

Step 2: Navigate to Gradle Scripts > settings.gradle(Project Setting) and add the MavenCentral inside repositories in dependencyResolutionManagement {}.

allprojects {
repositories {
…
mavenCentral()
}
}

Step 3: Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.

implementation ‘io.github.chaosleung:pinview:1.4.4’

Now update compileSdk version and targetSdk to 33 and Sync the project by clicking on Sync Now option appearing in the top right corner.

android {
compileSdk 33
defaultConfig {
……
targetSdk 33
}

Step 4: Navigate to the app > res > layout > activity_main.xml and add the below code to that file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:layout_marginTop="30dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp">
  <com.chaos.view.PinView
    android:layout_marginTop="10dp"
    android:id="@+id/firstPinView"
    style="@style/PinWidget.PinView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:cursorVisible="true"
    android:textColorHint="@color/black"
    android:inputType="number"
    android:itemBackground="@drawable/bg_pin"
    android:minHeight="32dp"
    android:textColor="@color/black"
    android:textSize="18sp"
    android:textStyle="bold"
    android:state_selected="true"
    app:cursorColor="@color/Orange"
    app:cursorWidth="2dp"
    app:hideLineWhenFilled="false"
    app:itemCount="4"
    app:itemHeight="60dp"
    app:itemRadius="5dp"
    app:itemSpacing="4dp"
    app:itemWidth="75dp"
    app:lineColor="@drawable/state_selected"
    app:lineWidth="2dp"
    android:selectAllOnFocus="true"
    app:viewType="rectangle" />
 
</androidx.constraintlayout.widget.ConstraintLayout

This is My Drawable bg Pin..
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/Orange"
        android:width="0.5dp"/>
    <solid android:color="@color/white"/>
    <corners android:radius="5dp"/>
</shape>  This is My Drawable state_selected..<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:color="@color/Orange"/>
    <item android:state_focused="true" android:color="@color/black"/>
    <item android:state_pressed="true" android:color="@color/Orange"/>

    <item android:color="@color/black"/>

</selector>.. Step 5: Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. 
package com.example.otp;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
  
import com.chaos.view.PinView;
  
public class MainActivity extends AppCompatActivity {
  
    PinView firstPinView;
    Button button;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // hookers (binding view)
        firstPinView=findViewById(R.id.firstPinView);
  
        button=findViewById(R.id.show_otp);
  
        // setting onClickListener on Button
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
  
                // getting the PinView data
                String otp=firstPinView.getText().toString();
  
                // Toast to show the OTP Data
                Toast.makeText(MainActivity.this, otp, Toast.LENGTH_SHORT).show();
  
            }
        });
    }
}
 
  

Search This Blog

Www.akalert.com