Skip to content
[AndroidLib] A custom EditText tailor-made for codes and password input πŸ’¬
Kotlin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
codeedittext-example
codeedittext
gradle/wrapper
press
.gitignore
LICENSE
README.md
build.gradle
dependencies.gradle
gradle.properties
gradlew
gradlew.bat
settings.gradle

README.md

CodeEditText

License Platform API Download

Presentation

This is the source code of an Android library: -=:[ CodeEditText ]:=-

πŸ“ƒ Check also the Medium article about it!


Why would you need it?

"Input codes easily, numbers or alphabetical, long or short, visible or masked, shown as you like!"

Introducing a fancy and highly customizable EditText, redesigned for codes input.

What you got:

  • chose the max length
  • use it with any inputType
  • you can mask your input AND choose the character you want to mask it
  • customize the layout as you like
  • horizontal scroll with auto-focus while typing
  • and much more!

Demo 1 Demo 2

Demo 3 Demo 4


How to use it?

Make sure to include the library in your app's build.gradle:

    implementation 'com.lukelorusso:codeedittext:1.0.0'

Add the view to your layout:

<com.lukelorusso.codeedittext.CodeEditText
        android:id="@+id/cetMyCode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

maybe add some attributes... here you got some, we'll discuss them later

        ...
        android:inputType="text"
        android:maxLength="6"
        android:text="09af"
        app:cet_codeMaskChar="#"
        app:cet_maskTheCode="true"
        app:cet_scrollDurationInMillis="300"
        ...

All of them can be also set programmatically.


Customization

Attributes

To set your code programmatically:

cetMyCode.text = "1234"

...and the same thing for the maxLength:

cetMyCode.maxLength = 6

If the input layout is too big for the screen, it will become scrollable and will automatically focus on the portion of the code where the user is typing.

To change the duration of the scrolling effect (in milliseconds):

cetMyCode.scrollDurationInMillis = 300

The default inputType for the EditText is "number". Do you need another one?

cetMyCode.inputType = InputType.TYPE_CLASS_TEXT // choosing a password type will not mask the input

To mask the input (the "password" scenario) just set this boolean:

cetMyCode.maskTheCode = true

If you don't like dots:

cetMyCode.codeMaskChar = '#' // or whatever other Char you like :)

Callbacks

For your convenience, here's how you intercept the code:

cetMyCode.setOnCodeChangedListener { (code, completed) ->
    // the code has changed
    if (completed) {
        // the code has been fully entered (code.length == maxLength)
    }
}

Design

As an example, you can find a custom item_code_edit_text.xml inside the res/layout folder of codeedittext-example project.

This is the layout of a single character and it's ENTIRELY CUSTOMIZABLE! You can modify it as you wish; just remember to keep the TextView's id unchanged πŸ˜‰

Just copy it to your res/layout folder and start to change dimensions, text's size, colors or even add more stuff... it's all up to you!


Explore!

Feel free to checkout and launch the example app 🎑


Copyright

Make with πŸ’š by Luca Lorusso, licensed under Apache License 2.0
Thanks for the help to Lopez Mikhael

You can’t perform that action at this time.