使用材质设计主题时如何自定义TextInputLayout？

Question

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

这是我的代码：

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>

Answer 1

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>

Answer 2

只需使用自定义样式，例如：

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

请注意所用的textSize。

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

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