如何更改TextInputLayout中密码切换按钮的颜色？

Question

如果EditText获取或失去焦点，我需要更改TextInputLayout中密码切换的颜色。我已经尝试了以下方法，但没有成功。颜色始终等于灰色（来自未获取焦点状态）。

布局

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        app:passwordToggleDrawable="@drawable/password_toggle_selector"
        app:passwordToggleTint="@color/color_password_toggle">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

颜色密码切换

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_green" android:state_checked="true"  />
    <item android:color="@color/color_grey" android:state_focused="true" />
    <item android:color="@color/color_light_grey" android:state_focused="false" />

密码切换选择器

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

- druger

Answer 1

使用Material Components library中的TextInputLayout，passwordToggleTint属性（用于密码可见性切换的图标）已被弃用。现在只需使用endIconTint属性即可。

<com.google.android.material.textfield.TextInputLayout
    ...
    app:endIconMode="password_toggle"
    android:hint="Password"
    style="@style/FilledBoxEndIconTint">

    <com.google.android.material.textfield.TextInputEditText
         ...
         android:inputType="textPassword"/>

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

使用：

  <style name="FilledBoxEndIconTint" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="endIconTint">@color/my_selector_color</item>
  </style>

你可以使用颜色或选择器。

您还可以在布局中使用app:endIconTint属性：

 <com.google.android.material.textfield.TextInputLayout
            ...
            app:endIconMode="password_toggle"
            android:hint="Password"
            app:endIconTint="@color/my_selector_color">

默认选择器是：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_activated="true"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

- Gabriele Mariotti

---

它并没有帮助我。它是这样工作的，但我需要这样。 - druger

这是一个具有标准行为的标准组件。只需在选择器中更改颜色，但不能引入新状态。 - Gabriele Mariotti

Answer 2

我在 TextInputLayout 中使用了 app:passwordToggleTint="@android:color/black"。

- ashishdhiman2007

---

简单而最佳的答案 - Khaled Saifullah

Answer 3

在res/color目录中创建color_password_toggle.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/color_green" android:state_checked="true"  />
<item android:color="@color/color_light_grey" android:state_checked="false" />

您可以删除自定义图标，使用默认的眼睛图标：

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/color_password_toggle">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>

- Youssef Amine AMIMI

---

我将color_password_toggle添加到res/color目录中，它可以正常工作。 - Doha

Answer 4

当 TextInputEditText 获得焦点时，似乎并未将 TextInputLayout 的状态设置为 state_activated。

不过，如果你创建自己的版本的 TextInputEditText，实现这一点就很容易了。

class MyTextInputEditText : TextInputEditText {
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    constructor(context: Context) : super(context)

    override fun onFocusChanged(focused: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
        super.onFocusChanged(focused, direction, previouslyFocusedRect)
        getTextInputLayout()?.setEndIconActivated(focused)
    }

    //copied from TextInputEditText (why this is private?)
    private fun getTextInputLayout(): TextInputLayout? {
        var parent = parent
        while (parent is View) {
            if (parent is TextInputLayout) {
                return parent
            }
            parent = parent.getParent()
        }
        return null
    }
}

基本上只需按照@gabriele-mariotti的建议，创建一个选择器，将android:state_activated、android:state_enabled和android:state_checked组合起来以满足您的需求。

我已经在Material库中提出了一项更改，请在GitHub上检查PR。

- rewgoes