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

user_7934805 0
Viewed 59024

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.

android-textinputlayout android
10 Answers

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.

user_11691770

Example changing the icon of show/hide password (ic_baseline_add_24 <=> hide password, ic_baseline_edit_24 <=> show password)

drawable/ic_showhide_password.xml

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

xml

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:endIconDrawable="@drawable/ic_showhide_password"
    app:endIconMode="password_toggle">

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />

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

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>

enter image description here

user_20165620

1.create a xml layout...I have created in my way

                   <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/_50dp"
                    android:layout_marginTop="@dimen/_15dp">

                    <android.support.v7.widget.AppCompatEditText
                        android:id="@+id/etCurrentPassword"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/drawable_edit_text_2"
                        android:fontFamily="@font/poppins"
                        android:hint="@string/old_password"
                        android:inputType="textPassword"
                        android:padding="@dimen/_10dp" />

                    <android.support.v7.widget.AppCompatImageView
                        android:id="@+id/imgShowPassword1"
                        android:layout_width="@dimen/_50dp"
                        android:layout_height="@dimen/_50dp"
                        android:layout_gravity="end|center_vertical"
                        android:layout_marginRight="@dimen/_10sp"
                        android:padding="@dimen/_12dp"
                        android:tint="@android:color/darker_gray"
                        app:srcCompat="@drawable/ic_eye" />
                </FrameLayout>

2.In activity class: call the method with the mathing parameters

showORhidePass(view,etRetypePassword,showPassword3 = !showPassword3);

void showORhidePass(AppCompatImageView imageView, AppCompatEditText editText, Boolean save){

        if (TextUtils.isEmpty(editText.getText())){
            return;
        }

        if (save){
            editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            editText.setSelection(editText.length());
            imageView.setColorFilter(ContextCompat.getColor(requireContext(), android.R.color.darker_gray));
        }else{
            editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
            editText.setSelection(editText.length());
            imageView.setColorFilter(ContextCompat.getColor(requireContext(), R.color.colorPrimary));
        }

    }
user_82432410

Using the Android Material library all you need is -> app:passwordToggleEnabled="true"

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/TextInputLayout_password"
    style="@style/TextInputLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="24dp"
    android:hint="Password"
    app:passwordToggleEnabled="true">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password_EditText"
        style="@style/EditText_Common_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:imeOptions="actionDone"
        android:inputType="textPassword"
        app:errorEnabled="true" />
        
</com.google.android.material.textfield.TextInputLayout>
user_98016850
Related