Text spanned over multiple edittext, Android

Question

So, I want a user to enter his/her number plate of his/her car and I want it to be quite stylish by separating all the characters like this picture: enter image description here

Right now it consists of 6 EditTexts with TextWatchers that change the focus for each input. That part works fine but my problem is with the deletion och characters. When a user want to edit one field, he/she can just click the view and delete eand replace. Although when the whole thing is wrong it is not possible to delete everything at once but you have to click every view and delete by hand.

So what I need is so when the user hit backspace on an empty view, it should change focus to the one before and delete that character and so on. So all the EditTexts will be connected and work as one. I've tried with KeyListeners that listens to backspace but that only works with hardware keyboards and not soft keyboards on the phone.

I'm also happy if someone can point me in the direction of another solution better than this one.

TextWatcher:

registrationPlateEditTexts is an List of all the EditText in order.

private TextWatcher regPlateTextWatcher = 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) {
            for (int i=registrationPlateEditTexts.size()-1; i>=0; i--){
                if (registrationPlateEditTexts.get(i).getText().length()==1 && i!=registrationPlateEditTexts.size()-1){
                    registrationPlateEditTexts.get(i+1).requestFocus();
                    return;
                }
                else if (registrationPlateEditTexts.get(i).getText().length()==1){
                    InputMethodManager imm = (InputMethodManager) getActivity().getSystemService(Context.INPUT_METHOD_SERVICE);
                    imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
                }
            }
        }
        @Override public void afterTextChanged(Editable s) {}
    };

            else if (registrationPlateEditTexts.get(i).getText().length()==1){
                InputMethodManager imm = (InputMethodManager) getActivity().getSystemService(Context.INPUT_METHOD_SERVICE);
                imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
            }
        }
    }
    @Override public void afterTextChanged(Editable s) {}
};`

Answer 1

I took 4 custom edit text with property of getting selected when you press back. Here are the listeners and the CustomEditText elements

mCodeFourEt.setOnEditorActionListener(new EditText.OnEditorActionListener() {
        @Override
        public boolean onEditorAction(TextView textView, int actionId, KeyEvent keyEvent) {
            if (actionId == EditorInfo.IME_ACTION_DONE) {
                mConfirmBtn.performClick();
                return true;
            }
            return false;
        }


    });


    mCodeTwoEt.setOnKeyListener(new View.OnKeyListener() {
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_DEL) {
                String text = mCodeTwoEt.getText().toString();
                if (text.length() == 0) {
                    mCodeOneEt.requestFocus();
                    mCodeOneEt.selectAll();
                    return true;
                }
            }

            return false;
        }
    });

    mCodeThreeEt.setOnKeyListener(new View.OnKeyListener() {
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_DEL) {
                String text = mCodeThreeEt.getText().toString();
                if (text.length() == 0) {
                    mCodeTwoEt.requestFocus();
                    mCodeTwoEt.selectAll();
                    return true;
                }
            }

            return false;
        }
    });

    mCodeFourEt.setOnKeyListener(new View.OnKeyListener() {
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_DEL) {
                String text = mCodeFourEt.getText().toString();
                if (text.length() == 0) {
                    mCodeThreeEt.requestFocus();
                    mCodeThreeEt.selectAll();
                    return true;
                }

            }

            return false;
        }
    });

    mCodeOneEt.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            if (mCodeOneEt.getText().toString().length() > 0) {
                mCodeTwoEt.requestFocus();
            }

        }
    });

    mCodeTwoEt.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            if (mCodeTwoEt.getText().toString().length() > 0) {
                mCodeThreeEt.requestFocus();
            }

        }
    });

    mCodeThreeEt.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            if (mCodeThreeEt.getText().toString().length() > 0) {
                mCodeFourEt.requestFocus();
            }

        }
    });

    mCodeFourEt.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {

        }
    });

Now here is the custom edittext class

public class CustomEditText extends android.support.v7.widget.AppCompatEditText {


public CustomEditText(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public CustomEditText(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CustomEditText(Context context) {
    super(context);
}


@Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
    return new ZanyInputConnection(super.onCreateInputConnection(outAttrs),
            true);
}

private class ZanyInputConnection extends InputConnectionWrapper {

    public ZanyInputConnection(InputConnection target, boolean mutable) {
        super(target, mutable);
    }

    @Override
    public boolean sendKeyEvent(KeyEvent event) {
        if (event.getAction() == KeyEvent.ACTION_DOWN
                && event.getKeyCode() == KeyEvent.KEYCODE_DEL) {
            // Un-comment if you wish to cancel the backspace:
            // return false;
        }
        return super.sendKeyEvent(event);
    }


    @Override
    public boolean deleteSurroundingText(int beforeLength, int afterLength) {
        // magic: in latest Android, deleteSurroundingText(1, 0) will be called for backspace
        if (beforeLength == 1 && afterLength == 0) {
            // backspace
            return sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL))
                    && sendKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL));
        }

        return super.deleteSurroundingText(beforeLength, afterLength);
    }

}
}

Just use this custom class in your XML and see the example above which is for 4 edit text.