How to Implement OTP View in Android?

An OTP View in Android is a widget that allows users to enter their PIN, OTP, and so on. They are primarily used for two-factor authentication or phone number verification via OTP. A sample movie is provided below to give you an idea of what we are going to do in this tutorial.

In this article, you will learn how to create your otp activity in Android. So let’s take example of otp activity codes  in Android of Mobile application. 

Example of  OTP

                                            

add below dependencies
 implementation(group = "com.github.mukeshsolanki.android-otpview-pinview", name = "otpview", version = "3.1.0")
Step-by-Step Implementation

 Step 1: Create a New Project in Android ​studio (File >new  project). 


Step 2: Create an activity_main.xml file in your layout folder . path (res>layout)

Implement the same in​voke the following code inside activity_main.xml file. 

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

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/appCompatTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="48dp"
        android:layout_marginTop="96dp"
        android:text="Enter OTP"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.mukeshsolanki.OtpView
        android:id="@+id/otp_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:inputType="text"
        android:itemBackground="@drawable/round_corner"
        android:padding="10dp"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        app:OtpHideLineWhenFilled="true"
        app:OtpItemCount="5"
        app:OtpItemSpacing="10dp"
        app:OtpLineColor="#6F1313"
        app:OtpState_filled="true"
        app:OtpViewType="none"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.428"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/appCompatTextView"
        tools:ignore="MissingClass,MissingConstraints" />

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:text="submit"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/otp_view" />

 </androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create an MainActivity.kt file in your package folder .

Implement the same invoke the fol​lowing code inside MainActivity.kt file

 import android.annotation.SuppressLint
 import android.os.Bundle
 import android.widget.TextView
 import android.widget.Toast
 import androidx.appcompat.app.AppCompatActivity

 class MainActivity : AppCompatActivity() {

    @SuppressLint("MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val otp_view = findViewById<TextView>(R.id.otp_view)
        val btnsubmit = findViewById<TextView>(R.id.btnsubmit)
        btnsubmit.setOnClickListener {
            Toast.makeText(this@MainActivity, otp_view.text, Toast.LENGTH_SHORT).show()
        }

    }
 }

Step 4 : Output of above example.

                                                              

Happy coding!

365Bloggy July 18, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 924
Zoom In and Out to TextView in Android
0 324
How to underline text in textview
0 261
Shine Effect in Android
0 207
How to Create Marquee Text in Android?
0 180
Our blogs
Archive