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-

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.

Answer 1

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 {
        compile "com.android.support:design:25.1.0"
   }
   

2. Use TextInputEditText in conjunction with TextInputLayout

   <android.support.design.widget.TextInputLayout
       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"/>
   </android.support.design.widget.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.

Answer 2

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 3

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 4

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!