TextInputLayout提示错误状态的颜色

时间:2017-10-10 13:43:15

标签: android android-design-library

根据谷歌材料指南:

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

TextInputLayout提示应与错误消息的颜色相同:

enter image description here

然而它不是那样的,当我打电话给setError("My error")时,只有下划线和错误信息显示为红色。

如何根据Google自己的指南更改此行为?

7 个答案:

答案 0 :(得分:11)

这是你如何做到的

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

<强> style.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);

答案 1 :(得分:2)

现在,这是默认行为。为此,只需将您的支持库版本更新为28 +。

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

答案 2 :(得分:0)

Here is an example:

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

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

Snapshot:

In image : TextInputLayout hint should be the same color as the Error message

答案 3 :(得分:0)

  1. Xml中的T​​extInputLayout

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:id="@+id/tx_login_password"
            app:errorEnabled="true"
            style="@style/text_input_style"
            app:passwordToggleEnabled="true"
            app:hintTextAppearance="@style/text_Apearence"
            android:layout_below="@id/tx_login_username"
            android:layout_centerHorizontal="true"
            app:theme="@style/Theme.App.Base"
            android:layout_marginLeft="70dp"
            android:layout_marginStart="70dp"
            android:layout_marginRight="70dp"
            android:layout_marginEnd="70dp"
            app:errorTextAppearance="@style/text_Apearence"
            android:layout_height="wrap_content">
            <android.support.v7.widget.AppCompatEditText
                android:layout_width="match_parent"
                android:layout_marginTop="10dp"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:paddingTop="5dp"
                android:typeface="sans"
                android:textStyle="bold"
                android:textSize="15sp"
                android:maxLines="1"
                android:inputType="textPassword"
                android:lines="1"
                android:elegantTextHeight="true"
                android:textAlignment="viewStart"
                android:layout_gravity="start"
                android:id="@+id/password"
                android:theme="@style/Theme.App.Base"
                app:theme="@style/Theme.App.Base"
                style="@style/EditText_style"
                />
        </android.support.design.widget.TextInputLayout>
    
  2. text_Apearence in style.xml文件来自资源

  3. <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文件
    2. <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>

      Image Looks Like

答案 4 :(得分:0)

您可以使用“ helperTextTextColor”属性来执行此操作。

-fPIC

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

app:hintTextColor="@color/color_login_text_hint" app:helperTextTextColor="@color/error_color">

答案 5 :(得分:0)

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

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

答案 6 :(得分:-1)

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