Material Code input

A material style input for put codes.

Based on

Code input field concept by SAMUEL KANTALA

How to use

Minimal SDK Version 11

Usage with default colors (the default codes is 6)

  <com.github.glomadrian.codeinputlib.CodeInput
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:hint_text="Pairing code"
      />

Usage with custom colors and attributes

<com.github.glomadrian.codeinputlib.CodeInput
    android:layout_marginTop="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:underline_color="#457ad1"
    app:underline_selected_color="#9e1ace"
    app:text_color="#b12eff"
    app:hint_color="#77ce9d"
    app:hint_text="Pin code"
    app:codes="4"
    />

Remember put this for custom attribute usage


xmlns:app="http://schemas.android.com/apk/res-auto"

Get the input code (Returns a Character[])

  codeInput.getCode()

You can use the onCodeReadyListener which is called when all the characters are entered.

  CodeInput cInput = (CodeInput) findViewById(R.id.pairing);
    cInput.setCodeReadyListener(new CodeInput.codeReadyListener() {
      @Override
      public void onCodeReady(Character[] code) {
        // Code has been entered ....
        Toast.makeText(MainActivity.this,"code entered is : "+ Arrays.toString(code),Toast.LENGTH_SHORT).show();
      }
    });

For Gradle

Add repository

repositories {
  maven {
    url "http://dl.bintray.com/glomadrian/maven"
  }
}

Add dependency

  compile 'com.github.glomadrian:CodeInput:1.1@aar'

GitHub