从android-EditText中隐藏显示密码的eye-icon(默认)更改为自定义图标

Question

我想在android edittext中更改/显示show password的不同图标.我正在使用以下代码来显示图标.

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

我想使用自定义图标而不是普通图标(眼睛图标).请帮我.

Answer 1

创建一个新的drawable文件并将其命名为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>

并在您的布局文件中添加app:passwordToggleDrawable属性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>

供参考:https://www.youtube.com/watch？v = dW0YIV0Z9qk

Answer 2

使用app:passwordToggleDrawable更改图标。使用app:passwordToggleTint更改图标的颜色，这只会工作，如果该图标是一个矢量绘制。

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

如果您想使用默认的眼睛图标（显示/隐藏密码）但更改图标颜色，那么您只需将行

app:passwordToggleTint="@color/yourColor"

如果您想使用自定义眼睛图标，您应该使用

app:passwordToggleDrawable 

更改图标。并使用

app:passwordToggleTint 

更改图标的颜色。您的自定义图标颜色不显示。将显示色调颜色。整个xml代码如下：

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

和 show_password_selector.xml 如下：

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

希望对大家有所帮助。