Edit text Password Toggle Android

Try the following method. Here, we are setting a compound drawable which when clicked will show or hide the password:

private boolean passwordShown = false;

private void addPasswordViewToggle() {
        getPasswordEditText().setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                final int DRAWABLE_RIGHT = 2; //index

                if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (event.getRawX() >= (getPasswordEditText().getRight() - getPasswordEditText().getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
                        if (passwordShown) {
                            passwordShown = false;
                            // 129 is obtained by bitwise ORing InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD
                            getPasswordEditText().setInputType(129);

                            // Need to call following as the font is changed to mono-space by default for password fields
                            getPasswordEditText().setTypeface(Typeface.SANS_SERIF);
                            getPasswordEditText().setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.locked_icon, 0); // This is lock icon
                        } else {
                            passwordShown = true;
                            getPasswordEditText().setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);

                            getPasswordEditText().setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.unlocked_icon, 0); // Unlock icon
                        }

                        return true;
                    }
                }
                return false;
            }
        });
    }

Please try this code.

public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (view.getId())
        {
            case R.id.ivPasswordToggle:

                switch ( motionEvent.getAction() ) {
                    case MotionEvent.ACTION_DOWN:
                        Toast.makeText(getContext(),"show",Toast.LENGTH_SHORT).show();
                         etPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                        break;
                    case MotionEvent.ACTION_UP:
                         etPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
                        Toast.makeText(getContext(),"hide",Toast.LENGTH_SHORT).show();
                        break;
                }
                break;
        }
        return true;
    }

I hope it will work, thanks.


If you don't want any extra bool or dependencies, then

    <EditText
        android:id="@+id/et_input_pass"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginTop="3dp"
        android:layout_marginStart="56dp"
        android:layout_marginEnd="56dp"
        android:hint="Password"
        android:inputType="textPassword"
        android:singleLine="true"
        android:textSize="13sp"
        android:background="@color/transparent"
        android:theme="@style/MyEditText" />

and

password_toggle_imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (et_input_pass.getTransformationMethod().getClass().getSimpleName() .equals("PasswordTransformationMethod")) {
            et_input_pass.setTransformationMethod(new SingleLineTransformationMethod());
        }
        else {
            et_input_pass.setTransformationMethod(new PasswordTransformationMethod());
        }

        et_input_pass.setSelection(et_input_pass.getText().length());
    }
});

that's it!


(updated for AndroidX)

Since the Support Library v24.2.0. you can achivie this very easy

What you need to do is just:

  1. Add the design library to your dependecies

     dependencies {
         implementation "com.google.android.material:material:1.2.1"
     }
    
  2. Use TextInputEditText in conjunction with TextInputLayout

     <com.google.android.material.textfield.TextInputLayout
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:id="@+id/etPasswordLayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:passwordToggleEnabled="true">
    
         <android.support.design.widget.TextInputEditText
             android:id="@+id/etPassword"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="@string/password_hint"
             android:inputType="textPassword"/>
     </com.google.android.material.textfield.TextInputLayout>
    

passwordToggleEnabled attribute will make the password toggle appear

  1. In your root layout don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto"

  2. You can customize your password toggle by using:

app:passwordToggleDrawable - Drawable to use as the password input visibility toggle icon.
app:passwordToggleTint - Icon to use for the password input visibility toggle.
app:passwordToggleTintMode - Blending mode used to apply the background tint.

More details in TextInputLayout documentation.

enter image description here