Masked Input Using EditText Widget in Android

Question

Is there a way I can specify an input mask to the EditText control in Android?

I want be able to specify something like ### - ## - #### for a Social Security Number. This will cause any invalid input to be rejected automatically (example, I type alphabetical characters instead of numeric digits).

I realize that I can add an OnKeyListener and manually check for validity. But this is tedious and I will have to handle various edge cases.

Answer 1

Try using an InputFilter rather than an OnKeyListener. This means you don't have worry about tracking individual key presses and it will also handle things like pasting into a field which would be painful to handle with an OnKeyListener.

You could have a look at the source of the InputFilter implementations that come with Android to give you a starting point for writing your own.

Answer 2

The easiest way I know to use a mask on EditText in your Android programs in Android Studio is to use MaskedEditText library (GitHub link). It's a kind of custom EditText with Watcher that allows you to set a hint with different color (if you want it will be available even when user already started to type), mask and it's very easy to use :-)

compile 'ru.egslava:MaskedEditText:1.0.5'

<br.com.sapereaude.maskedEditText.MaskedEditText
    android:id="@+id/phone_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="phone"
    android:typeface="monospace"
    mask:allowed_chars="1234567"
    mask:mask="###-##-##"
    app:keep_hint="true"
    />

And that is!

Answer 3

You could take a look at the android.telephony.PhoneNumberFormattingTextWatcher class. It masks a phone number text input with the ###-###-#### pattern.

Answer 4

String phoneNumber = "1234567890";

String text = String.valueOf( android.telephony.PhoneNumberUtils.formatNumber(phoneNumber) ); //formatted: 123-456-7890

editTextMobile.setText(text); //set editText text equal to new formatted number

editTextMobile.setSelection(text.length()); //move cursor to end of editText view

Use this in an onKey function for delicious on-the-fly bunny sex with formatted phone numbers.