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.

<android.support.design.widget.TextInputLayout
    android:id="@+id/layoutTextInput"
    android:textColorHint="@color/aluminium">
    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/editTextValue"
        android:imeOptions="actionNext"
        android:layout_marginBottom="8dp"
        android:inputType="text"/>
</android.support.design.widget.TextInputLayout>

I want to use custom icons instead of normal icons(eye-icon). Please help me.

Answer 1

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