Edit text Password Toggle Android

Question

I am trying to show user the typed password in edit text whose input type is text Password.

I implemented gesturelistener over the toggle icon like this-

<         


        

Answer 1

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

Answer 2

app:passwordToggleEnabled="true"

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleEnabled="true">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter Password"
        android:inputType="textPassword"
        android:maxLines="1" />

</com.google.android.material.textfield.TextInputLayout>

Answer 3

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!

Answer 4

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.

Answer 5

 fragmentLoginBinding.imageViewEye.setOnClickListener(v -> {
        if (!isPasswordVisible) {
            fragmentLoginBinding.editTextPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
            fragmentLoginBinding.imageViewEye.setImageDrawable(getResources().getDrawable(R.mipmap.feather_eye_crossed));
            isPasswordVisible = true;
        } else {
            fragmentLoginBinding.editTextPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
            fragmentLoginBinding.imageViewEye.setImageDrawable(getResources().getDrawable(R.mipmap.feather_eye));
            isPasswordVisible = false;
        }
    });

Answer 6

(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

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

4. 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.