MukeshOtpView

Mukesh Rajput

Hello Friends
This is a OTP View dependency for android project. Simply you can add this library in your project and design accroding to your requirements.

Output of all OTP views

In a image shows all OTP views and you can check a example code from source code. Simply you can dawnload a github project or open the Main Activity class and xml file.

How to integrate into your app?

  Step 1. Add the JitPack repository to your build file. Add it in your root build.gradle at the end of repositories:

allprojects {
	  repositories {
	  	...
	  	maven { url 'https://jitpack.io' }
	  }
  }

Step 2. Add the dependency

dependencies {
        implementation 'com.github.rajputmukesh748:MukeshOtpView:1.0.0'
  }

Source Code

Simple OTP View

<com.mukesh.mukeshotpview.mukeshOtpView.MukeshOtpView
    android:id="@+id/simpleOtpView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:inputType="number"
    android:text="124356"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    app:hideLineWhenFilled="false"
    app:itemCount="6"
    app:lineColor="@android:color/holo_red_light"
    app:state_filled="true"
    app:viewType="line"
    />

Inbuild Rectangle OTP View

<com.mukesh.mukeshotpview.mukeshOtpView.MukeshOtpView
    android:id="@+id/inBuildRectangleOtpView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:inputType="number"
    android:text="124356"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    app:hideLineWhenFilled="false"
    app:itemCount="6"
    app:lineColor="@android:color/holo_red_light"
    app:state_filled="true"
    app:viewType="rectangle"
    />

Custom Design OTP View

<com.mukesh.mukeshotpview.mukeshOtpView.MukeshOtpView
    android:id="@+id/customOtpView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:inputType="number"
    android:text="124356"
    android:itemBackground="@drawable/gray_round_corners"
    android:textColor="@android:color/black"
    android:textSize="18sp"
    app:hideLineWhenFilled="false"
    app:itemCount="6"
    app:lineColor="@color/colorAccent"
    app:state_filled="true"
    app:viewType="none"
    />

Add this into your styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="mukeshOtpStyle">@style/OtpWidget.OtpView</item>
</style>


<style name="OtpWidget.OtpView" parent="Widget.AppCompat.EditText">
    <item name="android:background">@null</item>
    <item name="android:minHeight">0dp</item>
    <item name="android:maxLines">1</item>
</style>

Add a otp complete listener for get a entered OTP text.

simpleOtpView.setOtpCompletionListener(object : MukeshOtpCompleteListener {
        override fun otpCompleteListener(otp: String?) {
            Toast.makeText(
                this@MainActivity,
                "Entered OTP Number is $otp",
                Toast.LENGTH_LONG
            ).show()
        }
    })

Thanks for your support. Please try and support it.