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

后端 未结 2 797
渐次进展
渐次进展 2020-12-03 20:14

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

see image:

\"custom

2条回答
  •  不知归路
    2020-12-03 20:56

    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:

    enter image description here

    enter image description here

    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;
           }
        });
    

    enter image description here


    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?

提交回复
热议问题