Customize Edittext input character to image?

Question

I want to customize an edittext when user input a character and then edittext changes it to image. Look like the image :

Note : ● is an image not a symbol.

Answer 1

you need to extend PasswordTransformationMethod and use setTransformationMethod method of EditText.

edt.setTransformationMethod(new CustomPasswordTransformationMethod());

and paste this CustomPasswordTransformationMethod

class CustomPasswordTransformationMethod extends PasswordTransformationMethod {
    @Override
    public CharSequence getTransformation(CharSequence source, View view) {
        return new PasswordCharSequence(source);
    }

    private class PasswordCharSequence implements CharSequence {
        private CharSequence source;
        public PasswordCharSequence(CharSequence source) {
            this.source = source;
        }
        public char charAt(int index) {
            if(index>4) //your own condition, when you want to hide characters.
                return 0x2022; // change this to bullets you want like '*' or '.'
            return source.charAt(index);
        }
        public int length() {
            return source.length();
        }
        public CharSequence subSequence(int start, int end) {
            return source.subSequence(start, end);
        }
    }
}

Above code will write character as it is upto 5 character, after that it will print bullets in EditText.

Reference taken from this post

UPDATE

Finally here is your answer :

Spannable.Factory spannableFactory;
int lastIndex = -1;

spannableFactory = Spannable.Factory
            .getInstance();

1. add addTextChangedListener in your EditText.

    mEditText.addTextChangedListener(watcher);

    TextWatcher watcher = 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) {
           if (start>4) {
               mEditText.removeTextChangedListener(watcher);
               mEditText.setText(getIconText(context, s, start));
               mEditText.addTextChangedListener(watcher);
               mEditText.setSelection(s.length());
           }
       }

       @Override
       public void afterTextChanged(Editable s) {

       }
    };

2. Convert your drawable into Spannable

   public Spannable getIconText(Context context, CharSequence text, int index) {
      Spannable spannable = spannableFactory.newSpannable(text);
      if (index>lastIndex) {
          spannable.setSpan(new ImageSpan(context, R.drawable.bullet_point),
                index, index + 1,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
      }
      lastIndex=index;
      return spannable;
   }