Giter VIP home page Giter VIP logo

otpview's Introduction

OTPView

Heavily customizable OTP or Pin View. Note:OTPView is still in early stages

Description

OTPView is meant to be a highly customizable OTP / Pin View for android. It supports customization for text styling, background styling, and dimensional styling. It defines the view as 3 segments:

  • The Highlighted Item
  • The Empty Item
  • The filled Item

Each type can be customized separately, with the empty item being the default.

The OTPView also supports some android standards such as android:inputType, android:importantForAutofill and android:autofillHints so you can easily set options like numbers/string, allcaps, etc.

Install

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

dependencies {
implementation 'com.github.KevinSchildhorn:OTPView:0.2.5'
}

IMG

Attributes

Attribute Format Description Default
otp_itemCount integer The length of the input 1
otp_showCursor boolean Should show cursor false
otp_itemWidth dimension width of each item 44dp
otp_itemHeight dimension height of each item 44dp
otp_cursorColor color color of the cursor Black
otp_underscoreCursor (Experimental) boolean if true will show '_' instead of ' ' for the cursor
otp_customCursor drawable custom drawable for the cursor, overrides otp_underscoreCursor null
otp_allcaps boolean all caps(if fails set input type) false
otp_marginBetween dimension margin between each item horizontally 8dp
otp_isPassword boolean sets previously entered items as hidden false
otp_textSize dimension The text size of items past the cursor 14dp
otp_textColor integer The text color of items past the cursor Black
otp_backgroundImage reference The background image of items past the cursor N/A
otp_Font reference The font of items past the cursor N/A
otp_highlightedTextSize dimension The text size of the highlighted item otp_textSize
otp_highlightedTextColor integer The text color of the highlighted item otp_textColor
otp_highlightedBackgroundImage reference The background image of the highlighted item otp_backgroundImage
otp_highlightedFont reference The font of the highlighted item otp_Font
otp_filledTextSize dimension The text size of items before the cursor otp_textSize
otp_filledTextColor integer The text color of items before the cursor otp_textColor
otp_filledBackgroundImage reference The background image of items before the cursor otp_backgroundImage
otp_filledFont reference The font of items before the cursor otp_Font

API

  • fun setOnFinishListener(func: (String) -> Unit) - Simple listener callback for when all items have been filled
otp_view.setOnFinishListener {
    Toast.makeText(this,it,Toast.LENGTH_LONG).show()
}
  • fun setOnCharacterUpdatedListener(func: (Boolean) -> Unit) - listener callback for when a character was updated. Returns whether or not it was filled.

  • fun setText(str:String) - Fills in as much of the text into the items as possible, with one character for each item. Overflow characters are discarded.

  • fun clearText(showKeyboard: Boolean) - Clears all the text, also has the option to hide or show the keyboard on the first item.

  • fun copyText(showKeyboard: Boolean) - Copies text from OTP View.

  • fun pasteText(showKeyboard: Boolean) - Pastes text from OTP View, paste menu item should be overridden from Activity.

  • fun fitToWidth(width: Int) - Fits the entire view to the width entered. Made so that you can dynamically resize the view.

  • fun isFilled(): Boolean - Returns whether or not all the fields have been filled.

  • fun getStringFromFields(): String - Returns the string from the view.

  • override fun setEnabled(enabled: Boolean) - Allows you to disable the view as you normally would.

otpview's People

Contributors

kevinschildhorn avatar mrf7 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

findjigar najihh

otpview's Issues

Otp Error / Wrong Input Mode

its very usefull library, but how to implement error state mode with this library?
ex: when enduser input wrong otp, then how to set error view in this lib ? like red bordered view etc

Keyboard resets when changing fields

For example, if you are entering a number from the default keyboard, after you enter the keyboard will reset to the alphabetical keyboard. Want to persist keyboard information between fields.

Paste feature issue

When copy my text paste to this view, I'm not able to do that, plz fixed as soon as possible

Cursor | issues

I'm not able to see the cursor like "|" when I back press then first press miss out, second press is show bar (_) cursor

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.