How to use custom image for edittext password like axis bank app

Question

How to use custom image instead of \'*\' in edittext password field?

see image:

Answer 1

The answer comes from this tutorial and it covers a behaviour when a user:

• enters into the login screen, keyboard will open automatically.

• tries to enter value in it then textbox background changes to textbox with star background.

• tries to cancel/delete the input value by using back key on keyboard then textbox background will change to textbox without star background.

First of all you have to create two drawables:

Then, according to this approach, you have to implement addTextChangedListener method on your EditText. After that, as a parameter, you create a new instance of a TextWatcher class and you implement its methods:

etxtPin1.addTextChangedListener(new TextWatcher() {

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
       // TODO Auto-generated method stub

    }
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
                    int after) {
                // TODO Auto-generated method stub

    }
    @Override
    public void afterTextChanged(Editable s) {
          if(etxtPin1.getText().toString().trim().length()==1){

          etxtPin1.clearFocus();
          etxtPin2.requestFocus();
          etxtPin1.setBackgroundResource(R.drawable.pin_txt_bg_star);

          }
       }
    });

Then, you have to implement setOnKeyListener and its method onKey:

this.etxtPin1.setOnKeyListener(new View.OnKeyListener() {
      public boolean onKey(View paramView, int paramInt, KeyEvent paramKeyEvent) {
           if ((paramKeyEvent.getAction() == KeyEvent.ACTION_DOWN)&&(paramInt == 67) && (LoginActivity.this.etxtPin2.getText().length() == 0)) {
               etxtPin1.requestFocus();
               etxtPin1.setBackgroundResource(R.drawable.pin_txt_bg);
               etxtPin1.setText("");
           }

           return false;
       }
    });

---

Another approach: create you own class which extends PasswordTransformationMethod.

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

    private class PasswordCharSequence implements CharSequence {
        private CharSequence mSource;
        public PasswordCharSequence(CharSequence source) {
            mSource = source; // Store char sequence
        }
        public char charAt(int index) {
            return '*'; // This is the important part
        }
        public int length() {
            return mSource.length(); // Return default
        }
        public CharSequence subSequence(int start, int end) {
            return mSource.subSequence(start, end); // Return default
        }
    }
};

Reference: In android how to show asterisk (*) in place of dots in EditText having inputtype as textPassword?

Answer 2

I think simple way is, you have to define 6-edittext in xml layout. and set width and height with custom background resorces.

Like,

<?xml version="1.0" encoding="utf-8"?>

<solid android:color="#FFFFFF" />

<stroke
    android:width="1dp"
    android:color="#9999" />

<corners
    android:bottomLeftRadius="1dp"
    android:bottomRightRadius="1dp"
    android:topLeftRadius="1dp"
    android:topRightRadius="1dp" />

and read all edittext value. I am not sure but it will help you.