Code Monkey home page Code Monkey logo

otp-view's Introduction

OTP View in Android

Library size is : Kb

Setup Project

Add this to your project build.gradle

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

Add this to your project build.gradle

Dependency

dependencies {
        implementation 'com.github.appsfeature:otp-view:1.0'
}

Screenshots

Preview 1 Preview 1

OTP-view Usage methods

OTP Box implementation changes in layout.xml file

    <com.otpview.OTPTextView
        android:id="@+id/otp_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        app:otp_text_size="20sp"
        app:otp_box_background="@drawable/bg_otp_box"
        app:otp_box_background_active="@drawable/bg_otp_box_active"
        app:otp_box_background_inactive="@drawable/bg_otp_box_inactive"
        app:otp_box_background_error="@drawable/bg_otp_box_error"
        app:otp_box_background_success="@drawable/bg_otp_box_success"
        app:hide_otp_drawable="@drawable/bg_otp_box_hide"
        app:height="45dp"
        app:width="40dp"
        app:box_margin="6dp"
        app:hide_otp="false"
        app:length="6"
        app:otp=""/>

Dash View implementation changes in layout.xml file

    <com.otpview.OTPTextView
        android:id="@+id/otp_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        app:otp_text_size="20dp"
        app:bar_enabled="true"
        app:bar_error_color="@color/red"
        app:bar_active_color="@color/black"
        app:bar_inactive_color="@android:color/darker_gray"
        app:hide_otp_drawable="@drawable/bg_otp_box_hide"
        app:bar_success_color="#33cc33"
        app:bar_margin_bottom="0dp"
        app:bar_margin_left="2dp"
        app:bar_margin_right="2dp"
        app:bar_height="1.5dp"
        app:box_margin="0dp"
        app:height="40dp"
        app:width="40dp"
        app:hide_otp="true"
        app:length="4"
        app:otp=""/>

Activity class setup

class MainActivity : AppCompatActivity() {
     private lateinit var otpTextView : OTPTextView

     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_sample1)

         val errorButton = findViewById<Button>(R.id.button)
         val successButton = findViewById<Button>(R.id.button2)
         otpTextView = findViewById(R.id.otp_view) as OTPTextView
         otpTextView.requestFocusOTP()
         otpTextView.otpListener = object : OTPListener {
             override fun onInteractionListener() {

             }

             override fun onOTPComplete(otp: String) {
                 Toast.makeText(this@MainActivity, "The OTP is $otp", Toast.LENGTH_SHORT).show()
             }
         }
         errorButton.setOnClickListener { otpTextView.showError() }
         successButton.setOnClickListener { otpTextView.showSuccess() }

         additionalMethods()
     }

     fun additionalMethods() {
         otpTextView.getOtpListener();  // retrieves the current OTPListener (null if nothing is set)
         otpTextView.requestFocusOTP();	//sets the focus to OTP box (does not open the keyboard)
         otpTextView.setOTP(otpString);	// sets the entered otpString in the Otp box (for case when otp is retrieved from SMS)
         otpTextView.getOTP();	// retrieves the OTP entered by user (works for partial otp input too)
         otpTextView.showSuccess();	// shows the success state to the user (can be set a bar color or drawable)
         otpTextView.showError();	// shows the success state to the user (can be set a bar color or drawable)
         otpTextView.resetState();	// brings the views back to default state (the state it was at input)
     }
 }

Color Resources

    <color name="color_background_box">#F5F5F5</color>
    <color name="color_background_box_stroke">#DEDEDE</color>
    <color name="color_background_box_stroke_active">#A5A5A5</color>

otp-view's People

Contributors

appsfeature avatar droidhelios avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

otp-view's Issues

Direction

Hello, thanks for your library.
I used it in my project.
I saw a problem.
I configured the direction of project in my theme file.
it was like this: rtl,
but I wanted to set the direction of OTPTextView to Left-to-right.
Unfortunately, it didn't apply. why? what is problem.
It is important to say you, I could change the direction of other components easily.
could you solve your problem?
thanks in advance

Input Type text

is this library can use inputType="text" ? I try to implement that code in xml but it's not work

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.