如何在使用 Material Design 主题时自定义 TextInputLayout？

Question

我想自定义TextInputLayout的错误文本颜色。我的应用程序主题基于MaterialComponents主题之一，即Theme.MaterialComponents.Light.DarkActionBar。我已经创建了一个基于TextAppearance.Design.Error的自定义文本样式，并创建了一个基于Widget.Design.TextInputLayout的自定义样式，以设置我的TextInputLayout组件的样式。但编辑框的错误和标签没有在创建的样式中显示。

这是我的代码:

styles.xml

<style name="ErrorText" parent="TextAppearance.Design.Error">
    <item name="android:textColor">@color/materialRed</item>
    <item name="android:textSize">16sp</item>
</style>
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
    <item name="errorTextAppearance">@style/ErrorText</item>
</style>

同时，我已经将我的TextInputLayout的主题设置为这个自定义样式：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/usernameWrapper"
    app:errorTextAppearance="@style/TextInputLayoutAppearance"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

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

- talha06

Answer 1

仅需使用自定义样式即可，例如：

   <com.google.android.material.textfield.TextInputLayout
            style="@style/ErrorTextInputLayout"
            ...>

使用：

  <style name="ErrorTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="errorTextAppearance">@style/myErrorTextAppearance</item>
    <item name="errorTextColor">@color/text_input_error_selector</item>
  </style>

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

errorTextColor 可以是颜色或选择器。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorOnError" android:state_enabled="false"/>
  <item android:color="?attr/colorError"/>
</selector>

注意所使用的文字大小。

您还可以在布局中使用app:errorTextAppearance和app:errorTextColor属性：

<com.google.android.material.textfield.TextInputLayout
    app:errorTextAppearance="@style/myErrorTextAppearance"
    app:errorTextColor="@color/text_input_error_selector"
    ...>

- Gabriele Mariotti

Answer 2

style.xml

<style name="ErrorText" parent="TextAppearance.Design.Error">
    <item name="android:textSize">11sp</item>
    <item name="android:textColor">@color/accentRed</item>
</style>
<style name="EditTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/lightGrey</item>
    <item name="boxStrokeWidth">0.5dp</item>
    <item name="boxBackgroundColor">@color/slightGrey</item>
    <item name="errorTextAppearance">@style/ErrorText</item>
</style>

Layout.xml

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintEnabled="false"
        android:layout_marginTop="40dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginLeft="32dp"
        android:layout_marginStart="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        app:errorEnabled="true"
        style="@style/EditTextInputLayoutStyle">

    <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:inputType="textEmailAddress"
            android:ems="10"
            android:id="@+id/emailaddress"
            android:hint="@string/email_username_placeholder"
            android:padding="20dp"
            style="@style/editTextstyle"/>

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

- Fawaz

---

你没有在styles.xml中定义editTextStyle吗？ - talha06

boxBackgroundColor不支持alpha通道颜色。如何解决？ - Amit Jayant