The Android Arsenal – Widgets


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

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

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.

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

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.

License

Apache 2.0

Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0