如何更改 TextinputLayout 的标签和编辑文本下划线的颜色 android

Question

我正在使用 android 设计库的 TextinputLayout。但是无法自定义TextinputLayout里面EditText的提示颜色、标签颜色和下划线颜色。请帮忙。

Answer 1

<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

您可以为布局覆盖此样式

您也可以更改内部 EditText 项目的样式。

Answer 2

更改底线颜色：

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

有关更多信息，请查看 this thread。

浮动时更改提示颜色

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

并像这样使用它：

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

当不是浮动标签时更改提示颜色：

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

感谢

Answer 3

此 Blog Post 描述了 EditText 和 AutoCompleteTextView 由 TextInputLayout 包装的各种样式方面。

对于 EditText 和 AppCompat lib 22.1.0+ 您可以使用一些与主题相关的设置来设置主题属性：

<style name="StyledTilEditTextTheme">
   <item name="android:imeOptions">actionNext</item>
   <item name="android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="android:textColorPrimary">@color/blue</item>
   <item name="android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="android:theme">@style/StyledTilEditTextTheme</item>
    <item name="android:paddingTop">4dp</item>
</style>

并将它们应用于 EditText:

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

对于 AutoCompleteTextView 事情更复杂，因为将其包装在 TextInputLayout 中并应用此主题会破坏浮动标签行为。您需要在代码中解决此问题：

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

并在 Activity.onCreate 中：

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});

Answer 4

<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="android:textColorHint">@color/actionBar_background</item>
</style>

将此样式应用于 TextInputLayout

Answer 5

根据和其他人的回答，我创建了一个默认配置。

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

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

重点：

没有焦点：

错误信息：

Answer 6

如果您想更改 bar/line 颜色和 TextInputLayout 的提示文本颜色 （强调色通常是什么），那么只需创建此样式：

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

然后将其应用到您的 TextInputLayout 作为主题:

<android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

这基本上是将主题（不是样式）设置为一个视图（与整个 activity 相反）。

Answer 7

在Edittext标签中添加此属性即可享受：

 android:backgroundTint="@color/colorWhite"

Answer 8

TextinputLayout 不是视图，而是 Layout，正如 Dimitrios Tsigouris in his blog post here 所描述的那样。因此，您不需要仅用于 Views 的 Style，而是使用 Theme。按照博客 post，我最终得到以下解决方案：

从 styles.xml 开始

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="android:textColor">@color/your_colour_here</item>
        <item name="android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

并在您的布局中添加

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

Answer 9

随着Material Components Library you can use the com.google.android.material.textfield.TextInputLayout.

您可以应用自定义样式来更改颜色。

要更改提示颜色，您必须使用这些属性：
hintTextColor 和 android:textColorHint.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</item>
</style>

您应该为 android:textColorHint 使用选择器。类似于：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

要更改底线颜色，您必须使用属性：boxStrokeColor.

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

同样在这种情况下，您应该使用选择器。类似于：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

您还可以在布局中应用这些属性：

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>

Answer 10

我使用了以上所有答案，none 成功了。此答案适用于 API 21+。在文本字段获得焦点时使用 app:hintTextColor 属性，在其他状态时使用 app:textColorHint 属性。要更改底线颜色，请使用此属性 app:boxStrokeColor，如下所示：

<com.google.android.material.textfield.TextInputLayout
            app:boxStrokeColor="@color/colorAccent"
            app:hintTextColor="@color/colorAccent"
            android:textColorHint="@android:color/darker_gray"
    
       <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

它也适用于 AutoCompleteTextView。希望它对你有用:)

Answer 11

适合我。如果您尝试使用带有标签的 EditText 并尝试更改下划线颜色，请使用它。更改为 TextInputEditText 而不是 EditText。

           <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/editTextTextPersonName3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/_16sdp"
                android:layout_marginLeft="@dimen/_16sdp"
                android:layout_marginTop="@dimen/_16sdp"
                android:layout_marginEnd="@dimen/_8sdp"
                android:layout_marginRight="@dimen/_8sdp"
                android:textColorHint="@color/white"
                app:layout_constraintEnd_toStartOf="@+id/guideline3"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:backgroundTint="@color/white"
                    android:hint="Lastname"
                    android:textSize="@dimen/_14sdp"
                    android:inputType="textPersonName"
                    android:textColor="@color/white"
                    android:textColorHint="@color/white" />
            </com.google.android.material.textfield.TextInputLayout>

Answer 12

更改 TextInputLayout + TextInputEditText 的线条颜色

colors.xml

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">@color/lineColor</color>

styles.xml

<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="boxStrokeColor">@color/lineColor</item>
    <item name="android:textColorHint">@color/hintColor</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="boxBackgroundColor">@color/backgroundColor</item>
</style>

<style name="TextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <item name="android:textColor">@color/black</item>
</style>

layout.xml

<com.google.android.material.textfield.TextInputLayout
            style="@style/TextInputLayout"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">

            <com.google.android.material.textfield.TextInputEditText
                style="@style/TextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>

Answer 13

您可以使用 TextInputLayout 中的 app:hintTextAppearance 属性更改 TextInputLayout 的 标签颜色 。

<android.support.design.widget.TextInputLayout
    android:id="@+id/inputlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout">

    <EditText
        android:id="@+id/mail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="@string/email"
        android:inputType="textEmailAddress"
        android:maxLines="1"
        android:paddingStart="5dp"
        android:singleLine="true"/>

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

风格:

 <style name="TextAppearance.App.TextInputLayout" 
 parent="@android:style/TextAppearance">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textSize">20sp</item>
    </style>

要更改 edittext 下划线颜色，您可以使用 android:backgroundTint

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Underline color change"
        android:backgroundTint="@android:color/holo_red_light" />

Answer 14

我需要更改 TextInputLayout 中 TextInputEditText 的底线颜色，然后其他答案没有解决。我终于通过为 TextInputLayouts 主题设置 colorOnSurface 解决了这个问题。我会在这里留下我的代码，以防它对其他人有帮助。

XML:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme=""@style/TextInputLayoutStyle"">

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

</com.google.android.material.te`tfield.TextInputLayout>

风格：

<style name="TextInputLayoutStyle">
    <item name="colorOnSurface">#0ff</item>
</style>

Answer 15

创建如下所述的样式

<style name="text_input_layout_style">
        <item name="colorControlNormal">@color/primary</item>
        <item name="colorControlActivated">@color/primary</item>
        <item name="colorControlHighlight">@color/primary</item>
</style>

并将其应用到您的 TextInputLayout 作为 android:theme="@style/text_input_layout_style"

而且肯定会为大家工作。

如何更改 TextinputLayout 的标签和编辑文本下划线的颜色 android

how to change color of TextinputLayout's label and edittext underline android

android

android-design-library

android-textinputlayout

更改底线颜色：

浮动时更改提示颜色

当不是浮动标签时更改提示颜色：

colors.xml

styles.xml

layout.xml