TextInputLayout错误状态下的提示颜色

Question

根据Google的Material设计准则：

https://material.io/guidelines/components/text-fields.html#text-fields-layout

TextInputLayout的提示应该与错误信息的颜色相同：

但实际上并非如此，当我调用setError("My error")时，只有下划线和错误消息显示为红色。

我该如何改变这种行为以符合谷歌自己的指南？

- MichelReap

---

你能展示一下你所遇到的实际问题吗？ - azizbekian

https://dev59.com/6VsX5IYBdhLWcg3whvwn - Murat Karagöz

尝试使用此答案：https://dev59.com/wl0Z5IYBdhLWcg3w_0h8 - Piash Sarker

你有答案了吗？ - harshita

Answer 1

以下是您可以实现它的方法：

 <android.support.design.widget.TextInputLayout
        android:padding="8dp"
        android:id="@+id/tilSample"
        app:errorTextAppearance="@style/error_appearance"
        app:hintTextAppearance="@style/error_appearance"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/etSample"
            android:layout_margin="8dp"
            android:padding="8dp"
            android:hint="android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.TextInputLayout>

样式.xml

<style name="error_appearance" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/colorRed</item>
        <item name="android:textSize">12sp</item>
    </style>

colors.xml

   <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorRed">#f44336</color>
</resources>

编辑

我们也可以通过代码来操纵错误和提示颜色，方法如下：

tilSample.setErrorTextAppearance(R.style.error_appearance);  
tilSample.setHintTextAppearance(R.style.error_appearance);

- vikas kumar

---

{btsdaf} - vikas kumar

Answer 2

现在这是默认行为。要实现这一点，只需将您的支持库版本更新到28+即可。

implementation 'com.android.support:design:28.0.0'

- snersesyan

Answer 3

我们可以将错误信息当作辅助文本来处理，因为如果您设置了错误，它肯定会更改提示颜色，所以我只是使用了 helperText 而不是 setError，以下是一个示例

XML 文件

<com.google.android.material.textfield.TextInputLayout
                  android:id="@+id/textInputLayoutUserName"
                  android:layout_width="@dimen/view_0x"
                  android:layout_height="wrap_content"
                  style="@style/errorEnabledtextInputLayoutStyle">
    
                     <EditText
                           android:id="@+id/editTextUserName"
                           android:gravity="center_vertical"
                           android:background="@drawable/edit_text_background"
                           android:backgroundTint="@color/colorGray"
                           android:hint="@string/aap_ka_naam"
                           android:singleLine="true"
                           style="@style/standardTextViewStyle"
                           tools:targetApi="lollipop"
                           app:layout_constraintHorizontal_bias="0.0"/>
    
</com.google.android.material.textfield.TextInputLayout>

edit_text_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:top="-3dp" android:left="-3dp" android:right="-3dp">
        <shape android:shape="rectangle">
               <stroke android:width="1dp" android:color="@color/colorWhite" />
               <padding android:bottom="50dp" android:top="10dp" android:right="10dp"android:left="5dp"/>
               <solid android:color="#00000000" />
        </shape>
     </item>
</layer-list>

样式

<style name="errorEnabledtextInputLayoutStyle">
        <item name="hintTextColor">@color/colorGraySix</item>
        <item name="helperTextTextColor">@color/colorNegative</item>
        <item name="hintEnabled">true</item>
</style>

功能

fun TextInputLayout.setErrorText(error : String, editText: EditText) {
     this.helperText = error
     editText.backgroundTintList = ColorStateList.valueOf(
            ResourcesCompat.getColor(resources,
            R.color.colorNegative, null)
      )
}

使用方法

textInputLayoutUserName.setErrorText(getString(R.string.name_error), editTextUserName)

- Huma

Answer 4

在Xml中的TextInputLayout

来自资源文件style.xml的text_Apearence。

<style name="text_Apearence" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">15sp</item>
        <item name="textColor">@color/react_blue</item>
        <item name="android:colorActivatedHighlight">@color/react_blue</item>
        <item name="android:colorControlActivated">@color/react_blue</item>
    </style>
   

 1.  3. Style for Text Input Layout text_input_style XML file

<!-- begin snippet: js hide: false console: true babel: false -->

1. 关于文本输入布局的样式，请参考text_input_style XML文件。

<style name="text_Apearence" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">15sp</item>
        <item name="textColor">@color/react_blue</item>
        <item name="android:colorActivatedHighlight">@color/react_blue</item>
        <item name="android:colorControlActivated">@color/react_blue</item>
    </style>

图片外观

- Mallikarjuna

Answer 5

这里有另一种你可以尝试的方法

fun wrapInCustomStyle(myText: String): Spannable? {
val spannable = SpannableString(myText) Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

//Test 'Alignment.ALIGN_OPPOSIT' Too if not working

spannable.setSpan(

    AlignmentSpan.Standard(Layout.Alignment.ALIGN_NORMAL), 0,
    myText.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
) 
return spannable

}

InputLayout.error=wrapInCustomStyle("sample")

- Amin Turkzadeh

Answer 6

您可以使用“helperTextTextColor”属性来实现此功能。

<com.google.android.material.textfield.TextInputLayout
            app:hintTextColor="@color/color_login_text_hint"
            app:helperTextTextColor="@color/error_color">
</com.google.android.material.textfield.TextInputLayout>

- MeoMunm

Answer 7

这里是一个例子：

    <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/email_layout"
                android:textColorHint="@color/gray"
                app:errorTextAppearance="@style/TextAppearence.App.TextInputLayout"
                app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout">

    <android.support.design.widget.TextInputEditText
                    android:id="@+id/et_email"
                    style="@style/TextStyle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:cursorVisible="true"
                    android:gravity="center|left|bottom"
                    android:hint="@string/email"
                    android:inputType="textEmailAddress"
                    android:maxLength="50"
                    android:paddingBottom="10dp"
                    android:textColor="@color/black_effective"
                    android:textSize="18sp" />

    </android.support.design.widget.TextInputLayout>

样式文件：

   <style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/gray</item>
    </style>

快照：

- Rahil Ali

---

{btsdaf} - MichelReap

{btsdaf} - Rahil Ali

{btsdaf} - MichelReap

{btsdaf} - Rahil Ali

Answer 8

<style name="text_Apearence" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">15sp</item>
        <item name="textColor">@color/react_blue</item>
        <item name="android:colorActivatedHighlight">@color/react_blue</item>
        <item name="android:colorControlActivated">@color/react_blue</item>
    </style>
   

 

- Mallikarjuna

---

colorActivatedHighlight和colorControlActivated是主题属性。它们需要在主题中设置。 - Sebastian Engel