CODEWITHSUNDEEP
androidandroid-edittext
Holi Boom
Holi Boom

Reputation: 1396

Customize Edittext input character to image?

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

Note : ● is an image not a symbol.

Upvotes: 12

Views: 2069

Answers (4)

Ravi
Ravi

Reputation: 35559

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) {

       }
    };

  1. 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;
}

enter image description here

Upvotes: 20

Shree Krishna
Shree Krishna

Reputation: 8562

Let's say if you want to replace the character b with character ●. Then you can add TextWatcher for this, which looks like this

 myEditText.addTextChangedListener(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) {

            StringBuilder myText = new StringBuilder(myEditText.getText().toString());
            if (myText.toString().contains("b")){ //If this contains b
                myText.setCharAt(myText.indexOf("b"),'●');
                myEditText.setText(myText.toString()); //Sets the string to EditText
                myEditText.setSelection(myText.length()); //Moves cursor to the last after replacing
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });

UPDATE

we can use setCompoundDrawablesWithIntrinsicBounds for Placing the image but cant place it as a character at exact position. we can define the bounds only.

Upvotes: 4

mubeen
mubeen

Reputation: 839

Try this in your code. doc

    EditText text = (EditText) findViewById(R.id.edtTest);
    text.setCompoundDrawablesWithIntrinsicBounds(null, null,
                       getResources().getDrawable(R.drawable.myDrawable), null);

Upvotes: 2

Ajinkya
Ajinkya

Reputation: 1077

use property of edittext inputtype in your xml 

android:inputType="textPassword"

Upvotes: 2

Related Questions