Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

EditText - How to separate characters that are typed in a EditText in groups or blocks

Is there a way I can group characters from a EditText in blocks while the user is typing? Exemple: 1234 4567 7890 and so on?

I have an edit text that support numeric numbers and has 16 char length and I would like to group them in separated blocks for a better visibility.

like image 587
esQmo_ Avatar asked Oct 20 '25 01:10

esQmo_


2 Answers

    editText.addTextChangedListener(new FourDigitCardFormatWatcher(editText));

Add space for every 4 digits.Use the following code.

public class FourDigitCardFormatWatcher implements TextWatcher {

    // Change this to what you want... ' ', '-' etc..
        private final String space = " ";
        EditText et_filed;


        public FourDigitCardFormatWatcher(EditText et_filed){
            this.et_filed = et_filed;
        }

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

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

        @Override
        public void afterTextChanged(Editable s) {
            String initial = s.toString();
            // remove all non-digits characters
            String processed = initial.replaceAll("\\D", "");

            if (processed.length() > 4){
                processed = processed.replaceAll("(\\d{4})(?=\\d)", "$1 ");
            }

            //Remove the listener
            et_filed.removeTextChangedListener(this);

            //Assign processed text
            et_filed.setText(processed);

            try {
                et_filed.setSelection(processed.length());
        } catch (Exception e) {
            // TODO: handle exception
        }

        //Give back the listener
            et_filed.addTextChangedListener(this);
        }
    }
like image 56
kvkmp kvkmp Avatar answered Oct 22 '25 04:10

kvkmp kvkmp


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    EditText mEditText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mEditText = (EditText) findViewById(R.id.edittext);
        mEditText.addTextChangedListener(new FourDigitFormater());
    }

    class FourDigitFormater implements TextWatcher {

        // Change this to what you want... ' ', '-' etc..
        private static final char space = ' ';
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }
        @Override
        public void afterTextChanged(Editable s) {
            // Remove spacing char
            if (s.length() > 0 && (s.length() % 5) == 0) {
                final char c = s.charAt(s.length() - 1);
                if (space == c) {
                    s.delete(s.length() - 1, s.length());
                }
            }
            // Insert char where needed.
            if (s.length() > 0 && (s.length() % 5) == 0) {
                char c = s.charAt(s.length() - 1);
                // Only if its a digit where there should be a space we insert a space
                if (Character.isDigit(c) && TextUtils.split(s.toString(), String.valueOf(space)).length <= 3) {
                    s.insert(s.length() - 1, String.valueOf(space));
                }
            }
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="crxpress.dgflick.com.stackoverflow.MainActivity">

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:inputType="phone"/>
</RelativeLayout>
like image 32
jessica Avatar answered Oct 22 '25 03:10

jessica