Material Design TextInputEditText 未激活时的边框颜色答案

【问题标题】：Material Design TextInputEditText Border Color When Not ActivatedMaterial Design TextInputEditText 未激活时的边框颜色
【发布时间】：2019-04-23 15:12:51
【问题描述】：

我将TextInputEditText 小部件放置在白色背景上。当片段第一次加载时，小部件没有焦点。小部件周围的边框是白色的（或几乎是白色的），因此它在白色背景上是不可见的。这是该小部件的屏幕截图，绘制在黑色背景上以进行对比：

只要我点击小部件，边框就会变成我的原色，这正是我想要的。这是激活小部件后的类似屏幕截图。

我试图通过一种风格来控制这些颜色，我已经尝试了我能想到的一切，但我不知道如何调整那种颜色。这是我的风格（请随意嘲笑各种尝试）：

<style name="MyTextInputLayout" parent="Base.Widget.MaterialComponents.TextInputLayout">
    <item name="android:colorBackground">@android:color/black</item>
    <item name="android:textColorHint">@color/colorPrimary</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
    <item name="android:colorControlActivated">@android:color/black</item>
    <item name="android:colorControlNormal">@android:color/black</item>
    <item name="android:colorControlHighlight">@android:color/black</item>
    <item name="android:backgroundTint">@android:color/black</item>
    <item name="android:colorAccent">@android:color/black</item>
</style>

<style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:colorBackground">@android:color/black</item>
    <item name="android:colorControlActivated">@android:color/black</item>
    <item name="android:colorControlNormal">@android:color/black</item>
    <item name="android:colorControlHighlight">@android:color/black</item>
    <item name="android:backgroundTint">@android:color/black</item>
    <item name="android:colorAccent">@android:color/black</item>
</style>

最后，布局的 xml 以防万一：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:layout_marginBottom="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    style="@style/MyTextInputLayout">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/reg_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username"
        style="@style/MyTextInputEditText"/>

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

当小部件处于非活动状态（即没有焦点）时，如何更改此边框颜色？

【问题讨论】：

您是否尝试将 textInputLayout 属性赋予 textInputEditText ？喜欢MaterialComponents.TextInputLayout.OutlinedBox.Dense
尝试将属性<item name="colorControlNormal">#c5c5c5</item> <item name="colorControlActivated">@color/accent</item> <item name="colorControlHighlight">@color/accent</item> 设置为主题。
查看这个答案stackoverflow.com/a/50818399/7666442

标签： android material-design

【解决方案1】：

我通过两个主要步骤解决了这个问题：

我遇到的第一个问题是我的TextInputLayout 样式的父样式需要更改为Widget.MaterialComponents.TextInputLayout.OutlinedBox。
当我弄清楚这一点后，我在 Android xml 中查找了该样式，并找到了一个名为 mtrl_box_stroke_color.xml 的文件。这是一个选择器，其中声明了标准 TextInputLayout 边框的三种颜色。该文件如下所示：

所以我复制了它并在我称为 edit_text_box_border.xml 的 res/color 文件夹中创建了我自己的文件。我修改了这三种颜色以适应我的目的，最终想出了这个：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorPrimary" android:state_focused="true"/>
    <item android:alpha="0.87" android:color="@color/colorPrimary" android:state_hovered="true"/>
    <item android:alpha="0.12" android:color="@color/colorPrimary" android:state_enabled="false"/>
    <item android:alpha="0.38" android:color="@color/colorPrimary"/>
</selector>

然后，回到我的风格，我不得不摆脱我的许多颜色尝试，并为 boxStrokeColor 添加一个指向该文件的项目。以下是两种样式：

<style name="MyTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="android:textColorHint">@color/colorPrimary</item>
        <item name="android:paddingStart">16dp</item>
        <item name="android:paddingEnd">16dp</item>
        <item name="boxStrokeColor">@color/edit_text_box_border</item>
    </style>

    <style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
        <item name="android:textColor">@android:color/black</item>
    </style>

现在，当我运行应用程序时，我会从这个开始：

当我点击它时，它变成了这个：

这就是我想要的，所以问题解决了。希望这对某人有所帮助。

【讨论】：

这将改变整个应用程序中所有TextImputs的颜色
运行此“该组件的样式要求您的应用主题为 Theme.MaterialComponents（或后代）”时出现错误。 .解决办法是什么
此方法不适用于实现 'com.google.android.material:material:1.2.1'

【解决方案2】：

1.

<com.google.android.material.textfield.TextInputLayout
 ...
 style="@style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
 app:boxStrokeColor = "@android:color/holo_purple"  
 //border color when in active status
 ...

2。在 colors.xml 文件中添加以下内容

<color name="mtrl_textinput_default_box_stroke_color">#00ff00</color> //border color when in inactive status

【讨论】：

谢谢。不确定这是否可行，但如果可行，我将不得不将它单独应用于每个 TextInputLayout。我的问题是关于如何在主题中做到这一点。
你拯救了我的一天！！
请记住，您的活动/应用主题必须是 Theme.MaterialComponents. 而不是 AppCompat

【解决方案3】：

如果您需要动态更改轮廓颜色（例如用于自动字段验证），您可以使用以下技巧：

设置

app:errorTextColor="@color/colorAccepted"
app:errorIconTint="@color/colorAccepted"

用于 xml 中的 TextInputLayout。

然后在代码中：

text_input_layout.errorIconDrawable = null 删除错误图标

和text_input_layout.error = " " 启用着色或text_input_layout.error = null 禁用它。

这样 TextInputLayout 会占用更多空间。要解决此问题，您可以通过定义自己的样式来自定义 errorTextAppearance：

<style name="ErrorTextStyle" parent="TextAppearance.MaterialComponents.Caption">
        <item name="android:textSize">0sp</item>
</style>

注意： 这显然是一种 hack，而不是正确的解决方案。

【讨论】：

【解决方案4】：

添加

        app:boxStrokeColor="@color/black"
        app:hintTextColor="@color/black"

到您的 XML 文件。我尝试了所有颜色选项。您可以用任何颜色的十六进制代码替换“@color/black”。还要写 app:color 和 android 会显示所有的颜色选项，有很多颜色字段可以改变，比如错误字段我们可以设置为红色表示用户输入了无效数据。

【讨论】：

【解决方案5】：

我用这个：

<style name="TextInputLayoutTheme" parent="TextAppearance.AppCompat">
    <item name="android:textColorHint">@color/secondaryTextLight</item>
    <item name="android:backgroundTint" tools:targetApi="lollipop">@color/colorAccent</item>
    <item name="android:textColor">@color/white</item>
    <item name="colorControlActivated">@color/colorAccent</item>
</style>

在 xml 中：

<com.google.android.material.textfield.TextInputEditText
                style="@style/TextInputLayoutTheme"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

【讨论】：