CODEWITHSUNDEEP
androidandroid-edittextgesturelistener
Apoorv Singh
Apoorv Singh

Reputation: 1335

Edit text Password Toggle Android

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-

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.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                        break;
                    case MotionEvent.ACTION_UP:
                        etPassword.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD | InputType.TYPE_CLASS_TEXT);
                        Toast.makeText(getContext(),"hide",Toast.LENGTH_SHORT).show();
                        break;
                }
                break;
        }
        return true;
    }

i dont know what is wrong, any help will be appreciated.

Upvotes: 37

Views: 76894

Answers (10)

bk138
bk138

Reputation: 3088

I'd like to propose a solution inspired by @shanezzar's answer that does not require changes to existing legacy android:inputType="textPassword" EditText layouts (e.g. adding a show-password icon/checkbox). It simply shows the password when the EditText has input focus and hides it when the EditText loses focus (password is an EditText):

password.setOnFocusChangeListener((v, hasFocus) -> {
   if (hasFocus) {
      password.setTransformationMethod(new SingleLineTransformationMethod());
   } else {
      password.setTransformationMethod(new PasswordTransformationMethod());
   }
   // move cursor to end of text
   password.setSelection(password.getText().length());
});

Upvotes: 0

zzemlyanaya
zzemlyanaya

Reputation: 11

This is a little addition to the accepted answer for those, who wondering who to implement custom drawable for toggle

  1. In your resources:

drawable/password_toggle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:state_checked="true"
        android:drawable="@drawable/eye"
        app:tint="@color/black_600_8a"/>
    <item
        android:drawable="@drawable/eye_closed"
        app:tint="@color/black_600_8a" />
</selector>

state_checked is the state when password is visible

Note: use app:tint in the drawable and not android:endIconTint in the layout to change the colour of your toggle, as the latter won't work properly with selector

  1. In your layout xml
<com.google.android.material.textfield.TextInputLayout
    ...
    app:endIconMode="password_toggle"
    app:endIconDrawable="@drawable/password_toggle">

        <com.google.android.material.textfield.TextInputEditText
            ...
            android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>

Hope this will help someone as much as it helped me!

Upvotes: 1

Dankyi Anno Kwaku
Dankyi Anno Kwaku

Reputation: 1293

Implement the TextInput like below. The main attribute that gives that feature is app:passwordToggleEnabled="true"

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/resetpasswordactivity_textinputlayout_newpassword"
                android:layout_width="0dp"
                android:layout_height="60dp"
                app:passwordToggleEnabled="true"
                android:theme="@style/loginActivityHintStyle"
                app:layout_constraintBottom_toTopOf="@+id/resetpasswordactivity_textinputlayout_newconfirmpassword"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/resetpasswordactivity_textinputlayout_resetcode"
                app:layout_constraintVertical_bias="0.15">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/resetpasswordactivity_textinputedittext_newpassword"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:labelFor="@id/resetpasswordactivity_textinputedittext_newpassword"
                    android:maxLength="100"
                    android:textColor="@drawable/black_inputtext_color"
                    />
            </com.google.android.material.textfield.TextInputLayout>

Upvotes: 0

Jeremiah Polo
Jeremiah Polo

Reputation: 851

If you want to use an EditText or AppCompatEditText you can implement that desired output by;

<androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/layout_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/spinner_role"
                >

                <androidx.appcompat.widget.AppCompatEditText
                    android:id="@+id/edit_text_password"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:autofillHints="@string/password"
                    android:hint="@string/password"
                    android:inputType="textPassword"
                    android:textSize="16sp"
                    app:backgroundTint="#59A6B6"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/button_password_toggle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="4dp"
                    android:src="@drawable/ic_visibility_off"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/register_user_password_et" />

            </androidx.constraintlayout.widget.ConstraintLayout>

In your .kt file;

if (registerUserBinding.editTextPassword.transformationMethod.equals(
            PasswordTransformationMethod.getInstance()
        )
    ) {
        registerUserBinding.registerUserPasswordEt.transformationMethod =
            HideReturnsTransformationMethod.getInstance()
        registerUserBinding.buttonPasswordToggle.setImageDrawable(
            ContextCompat.getDrawable(
                registerUserBinding.registerUserPasswordEt.context,
                R.drawable.ic_visibility
            )
        )

    } else {
        registerUserBinding.editTextPassword.transformationMethod =
            PasswordTransformationMethod.getInstance()
        registerUserBinding.buttonPasswordToggle.setImageDrawable(
            ContextCompat.getDrawable(
                registerUserBinding.registerUserPasswordEt.context,
                R.drawable.ic_visibility_off
            )
        )
    }

Upvotes: 0

Javier Vieira
Javier Vieira

Reputation: 2140

(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

Upvotes: 67

raaziaT
raaziaT

Reputation: 31

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

Upvotes: 3

Ketan Ramani
Ketan Ramani

Reputation: 5803

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>

Upvotes: 2

shanezzar
shanezzar

Reputation: 1180

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!

Upvotes: 15

Shaishav
Shaishav

Reputation: 5312

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

Upvotes: 7

user3539940
user3539940

Reputation:

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.

Upvotes: 12

Related Questions