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


210

参考TextInputLayoutGoogle发布的新版本,如何更改浮动标签文本的颜色?

设置colorControlNormalcolorControlActivatedcolorControlHighLight在风格于事无补。

这就是我现在所拥有的:

这就是我现在所拥有的


8
如何将线条颜色更改为红色?
弗拉德

6
@ Vlad161 colorAccent
凯尔·

@ Vlad161可以解释您将在哪里设置colorAccent?我将自定义样式更改colorAccent为黑色,并且该行仍然可以反映出我colorControlNormal在主要样式中的功能。
ElliotM 2015年


检查以下链接。它将不同的颜色设置为提示颜色和下划线颜色:https
//stackoverflow.com/a/45349177/3392323

Answers:


358

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

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

设置为应用程序的主要主题,仅适用于突出显示状态

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

更新:

UnsupportedOperationException:无法转换为颜色:api 16或更低版本中的type = 0x2


6
哇,我已经研究了大约一个星期了-我已经多次回答这个问题,您刚刚回答了我曾经遇到的所有问题。
ElliotM 2015年

40
当您在TextInputLayout上设置错误消息或在EditText视图上添加图层时,应用程序崩溃:android.view.InflateException: Error inflating class TextView
Arvis 2015年

18
小心设置此android:theme样式TextInputLayoutInflateException导致ASUS Zenphones(以及其他设备)崩溃。
Friederbluemle '16

13
嗨,对不起,对不起,我不知道为什么会这样,但是我将TextAppearance.AppCompat更改为ThemeOverlay.AppCompat.Light,即使对textinputlayout使用了设置错误,它也能正常工作
Brahmam Yamani

11
设置父母ThemeOverlay.AppCompat.Light帮助解决我的ASUS Zenphone(@friederbluemle)崩溃的问题
Lukasz Wiktor

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

16
除了需要使用AppCompatEditText的误导性含义外,这与接受的答案相同。AppCompatActivity将为EditText实例自动使用AppCompatEditText,您不需要专门使用它。
Niall

4
“ <样式名称”之后右上方的第一行代码拼写错误。我相信“...... TextAppearence ......”应为“...... TextAppearance ......”
AJW

android:textColorHint="@color/gray" //support 23.0.0使我的提示文本颜色可见(无论我设置的提示文本颜色如何,默认情况下,提示文本颜色均为黑色;如果背景为黑色,则该文本将完全隐藏
Rajaraman 2015年

70

找到答案,使用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>

漂亮流畅的动画。谢谢
Joaquin Iurchuk

我懂了Namespace 'android.support.design' not bound。有什么建议?
2015年

@Sunkas添加compile 'com.android.support:design:23.1.1'到您的应用程序gradle文件中
Ahmed Mostafa

24

您无需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>

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


22

如何更改浮动标签的文字颜色?

使用Material Components库,您可以使用来自定义TextInputLayout提示文本的颜色(需要版本1.1.0)

  • 在布局中:

    • app:hintTextColor attribute:折叠时标签的颜色,并且文本字段处于活动状态
    • android:textColorHint 属性:所有其他文本字段状态(例如,静止和禁用)中标签的颜色
<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>


4

好的,因此,我发现此答案非常有帮助,并感谢所有贡献者。只是为了添加一些东西。可接受的答案确实是正确的答案...但是...就我而言,我希望使用来实现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白色。


3

我建议您为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">

2

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


2

代替Brahmam Yamani回答,我更喜欢使用Widget.Design.TextInputLayout作为父对象。这样可以确保所有必需项都存在,即使不是所有项都被覆盖。在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>

1
在Android 4.3和7上运行良好,使用EditText.setError()时没有错误
-Saul_programa

2

就我而言,我app:hintTextAppearance="@color/colorPrimaryDark"在TextInputLayout小部件中添加了此“ 。


这是行不通的。error: '#FFFFFF' is incompatible with attribute hintTextAppearance
塔斯林·奥塞尼

1

要更改提示颜色并编辑带下划线的文本,请执行以下操作: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>

1

您可以通过编程方式使用:

/* 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文档

为了创建ColorStateList,我首先创建了一个具有所需状态的矩阵,在我的情况下为state_enabled和state_disabled(在TextInputLayout中,它们等于Hint Expanded和Hint Collapsed [我不记得按哪个顺序大声笑,无论如何我找到了它只是做一个测试])。然后,我将带有颜色资源的int值的数组传递给ColorStateList的构造函数,这些颜色与状态矩阵具有对应关系(颜色数组中的每个元素都对应于状态矩阵中相应位置处的各个数组)。因此,colors数组的第一个元素将用作状态矩阵第一个数组中每个状态的颜色(在我们的示例中,该数组只有一个元素:enabled state = TextInputLayut的提示扩展状态)。最后的事物状态具有正/负值,而您只有正值,

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


讲解吗 这些只是2种方法:/无论如何,我快速添加了它们。
Z3R0

只有四行包含大量文字-简要解释其背后的概念,每个人都有充分的理由提出反对:)
Nico Haase

1
完成;)希望它是正确的和有用的。编码不错:D
Z3R0

0

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

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

0

现在,只需使用colorAccent和即可colorPrimary完美运行。


4
这不能为问题提供答案。要批评或要求作者澄清,请在其帖子下方发表评论。
斯瓦蒂2015年

2
@Swati这是问题的答案。我告诉他使用colorAccent和colorPrimary。
凯尔·霍克利

6
好吧,更多的是评论。如果添加示例代码,可能会有所帮助。
苏菲安2015年

实际上,TextInputLayout完全colorPrimary采用了主题来设置提示和底线的焦点颜色。尽管在此答案中确实应该有一些解释/代码来​​展示它
Kirill Starostin 19-10-24

0

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

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

0

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

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

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


0

它为我工作...在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>

0

我尝试在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>

0
  <style name="AppTheme2" parent="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlActivated">#fff</item></style>    

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


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

0

可以使用,app:hintTextColor如果您使用com.google.android.material.textfield.TextInputLayout,请尝试

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

0

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

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

0

从文档中:

提示应该在TextInputLayout而不是EditText上设置。如果在子EditText上以XML指定了提示,则TextInputLayout可能仍然可以正常工作;TextInputLayout将使用EditText的提示作为其浮动标签。但是,以后的修改提示的调用不会更新TextInputLayout的提示。为避免意外行为,请在TextInputLayout而不是EditText上调用setHint(CharSequence)和getHint()。

所以我设置android:hintapp:hintTextColorTextInputLayout,而不是TextInputEditText和它的工作。


0

因为你必须添加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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.