Change to custom icon from eye-icon(default) for hide-show password in android EditText

Question

I want to change/display different icons for show password in android edittext. I am using following code to display icon.

Answer 1

If you would like to use default eye icon (show/hide password) but change the icon color then you simply put the line

app:passwordToggleTint="@color/yourColor"

If you would like to use custom eye icon, you should use

app:passwordToggleDrawable 

to change the icon. and use

app:passwordToggleTint 

to change the color of the icon. your custom icon color does not show. Tint color will be shown. The whole xml code like below:

<android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/yourColor"
        android:theme="@style/TextLabelLogin"
        app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/yourColor"
        app:passwordToggleDrawable="@drawable/show_password_selector">

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bottom_line_shape"
            android:hint="@string/password"
            android:textColorHint="@color/yourColor"
            android:inputType="textPassword"
            android:textColor="@color/yourColor"/>
    </android.support.design.widget.TextInputLayout>

and show_password_selector.xml is given below:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_hide_password" android:state_checked="true" />
<item android:drawable="@drawable/ic_show_password" /></selector>

Hope that will help all.

Answer 2

With the Material Components library just use the the app:endIconDrawable attribute:

<com.google.android.material.textfield.TextInputLayout
    app:endIconMode="password_toggle"
    app:endIconDrawable="@drawable/...."
    ..>

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

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

Answer 3

I implement it using text.. that is 'Show' and 'Hide'

textViewShowPassword.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (textViewShowPassword.getText().toString().equalsIgnoreCase("Show")) {
                editTextPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                textViewShowPassword.setText("Hide");
                editTextPassword.setSelection(editTextPassword.getText().length());
            } else {
                textViewShowPassword.setText("Show");
                editTextPassword.setTransformationMethod(new PasswordTransformationMethod());
                editTextPassword.setSelection(editTextPassword.getText().length());
            }

        }
    });

Hope this help for you..!!

Answer 4

app:passwordToggleEnabled in TextInputLayout Property

Add Dependency

compile 'com.android.support:design:25.0.1'
    compile 'com.android.support:support-v4:25.0.1'
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:support-vector-drawable:25.0.1'

  <android.support.design.widget.TextInputLayout
        android:id="@+id/layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/layout_email"
        android:textColorHint="@color/colorHint"
        app:passwordToggleEnabled="true">

        <EditText
            android:id="@+id/editTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="45dp"
            android:hint="@string/hint_password"
            android:inputType="textPassword"
            android:textColor="@color/textColor" />
    </android.support.design.widget.TextInputLayout>

Answer 5

Use app:passwordToggleDrawable to change the icon. Use app:passwordToggleTint to change the color of the icon, this will only work if the icon is a vector drawable.

   <android.support.design.widget.TextInputLayout
            android:id="@+id/layoutTextInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/colorPrimary"
            app:passwordToggleDrawable="@drawable/ic_visibility_on">

        <android.support.design.widget.TextInputEditText
                android:id="@+id/editTextValue"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:drawablePadding="5dp"
                android:imeOptions="actionNext"
                android:inputType="textPassword"
                android:hint="Password"/>

    </android.support.design.widget.TextInputLayout>

Answer 6

Create a new drawable file and named it as show_password_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_visibility_black_18dp" android:state_checked="true"/>
<item android:drawable="@drawable/ic_visibility_off_black_18dp"/>
</selector>

and in your layout file, add app:passwordToggleDrawable attribute in TextInputLayout :

<android.support.design.widget.TextInputLayout
    android:id="@+id/layoutTextInput"
    app:passwordToggleEnabled="true"
    app:passwordToggleDrawable="@drawable/show_password_selector"
    android:textColorHint="@color/gray">
    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/editTextValue"
        android:imeOptions="actionNext"
        android:layout_marginBottom="8dp"
        android:inputType="text"/>
</android.support.design.widget.TextInputLayout>

For Reference: https://www.youtube.com/watch?v=dW0YIV0Z9qk