Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Android TextInputLayout with credit card mask

In this example I will explain how you can build a TextInputLayout that shows credit card numeber.

The goal is to add a margin between every four digits without adding a space (" ") while you are inserting text.

Screen

You need to put a TextWatcher on a EditText.
The TextWatcher needs to add a margin every four digits.

Example:

    private EditText etCreditCard;
    private TextWatcher tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        etCreditCard = (EditText) findViewById(R.id.cc);

        tv = new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                int textLength = etCreditCard.length();
                if (textLength > 4) {
                    etCreditCard.removeTextChangedListener(tv);
                    if (textLength > 16) {
                        s.replace(16, textLength, "");
                        textLength = s.length();
                    }
                    for (int i = 1; i <= textLength; i++){
                        if( ((i % 4) == 0) && i > 1 && i < textLength ){
                            MarginSpan marginSPan = new MarginSpan(20);
                            s.setSpan(marginSPan, i - 1, i, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                        }else{
                            MarginSpan marginSPan = new MarginSpan(0);
                            s.setSpan(marginSPan, i - 1, i, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                        }
                    }
                    etCreditCard.addTextChangedListener(tv);
                }
            }
        };
        etCreditCard.addTextChangedListener(tv);

    }
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TextInputLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:counterMaxLength="16"
app:counterEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="@+id/cc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Credit Card Number"
android:digits="1234567890"
android:inputType="number|textNoSuggestions"
/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
package com.liberorignanese.android.gist;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.text.style.ReplacementSpan;
/**
* Created by Libero Rignanese.
*/
public class MarginSpan extends ReplacementSpan {
private int mPadding;
public MarginSpan(int padding) {
mPadding = padding;
}
@Override
public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
float[] widths = new float[end - start];
paint.getTextWidths(text, start, end, widths);
int sum = mPadding;
for (int i = 0; i < widths.length; i++) {
sum += widths[i];
}
return sum;
}
@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
canvas.drawText(text, start, end, x, y, paint);
}
}
@danielesegato
Copy link

danielesegato commented Oct 19, 2016

Also if you click in the middle of the number and start to write there margins gets crazy

@liberorignanese
Copy link
Author

liberorignanese commented Oct 19, 2016

@danielesegato commented 2 hours ago
Also if you click in the middle of the number and start to write there margins gets crazy

Fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment