如何改变TextInputLayout的浮动标签颜色

How to change the floating label color of TextInputLayout

参考Google发布的新TextInputLayout,如何更改浮动标签文字颜色?

在样式中设置 colorControlNormalcolorControlActivatedcolorControlHighLight 没有帮助。

这是我现在拥有的:

找到答案,使用android.support.design:hintTextAppearance属性设置自己的浮动标签外观。

示例:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:hintTextAppearance="@style/TextAppearance.AppCompat">

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/prompt_password"/>
</android.support.design.widget.TextInputLayout>
<style name="TextAppearance.App.TextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/red</item>
    <item name="android:textSize">14sp</item>
</style>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@color/gray"  //support 23.0.0
    app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" >

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint" />
</android.support.design.widget.TextInputLayout>

你应该在这里改变你的颜色

<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>

现在,只需使用 colorAccentcolorPrimary 即可完美运行。

试试下面的代码它在正常状态下工作

 <android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:theme="@style/TextLabel">

     <android.support.v7.widget.AppCompatEditText
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:hint="Hiiiii"
         android:id="@+id/edit_id"/>

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

在样式文件夹中文本标签代码

 <style name="TextLabel" parent="TextAppearance.AppCompat">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

设置为应用程序的主主题,仅适用于高亮状态

 <item name="colorAccent">@color/Color Name</item>

更新:

UnsupportedOperationException: Can't convert to color: type=0x2 in api 16 or below

更新:

您是否在使用 Material 组件库

您可以将以下几行添加到您的主题中

 <item name="colorPrimary">@color/your_color</item> // Activated State
 <item name="colorOnSurface">@color/your_color</item> // Normal State

否则你想要在 noraml 状态和激活状态下使用不同的颜色并进行自定义,请遵循以下代码

<style name="Widget.App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item> //Changes the Shape Apperance
    <!--<item name="hintTextColor">?attr/colorOnSurface</item>-->   //When you added this line it will applies only one color in normal and activate state i.e colorOnSurface color
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorPrimary">@color/colorPrimaryDark</item>  //Activated color
    <item name="colorOnSurface">@color/colorPrimary</item>    //Normal color
    <item name="colorError">@color/colorPrimary</item>        //Error color

    //Text Appearance styles
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
    <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>

    <!--Note: When setting a materialThemeOverlay on a custom TextInputLayout style, don’t forget to set editTextStyle to either a @style/Widget.MaterialComponents.TextInputEditText.* style or to a custom one that inherits from that.
    The TextInputLayout styles set materialThemeOverlay that overrides editTextStyle with the specific TextInputEditText style needed. Therefore, you don’t need to specify a style tag on the edit text.-->
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>

<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>

将以下行添加到您的主主题中,否则您可以在 xml

中将样式设置为 textinputlayout
<item name="textInputStyle">@style/Widget.App.TextInputLayout</item>

好的,所以,我发现这个答案非常有帮助,感谢所有做出贡献的人。不过,只是为了添加一些东西。接受的答案确实是正确的答案......但是......在我的情况下,我希望在 EditText 小部件下方使用 app:errorEnabled="true" 实现错误消息,这一行让我的生活变得困难。这似乎覆盖了我为 android.support.design.widget.TextInputLayout 选择的主题,它具有由 android:textColorPrimary.

定义的不同文本颜色

最后我开始将文本颜色直接应用到 EditText 小部件。我的代码看起来像这样:

styles.xml

<item name="colorPrimary">@color/my_yellow</item>
<item name="colorPrimaryDark">@color/my_yellow_dark</item>
<item name="colorAccent">@color/my_yellow_dark</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColorSecondary">@color/dark_gray</item>
<item name="android:windowBackground">@color/light_gray</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColorHint">@color/dark_gray</item>
<item name="android:colorControlNormal">@android:color/black</item>
<item name="android:colorControlActivated">@android:color/white</item>

还有我的小部件:

<android.support.design.widget.TextInputLayout
        android:id="@+id/log_in_layout_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true">

        <EditText
            android:id="@+id/log_in_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="@android:color/black"
            android:ems="10"
            android:hint="@string/log_in_name"
            android:inputType="textPersonName" />
</android.support.design.widget.TextInputLayout>

现在它显示黑色文本颜色而不是 textColorPrimary 白色。

我建议您为 TextInputLayout 制作样式主题并仅更改强调色。将父级设置为您的应用程序基本主题:

 <style name="MyTextInputLayout" parent="MyAppThemeBase">
     <item name="colorAccent">@color/colorPrimary</item>
 </style>

 <android.support.design.widget.TextInputLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:theme="@style/MyTextInputLayout">

在最新版本的支持库(23.0.0+)中,TextInputLayout在XML中取如下属性来编辑浮动标签颜色:android:textColorHint="@color/white"

