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.).

Supports automatic code retrieval from incoming SMS messages. This feature is implemented using the Consent API.

You may find my initial motivations & a little bit more detailed information in this Medium post.

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

Step 2. Add the dependency

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

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" />

...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...           
}

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 if 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.

SMS Detection modes

• app:scv_smsDetectionMode="disabled": Prevents the view from using SMS Consent API, i.e. this option simply disables automatic SMS detection.
• app:scv_smsDetectionMode="auto": Default option. SmsConfirmationView will try to use SMS Consent API to detect incoming messages and extract confirmation codes out of the messages.
• app:scv_smsDetectionMode="manual": Like auto but gives you more control when to actually start listening for incoming messages via startListeningForIncomingMessages method. Can be useful in some cases as SMS Consent API cannot be active for more than 5 minutes.

License

Apache 2.0