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

3.1k Views Asked by At

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??

2

There are 2 best solutions below

2
On BEST ANSWER

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

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.