Как реализовать OTP View в Android?

OTP View или PinView в Android — это виджет, который позволяет пользователям вводить свой PIN-код, OTP и т. д. Обычно они используются для двухфакторной аутентификации или проверки номера телефона с помощью OTP. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Примечание. Для реализации OtpView необходимо использовать Android 4.1+ (API 16).

Пошаговая реализация

Шаг 1: Создайте новый проект в Android Studio и выберите Java в качестве языка.

Шаг 2. Перейдите к Gradle Scripts > settings.gradle(Project Setting) и добавьте MavenCentral внутрь репозиториев в dependencyResolutionManagement {}.

allprojects {
repositories {
…
mavenCentral()
}
}

Шаг 3: Перейдите к Gradle Scripts > build.gradle(Module:app) и добавьте приведенную ниже зависимость в раздел зависимостей.

implementation ‘io.github.chaosleung:pinview:1.4.4

Теперь обновите версию compileSdk и targetSdk до 33 и синхронизируйте проект, щелкнув параметр «Синхронизировать сейчас» в правом верхнем углу.

android {
compileSdk 33

defaultConfig {
……

targetSdk 33
}

Шаг 4. Перейдите к приложению > res > layout > activity_main.xml и добавьте в этот файл приведенный ниже код.

XML

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

    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">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="OTPView "

        android:textSize="30sp"

        android:textStyle="bold"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"/>

    <com.chaos.view.PinView

        android:id="@+id/pinview"

        app:itemCount="6"

        app:itemWidth="50dp"

        app:itemHeight="50dp"

        android:gravity="center"

        android:layout_marginTop="60dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:itemBackground="@color/white"

        android:layout_gravity="center"

        android:inputType="number"

        android:cursorVisible="true"

        app:hideLineWhenFilled="false"

        app:itemRadius="10dp"

        style="@style/PinWidget.PinView"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        ></com.chaos.view.PinView>



    <Button

        android:id="@+id/show_otp"

        android:layout_width="140dp"

        android:layout_height="60dp"

        android:text="Show OTP"

        app:layout_constraintTop_toBottomOf="@+id/pinview"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_marginTop="20dp"

        ></Button>

</androidx.constraintlayout.widget.ConstraintLayout>

Шаг 5: Перейдите к файлу MainActivity.java и обратитесь к следующему коду. Ниже приведен код файла MainActivity.java.

Java

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 pinView;

    Button button;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // hookers (binding view)

        pinView=findViewById(R.id.pinview);

        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=pinView.getText().toString();

                // Toast to show the OTP Data

                Toast.makeText(MainActivity.this, otp, Toast.LENGTH_SHORT).show();

            }

        });

    }

}