SmsConfirmationView

A custom Android's View implementing all the necessary UI for a typical "enter SMS / PIN code" flow. Can be used for verification of any digit-based codes (SMS verification, PIN verification, etc.).

Installation

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' }
    }
}
Gradle

Step 2. Add the dependency

dependencies {
    implementation "com.github.fraggjkee:sms-confirmation-view:1.1"
}
Gradle

Usage

Add SmsConfirmationView to your XML layout:

<com.fraggjkee.smsconfirmationview.SmsConfirmationView
    android:id="@+id/sms_code_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
XML

...and then just listen for its updates in your Activity or Fragment:

val view: SmsConfirmationView = findViewById(R.id.sms_code_view)
view.onChangeListener = SmsConfirmationView.OnChangeListener { code, isComplete ->
   // TODO...           
}
Kotlin

You cal also get/set the code using the enteredCode property.

DataBinding

This SMS verification view supports Android's DataBinding framework, including its two-way version. The list of available adapters can be found here.

Customization

Here's the list of available XML attributes:

  • scv_codeLength: expected confirmation code length. Default value = 4
  • scv_symbolsSpacing: gap between individual symbol subviews. Default value = 8dp
  • scv_symbolWidth: width of each individual symbol cell. Default value = 42dp
  • scv_symbolHeight: height of each individual symbol cell. Default value = 48dp
  • scv_symbolTextColor: text color used to draw text within symbol subviews. Default value = ?attr/colorOnSurface or Color.BLACK if such attribute is not defined in your app's theme.
  • scv_symbolTextSize: text size used within symbol subviews. Default value = 22sp
  • scv_symbolBackgroundColor: filler color for symbol subviews. Default value = ?attr/colorSurface or Color.BLACK is such attribute is not defined in your app's theme.
  • scv_symbolBorderColor: color to use for symbol subview's stroke outline. Default value = ?attr/colorSurface or Color.BLACK if such attribute is not defined in your app's theme.
  • scv_symbolBorderWidth: thickness of the stroke used to draw symbol subview's border. Default value = 2dp
  • scv_symbolBorderCornerRadius: corner radius for symbol subview's border. Default value = 2dp

All of these attributes can also be changed programatically (XML customization is the preferred way though), check out the list of available extensions here.

GitHub