如何正确设置 com.google.android.material.textfield.TextInputLayout 的样式？

Question

我们有一个具有许多不同风格的品牌应用程序，并且最近切换到了 Material 组件。 从那以后，突然所有的 TextInputLayouts 都有这个丑陋的灰色背景

我在https://material.io/develop/android/components/text-input-layout/ 阅读了谷歌文档，发现boxBackgroundColor 在直接用于xml 布局时可以正常工作，如下所示：

        <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/edit_gsm_groupname_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ** app:boxBackgroundColor="?attr/theme_backColor" **
        android:layout_alignBottom="@+id/edit_gsm_icon"
        android:layout_toEndOf="@+id/edit_gsm_icon">

由于应用程序的大小和使用的输入字段的数量，在我们拥有的每个布局中都放置该行并不是一个真正可行的选择。

所以我尝试通过样式来解决它，我们已经有几十个处于活动状态。

我在 AlertTheme 和 AppTheme 中试过，像这样：

    <style name="baseAppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ... lots of settings...

    <!--Custom animations-->
    <item name="colorPrimaryDark">?attr/theme_branding_01</item>
    <item name="colorPrimary">?attr/theme_branding_02</item>
    <item name="colorPrimaryLight">?attr/theme_branding_05</item>
    <item name="colorAccent">?attr/theme_branding_03</item>

    <!--Control coloring-->
    <item name="android:colorBackground">?attr/theme_branding_14</item>
    <item name="android:colorForeground">?attr/theme_branding_11</item>
    <item name="colorControlNormal">?attr/theme_branding_11</item>
    <item name="colorControlActivated">?attr/colorAccent</item>
    <item name="android:textColor">@color/base_active_inactive_text_colors</item>
    <item name="android:editTextColor">?attr/theme_branding_11</item>
    <item name="android:textColorHint">?attr/colorAccent</item>
    ** <item name="boxBackgroundColor">?attr/theme_branding_14</item>  **


    <!--System properties-->
    <item name="android:windowBackground">?attr/theme_branding_14</item>
    <item name="android:textColorPrimary">?attr/theme_branding_14</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">?attr/colorPrimaryDark</item>
    <item name="materialAlertDialogTheme">@style/baseAlertDialogTheme</item>
</style>

<style name="baseAlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">

    <!--Control coloring-->
    <item name="android:windowBackground">?attr/theme_branding_14</item>
    <item name="android:colorBackground">?attr/theme_branding_14</item>
    <item name="android:colorForeground">?attr/theme_branding_11</item>
    <item name="colorControlNormal">?attr/theme_branding_11</item>
    <item name="colorControlActivated">?attr/colorAccent</item>
    <item name="android:textColor">?attr/theme_branding_11</item>
    <item name="android:editTextColor">?attr/theme_branding_11</item>
    <item name="android:textColorHint">?attr/colorAccent</item>
    ** <item name="boxBackgroundColor">?attr/theme_branding_14</item>  **

    <!--Alert dialog colors-->
    <item name="android:textColorPrimary">?attr/theme_branding_11</item>
    <item name="android:background">?attr/theme_branding_14</item>

    <!--Alert button colors-->
    ... button styles ...
    <item name="android:buttonBarPositiveButtonStyle">@style/baseAlertDialogButton</item>

</style>

但不知何故，boxBackgroundColor 在通过样式设置时似乎没有效果。 我发现了这个问题Material TextInputLayout styles are not working，据说它在预览模式下不起作用，但我试图将它推送到设备上——它在运行时也不起作用。

这个问题的解决方案会很棒 - 我怎样才能摆脱灰色背景？它应具有与旧 TextInputLayout 一样的正常背景颜色。

提前致谢， 干杯， 格里斯

Answer 1

即使我遇到了类似的问题，我也以下面描述的方式使用了 textinputlayout，这很好。

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/enterEmailTextLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/enteredEmailEditText"
            style="@style/Nunito_Sans_Roman"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:backgroundTint="@color/white_100"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
          />
    </com.google.android.material.textfield.TextInputLayout>

如果这符合您的要求，您可以试试这个。希望这会有所帮助

Answer 2

您不能在应用主题中使用boxBackgroundColor。

相反，您可以全局使用 textInputStyle 属性在您的应用主题中定义 TextInputLayout 使用的样式：

<style name="baseAppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ...
    <item name="textInputStyle">@style/myFilledBox</item>
</style>

与：

<style name="myFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
   <item name="boxBackgroundColor">@color/filled_background_color_selector</item>
</style>