如何改变TextInputLayout的浮动标签颜色
Posted
技术标签:
【中文标题】如何改变TextInputLayout的浮动标签颜色【英文标题】：How to change the floating label color of TextInputLayout 【发布时间】：2015-08-13 07:33:21 【问题描述】：参考谷歌新发布的TextInputLayout，如何更改浮动标签文字颜色？
在样式中设置colorControlNormal、colorControlActivated、colorControlHighLight 没有帮助。
这就是我现在拥有的：
【问题讨论】：
如何将线条颜色改为红色？ @Vlad161 colorAccent @Vlad161 可以解释您将在哪里设置colorAccent ？我将自定义样式 colorAccent 更改为黑色，这条线仍会反映我在主要样式中对 colorControlNormal 的看法。
找到了很好的例子here
查看以下链接。它将不同的颜色设置为提示和下划线颜色：https://***.com/a/45349177/3392323
【参考方案1】：
试试下面的代码它在正常状态下工作
<android.support.design.widget.TextInputLayout
android:layout_
android:layout_
android:theme="@style/TextLabel">
<android.support.v7.widget.AppCompatEditText
android:layout_
android:layout_
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>
设置为应用主主题，仅高亮状态有效
<item name="colorAccent">@color/Color Name</item>
更新：
UnsupportedOperationException: Can't convert to color: type=0x2 in api 16 or below
Solution
更新：
您是否在使用材料组件库
您可以将以下几行添加到您的主题中
<item name="colorPrimary">@color/your_color</item> // Activated State
<item name="colorOnSurface">@color/your_color</item> // Normal State
或者您是否希望在正常状态和激活状态下使用不同的颜色，并按照以下代码进行自定义
<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>
【讨论】：
哇，我已经为此工作了大约一周 - 我已经多次回到这个问题，你刚刚回答了我曾经遇到的所有问题。 在 TextInputLayout 或底层 EditText 视图上设置错误消息时应用崩溃：android.view.InflateException: Error inflating class TextView
小心，在TextInputLayout 上设置此android:theme 样式会导致InflateException 在华硕Zenphone（可能还有其他设备）上崩溃。
嗨，新泽西州，对不起，我不知道为什么会这样，但我将 TextAppearance.AppCompat 更改为 ThemeOverlay.AppCompat.Light 即使将设置错误用于 textinputlayout 也可以正常工作
将父级设置为 ThemeOverlay.AppCompat.Light 有助于解决我的 ASUS Zenphone (@friederbluemle) 上的崩溃问题【参考方案2】：
<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_
android:layout_
android:textColorHint="@color/gray" //support 23.0.0
app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" >
<android.support.v7.widget.AppCompatEditText
android:layout_
android:layout_
android:hint="@string/hint" />
</android.support.design.widget.TextInputLayout>
【讨论】：
这与接受的答案相同，除了您需要使用 AppCompatEditText 的误导性暗示。 AppCompatActivity 将自动为 EditText 实例使用 AppCompatEditText，您不需要专门使用它。 “android:textColorHint="@color/gray" //support 23.0.0 使我的提示文本颜色可见（提示文本颜色默认为黑色，与我设置的提示文本颜色无关，如果背景为黑色，则文本完全隐藏【参考方案3】：
找到答案，使用android.support.design:hintTextAppearance属性设置你自己的浮动标签外观。
例子：
<android.support.design.widget.TextInputLayout
android:layout_
android:layout_
xmlns:app="http://schemas.android.com/apk/res-auto"
app:hintTextAppearance="@style/TextAppearance.AppCompat">
<EditText
android:id="@+id/password"
android:layout_
android:layout_
android:hint="@string/prompt_password"/>
</android.support.design.widget.TextInputLayout>
【讨论】：
漂亮流畅的动画。谢谢 我收到Namespace 'android.support.design' not bound。有什么建议吗？
@Sunkas 将 compile 'com.android.support:design:23.1.1' 添加到您的应用 gradle 文件中【参考方案4】：
如何更改浮动标签文本颜色？
使用Material Components library，您可以自定义TextInputLayout的提示文本颜色（需要1.1.0版本）
在布局中：
app:hintTextColor 属性：标签折叠且文本字段处于活动状态时的颜色
android:textColorHint属性：标签在所有其他文本字段状态下的颜色（如resting和disabled）
<com.google.android.material.textfield.TextInputLayout
app:hintTextColor="@color/mycolor"
android:textColorHint="@color/text_input_hint_selector"
.../>
Widget.MaterialComponents.TextInputLayout.*:
<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>
【讨论】：
这比文档好，而且更容易理解！我只有一个问题，当有和没有输入文本时，是否可以为静止位置的提示文本颜色使用不同的颜色？【参考方案5】：您不需要使用android:theme="@style/TextInputLayoutTheme" 来更改浮动标签颜色，因为它会影响用作标签的小TextView 的整个主题。相反，您可以使用 app:hintTextAppearance="@style/TextInputLayout.HintText" 其中：
<style name="TextInputLayout.HintText">
<item name="android:textColor">?attr/colorPrimary</item>
<item name="android:textSize">@dimen/text_tiny_size</item>
...
</style>
如果解决方案有效，请告诉我 :-)
【讨论】：
【参考方案6】：好的，所以，我发现这个答案非常有帮助，并感谢所有做出贡献的人。不过，只是为了添加一些东西。接受的答案确实是正确的答案......但是......在我的情况下，我希望使用app:errorEnabled="true" 实现EditText 小部件下方的错误消息，而这一行让我的生活变得困难。这似乎覆盖了我为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_
android:layout_
app:errorEnabled="true">
<EditText
android:id="@+id/log_in_name"
android:layout_
android:layout_
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 白色。
【讨论】：
【参考方案7】：您可以通过编程方式使用：
/* 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”上使用下一个数组来设置它。 参考： Reference for TextInputLayout - search in this page the method "setDefaultHintTextColor" for more info
查看上面的文档，您可以看到函数使用 ColorStateList 为展开和折叠提示设置颜色。
ColorStateList docs
为了创建 ColorStateList，我首先创建了一个包含我想要的状态的矩阵，在我的例子中是 state_enabled 和 state_disabled（在 TextInputLayout 中，它们等于 Hint Expanded 和 Hint Collapsed [我不记得按哪个顺序大声笑，无论如何我发现它只是在做一个测试]）。 然后我将颜色资源的 int 值的数组传递给 ColorStateList 的构造函数，这些颜色与状态矩阵有对应关系（颜色数组中的每个元素对应于状态矩阵中相同位置的相应数组）。所以颜色数组的第一个元素将用作状态矩阵的第一个数组中每个状态的颜色（在我们的例子中，数组只有一个元素：启用状态 = TextInputLayut 的提示扩展状态）。 最后的事情状态有正/负值，而你只有正值，所以 android attrs 中的“禁用”状态是“-android.state.enabled”，“未聚焦”状态是“-android.state.focused” " ecc..ecc..
希望这会有所帮助。 再见，编码很好（：
【讨论】：
解释？这些只是 2 种方法：/ 无论如何，我快速添加它们。 只有四行文字，简单解释一下它们背后的概念，每个人都有充分的理由来点赞:) 完成 ;) 希望它是正确的和有帮助的，。有一个很好的编码：D【参考方案8】：我建议您为 TextInputLayout 制作样式主题并仅更改强调色。将 parent 设置为您的应用基础主题：
<style name="MyTextInputLayout" parent="MyAppThemeBase">
<item name="colorAccent">@color/colorPrimary</item>
</style>
<android.support.design.widget.TextInputLayout
android:layout_
android:layout_
android:theme="@style/MyTextInputLayout">
【讨论】：
【参考方案9】：在最新版本的支持库（23.0.0+）中，TextInputLayout 采用 XML 中的以下属性来编辑浮动标签颜色：android:textColorHint="@color/white"
【讨论】：
【参考方案10】：我更喜欢使用 Widget.Design.TextInputLayout 作为父级，而不是 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>
【讨论】：
在 android 4.3 和 7 上运行良好，使用 EditText.setError() 时没有错误【参考方案11】：更改提示颜色和编辑文本下划线颜色：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>
【讨论】：
【参考方案12】：在我的例子中，我在我的 TextInputLayout 小部件中添加了这个“app:hintTextAppearance="@color/colorPrimaryDark"。
【讨论】：
这不起作用。error: '#FFFFFF' is incompatible with attribute hintTextAppearance【参考方案13】：
你应该在这里改变你的颜色
<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>
【讨论】：
【参考方案14】：现在，只需使用 colorAccent 和 colorPrimary 即可完美运行。
【讨论】：
这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。 @Swati 这是问题的答案。我告诉他使用 colorAccent 和 colorPrimary。 嗯，这更像是一个评论。如果您添加示例代码，您可能会有所了解。 实际上 TextInputLayout 正好在主题中使用了colorPrimary 来设置提示和底线的焦点颜色。虽然确实应该有一些解释/代码来在这个答案中展示它【参考方案15】：
我解决了这个问题。 这是布局：
<android.support.design.widget.TextInputLayout
android:id="@+id/til_username"
android:layout_
android:layout_
android:hint="@string/username"
>
<android.support.v7.widget.AppCompatEditText android:id="@+id/et_username"
android:layout_
android:layout_
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>
【讨论】：
【参考方案16】：当你专注于它时改变文本标签的颜色。即输入它。你必须添加指定
<item name="android:textColorPrimary">@color/yourcolorhere</item>
请注意： 您必须将所有这些实现添加到您的主题中。
【讨论】：
【参考方案17】：它为我工作..... 在 TextInputLayout 中添加提示颜色
<android.support.design.widget.TextInputLayout
android:textColorHint="#ffffff"
android:id="@+id/input_layout_password"
android:layout_
android:layout_>
<EditText
android:id="@+id/edtTextPassword"
android:layout_
android:layout_
android:layout_marginTop="15dp"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
/>
</android.support.design.widget.TextInputLayout>
【讨论】：
【参考方案18】：我尝试在 android.support.design.widget.TextInputLayout 中使用 android:textColorHint 它工作正常。
<android.support.design.widget.TextInputLayout
android:layout_
android:layout_
android:textColorHint="@color/colorAccent">
<EditText
android:layout_
android:layout_
android:hint="Hello"
android:imeActionLabel="Hello"
android:imeOptions="actionUnspecified"
android:maxLines="1"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
【讨论】：
【参考方案19】： <style name="AppTheme2" parent="AppTheme">
<!-- Customize your theme here. -->
<item name="colorControlNormal">#fff</item>
<item name="colorControlActivated">#fff</item></style>
将其添加到样式并将 TextInputLayout Theam 设置为 App2，它将起作用;)
【讨论】：
【参考方案20】：<com.google.android.material.textfield.TextInputLayout
android:hint="Hint"
android:layout_
android:layout_
android:theme="@style/TextInputLayoutHint">
<androidx.appcompat.widget.AppCompatEditText
android:layout_
android:layout_
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>
【讨论】：
【参考方案21】：可以使用app:hintTextColor，如果你使用com.google.android.material.textfield.TextInputLayout，试试这个
<com.google.android.material.textfield.TextInputLayout
android:layout_
android:layout_
android:hint="@string/app_name"
app:hintTextColor="@android:color/white">
<com.google.android.material.textfield.TextInputEditText
android:layout_
android:layout_
/>
</com.google.android.material.textfield.TextInputLayout>
【讨论】：
【参考方案22】：试试下面的代码，它在正常状态下工作
<android.support.design.widget.TextInputLayout
android:layout_
android:layout_
android:theme="@style/TextLabel">
<android.support.v7.widget.AppCompatEditText
android:layout_
android:layout_
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>
【讨论】：
【参考方案23】：来自文档：
提示应该设置在 TextInputLayout，而不是 EditText。如果在 XML 中对子 EditText 指定了提示，则 TextInputLayout 可能仍然可以正常工作； TextInputLayout 将使用 EditText 的提示作为其浮动标签。但是，将来修改提示的调用不会更新 TextInputLayout 的提示。为避免意外行为，请在 TextInputLayout 上而不是在 EditText 上调用 setHint(CharSequence) 和 getHint()。
所以我在TextInputLayout 上设置了android:hint 和app:hintTextColor，而不是TextInputEditText 并且它起作用了。
【讨论】：
【参考方案24】：因为您必须在主应用程序主题中添加colorControlNormal、colorControlActivated、colorControlHighLight 项目：
<!-- 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>
【讨论】：
【参考方案25】：这很简单，但由于多个视图在不同的配置/命名空间中具有相同的属性，因此开发人员会感到困惑。
在 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>
【讨论】：
以上是关于如何改变TextInputLayout的浮动标签颜色的主要内容，如果未能解决你的问题，请参考以下文章
TextInputLayout 和 AutoCompleteTextView