我解决了问题。 这是布局:

 <android.support.design.widget.TextInputLayout
           android:id="@+id/til_username"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="@string/username"
           >

           <android.support.v7.widget.AppCompatEditText android:id="@+id/et_username"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:singleLine="true"
               />
       </android.support.design.widget.TextInputLayout>

这是风格:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
<!-- Application theme. -->


 <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="colorAccent">@color/pink</item>
        <item name="colorControlNormal">@color/purple</item>
        <item name="colorControlActivated">@color/yellow</item>
    </style>

您应该在应用程序中使用您的主题:

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
</application>

当您关注文本标签时更改其颜色。即输入它。你必须添加指定

<item name="android:textColorPrimary">@color/yourcolorhere</item>

请注意: 您必须将所有这些实现添加到您的主题中。

它对我有用..... 在 TextInputLayout

中添加提示颜色
    <android.support.design.widget.TextInputLayout
        android:textColorHint="#ffffff"
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edtTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:singleLine="true"
            />
    </android.support.design.widget.TextInputLayout>

您不需要使用 android:theme="@style/TextInputLayoutTheme" 来更改浮动标签颜色,因为它会影响用作标签的小 TextView 的整个主题。相反,您可以使用 app:hintTextAppearance="@style/TextInputLayout.HintText" where:

<style name="TextInputLayout.HintText">
  <item name="android:textColor">?attr/colorPrimary</item>
  <item name="android:textSize">@dimen/text_tiny_size</item>
  ...
</style>

让我知道解决方案是否有效:-)

更改提示颜色和编辑文本下划线颜色:colorControlActivated

更改字符计数器颜色:textColorSecondary

更改错误消息颜色:colorControlNormal

更改密码可见性按钮色调:colorForeground

有关 TextInputLayout 的更多信息,请阅读 http://www.zoftino.com/android-textinputlayout-tutorial

<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">#e91e63</item>
    <item name="android:colorForeground">#33691e</item>
    <item name="colorControlNormal">#f57f17</item>
    <item name="android:textColorSecondary">#673ab7</item>
</style>

我尝试在 android.support.design.widget.TextInputLayout 中使用 android:textColorHint 它工作正常。

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColorHint="@color/colorAccent">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Hello"
                android:imeActionLabel="Hello"
                android:imeOptions="actionUnspecified"
                android:maxLines="1"
                android:singleLine="true"/>

        </android.support.design.widget.TextInputLayout>
  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>    

将其添加到样式并将 TextInputLayout Theam 设置为 App2,它将起作用 ;)

我更喜欢使用 Widget.Design.TextInputLayout 作为 parent 而不是 Brahmam Yamani 的回答。这确保了所有必需的项目都存在,即使不是所有项目都被覆盖。在 Yamanis 的回答中,如果调用 setErrorEnabled(true),应用程序将因无法解析的资源而崩溃。

只需将样式更改为以下内容:

<style name="TextLabel" parent="Widget.Design.TextInputLayout">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/Color Name</item> 
    <item name="android:textSize">20sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/Color Name</item>
    <item name="colorControlNormal">@color/Color Name</item>
    <item name="colorControlActivated">@color/Color Name</item>
 </style>

在我的例子中,我添加了这个“app:hintTextAppearance="@color/colorPrimaryDark"在我的 TextInputLayout 小部件中。

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

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:maxLines="1"
        android:paddingTop="@dimen/_5sdp"
        android:paddingBottom="@dimen/_5sdp"
        android:textColor="#000000"
        android:textColorHint="#959aa6" />

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

res/values/styles.xml

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">#545454</item>
    <item name="colorControlActivated">#2dbc99</item>
    <item name="android:textSize">11sp</item>
</style>

how do I change the floating label text color?

配合Material Components library you can customize the TextInputLayout提示文字颜色使用(需要1.1.0版本)

  • 布局中:

  • app:hintTextColor 属性:标签折叠且文本字段处于活动状态时的颜色

  • android:textColorHint 属性:标签在所有其他文本字段状态(例如静止和禁用)下的颜色

<com.google.android.material.textfield.TextInputLayout
     app:hintTextColor="@color/mycolor"
     android:textColorHint="@color/text_input_hint_selector"
     .../>
<style name="MyFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextColor">@color/mycolor</item>
    <item name="android:textColorHint">@color/text_input_hint_selector</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>

如果你用com.google.android.material.textfield.TextInputLayout就可以用app:hintTextColor,试试这个

 <com.google.android.material.textfield.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="@string/app_name" 
     app:hintTextColor="@android:color/white">                   

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

您可以以编程方式使用:

/* Here you get int representation of an HTML color resources */
int yourColorWhenEnabled = ContextCompat.getColor(getContext(), R.color.your_color_enabled);
int yourColorWhenDisabled = ContextCompat.getColor(getContext(), R.color.your_color_disabled);

/* Here you get matrix of states, I suppose it is a matrix because using a matrix you can set the same color (you have an array of colors) for different states in the same array */
int[][] states = new int[][]{new int[]{android.R.attr.state_enabled}, new int[]{-android.R.attr.state_enabled}};

