Hide password toggle using textinputlayout when the edit text is not in focus

Question

This is the code I am using in my project:

<android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/signup_input_full_name_wrapper"
        android:layout_marginEnd="@dimen/signup_edit_text_input_fullname_margin_right"
        android:layout_marginRight="@dimen/signup_edit_text_input_fullname_margin_right"
        android:layout_marginStart="@dimen/signup_edit_text_input_fullname_margin_left"
        android:layout_marginLeft="@dimen/signup_edit_text_input_fullname_margin_left"
        android:layout_marginTop="@dimen/signup_edit_text_input_fullname_margin_top"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/signup_input_password_wrapper">
    <EditText
        android:id="@+id/signup_input_full_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Full Name"
        android:textSize="@dimen/signup_edit_text_input_fullname_text_size"
        android:textColorHint="@color/signup_edit_text_hint_color"
         />
</android.support.design.widget.TextInputLayout>

This does the work like it says, i.e. it provides me with a password toggle for the nested edit text. What I want is if there is any way that it can be hidden when the edit text doesn't have focus??

Add property to TextInputLayout app:passwordToggleEnabled="false" — PriyankVadariya, Aug 01 '18 at 12:10

score 3 · Accepted Answer · answered Aug 01 '18 at 12:26

it is may be not best practice but its work.

your xml:

           <android.support.design.widget.TextInputLayout
                android:id="@+id/etPasswordLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:passwordToggleEnabled="false">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/etPassword"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="password"
                    android:inputType="textPassword"/>
            </android.support.design.widget.TextInputLayout>

your activity or fragment:

etPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean isFocused) {
                if(!isFocused){
                    etPasswordLayout.setPasswordVisibilityToggleEnabled(false);
                }else{
                    etPasswordLayout.setPasswordVisibilityToggleEnabled(true);
                }
            }
        });

It works for me !! I wanted to add one more functionality, i.e whether the user has entered something or not. so if the password field is empty the toggle can be invisible and become visible when user has started to enter something — Saurabh Mishra, Aug 02 '18 at 06:42
setPasswordVisibilityToggleEnabled is depricated , you can replace it with setEndIconVisible — Zulqarnain, Sep 11 '20 at 11:48

score 0 · Answer 2 · answered Aug 03 '18 at 05:43

I implemented what was told here and made some changes to it which I wanted to post.

private EditText etPassword;
private TextInputLayout etPasswordLayout;
//View componenets initialization
    etPassword = findViewById(R.id.signup_input_password);
    etPasswordLayout = findViewById(R.id.signup_input_password_wrapper);


    //toggling the password view functionality
    etPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean isFocused) {
            if(!isFocused){
                etPasswordLayout.setPasswordVisibilityToggleEnabled(false);
            }else{

                etPassword.addTextChangedListener(new TextWatcher() {
                    @Override
                    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                    }

                    @Override
                    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                        if(etPassword.getText().toString().length() > 0) {
                            etPasswordLayout.setPasswordVisibilityToggleEnabled(true);
                        }
                        else{
                            etPasswordLayout.setPasswordVisibilityToggleEnabled(false);
                        }
                    }

                    @Override
                    public void afterTextChanged(Editable editable) {

                    }
                });

            }
        }
    });

Now the password toggle is visible only if password edit text is in focus and also only when user has entered something.

Hide password toggle using textinputlayout when the edit text is not in focus

2 Answers2