Change to custom icon from eye-icon(default) for hide-show password in android EditText
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
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>
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.