/* You pass a ColorStateList instance to "setDefaultHintTextColor" method, remember that you have a matrix for the states of the view and an array for the colors. So the color in position "colors[0x0]" will be used for every states inside the array in the same position inside the matrix "states", so in the array "states[0x0]". So you have "colors[pos] -> states[pos]", or "colors[pos] -> color used for every states inside the array of view states -> states[pos] */
myTextInputLayout.setDefaultHintTextColor(new ColorStateList(states, new int[]{yourColorWhenEnabled, yourColorWhenDisabled})

解释:

从颜色资源中获取 int 颜色值(android 使用的一种呈现 rgb 颜色的方法)。 我写了 ColorEnabled,但对于这个答案,实际上应该是 ColorHintExpanded & ColorViewCollapsed。无论如何,当视图“TextInputLayout”的提示处于展开或折叠状态时,您将看到这种颜色;您将通过在视图的函数“setDefaultHintTextColor”上使用下一个数组来设置它。 参考: TextInputLayout 参考 - 在此页面中搜索该方法 “setDefaultHintTextColor”了解更多信息

查看上面的文档,您可以看到这些函数使用 ColorStateList 设置展开和折叠提示的颜色。

ColorStateList docs

为了创建 ColorStateList,我首先创建了一个具有我想要的状态的矩阵,在我的例子中是 state_enabled & state_disabled(在 TextInputLayout 中,它们等于 Hint Expanded 和 Hint Collapsed [I不记得是哪个顺序了,大声笑,反正我发现它只是在做测试])。 然后我将具有颜色资源 int 值的数组传递给 ColorStateList 的构造函数,这些颜色与状态矩阵有对应关系(颜色数组中的每个元素对应于状态矩阵中相同位置的相应数组)。因此,颜色数组的第一个元素将用作状态矩阵第一个数组中每个状态的颜色(在我们的例子中,该数组只有一个元素:启用状态 = TextInputLayut 的提示扩展状态)。 最后的状态有正/负值,而你只有正值,所以 android attrs 中的状态“禁用”是“-android.state.enabled”,状态“未聚焦”是“-android.state.focused" ecc.. ecc..

希望这对您有所帮助。 再见,编码不错 (:

尝试下面的代码它在正常状态下工作

<android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/TextLabel">

 <android.support.v7.widget.AppCompatEditText
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="Hiiiii"
     android:id="@+id/edit_id"/>


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

在样式文件夹中 TextLabel 代码

 <style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">@color/Color Name</item> 
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">@color/Color Name</item>
<item name="colorControlNormal">@color/Color Name</item>
<item name="colorControlActivated">@color/Color Name</item>
 </style>

来自文档:

The hint should be set on the TextInputLayout, rather than the EditText. If a hint is specified on the child EditText in XML, the TextInputLayout might still work correctly; TextInputLayout will use the EditText's hint as its floating label. However, future calls to modify the hint will not update TextInputLayout's hint. To avoid unintended behavior, call setHint(CharSequence) and getHint() on TextInputLayout, instead of on EditText.

所以我在 TextInputLayout 上设置了 android:hintapp:hintTextColor,而不是在 TextInputEditText 上,它起作用了。

因为您必须向主应用程序主题添加 colorControlNormalcolorControlActivatedcolorControlHighLight 项:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlActivated">@color/yellow_bright</item>
        <item name="colorControlNormal">@color/yellow_black</item>

    </style>

这很简单,但由于多个视图在不同 configurations/namespaces 中具有相同的属性,因此开发人员感到困惑。

在 TextInputLayout 的情况下,我们每次都有不同的视图和带有参数的 TextInputEditText 或直接到 TextInputLayout。

我正在使用以上所有修复程序: 但是我发现我在用

                app:textColorHint="@color/textcolor_black"

实际上我应该使用

                android:textColorHint="@color/textcolor_black"

作为 TextinputLayout 的属性

textcolor_black.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black_txt" android:state_enabled="true" />
    <item android:color="@color/black_txt" android:state_selected="true" />
    <item android:color="@color/txtColorGray" android:state_selected="false" />
    <item android:color="@color/txtColorGray" android:state_enabled="false" />
</selector>

太多复杂的解决方案。这是一个改变浮动标签颜色的衬垫。

<com.google.android.material.textfield.TextInputLayout
   app:hintTextColor="@color/white"/>

另外更改其他属性:

要更改方框描边颜色:

<com.google.android.material.textfield.TextInputLayout
    app:boxStrokeColor="@color/green"

要更改方框描边宽度:

<com.google.android.material.textfield.TextInputLayout 
     app:boxStrokeWidth="1.5dp"

要更改编辑 TextInputEditText 提示颜色:

<com.google.android.material.textfield.TextInputEditText
     android:textColorHint="@color/white"

要更改 TextInputEditText 颜色:

<com.google.android.material.textfield.TextInputEditText           
            android:textColor="@color/white" />