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.
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(etCreditCard.length() > 4){
etCreditCard.removeTextChangedListener(tv);
if(textLength > 15){
s.replace(16, textLength, "");
}else {
for(int i = 1; i <= (textLength / 4); i++){
MarginSpan marginSPan = new MarginSpan(20);
s.setSpan(marginSPan, (i * 4)-1, (i * 4), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
etCreditCard.addTextChangedListener(tv);
}
}
};
etCreditCard.addTextChangedListener(tv);
}