How to change the floating label color of TextInputLayout

Question

With reference to the new TextInputLayout released by Google, how do I change the floating label text color?

Setting colorControlNormal, colorControlActivated, colorControlHighLight in styles does not help.

This is what I have now:

This is what I have now

@Vlad161 could explain where you would set `colorAccent` ? I changed the custom style `colorAccent` to black and the line would still reflect what I have for `colorControlNormal` in the main style. — em_, Jun 16 '15 at 14:06
Found good example [here](http://chintanrathod.com/customizing-textinputlayout-part-2/) — Chintan Rathod, May 27 '16 at 04:49
Check the following link. It set the different color to hint and underline color : [https://stackoverflow.com/a/45349177/3392323](https://stackoverflow.com/a/45349177/3392323) — SAndroidD, Jul 27 '17 at 11:21
This answer helped me https://stackoverflow.com/a/39271184/513413 — Hesam, Feb 07 '18 at 23:37
to do that programmatically check this: https://stackoverflow.com/questions/35683379/programmatically-set-textinputlayout-hint-text-color-and-floating-label-color — Ultimo_m, Jun 22 '18 at 14:57

Brahmam Yamani · Accepted Answer · 2020-06-30T15:18:43.330

383

Try The Below Code It Works In Normal State

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

In Styles Folder TextLabel Code

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

Set To Main Theme of App,It Works Only Highlight State Only

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

Update:

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

Solution

Update:

Are you using Material Components Library

You can add below lines to your main theme

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

or else do you want different colors in noraml state and activated state and with customization follow below code

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

Add the below line to your main theme or else you can set style to textinputlayout in your xml

<item name="textInputStyle">@style/Widget.App.TextInputLayout</item>

edited Jun 30 '20 at 15:18

answered Jun 18 '15 at 11:24

Brahmam Yamani

4,475
5
21
30

6

Wow, I've been working on this for about a week now - I've returned to this question several times, you just answered all the questions I've ever had. – em_ Jun 18 '15 at 15:25
this actually Worked for me on both Lollipop and Pre-Lollipop versions. – edwinj Jul 17 '15 at 01:14
41

App chrashed when you set error message on TextInputLayout or underlaying EditText view: `android.view.InflateException: Error inflating class TextView` – Arvis Oct 23 '15 at 08:10
Hi, With this, I am getting same color for the underline as well as floating label. Is there any way to make their colors different? – Hirak Chhatbar Oct 23 '15 at 19:49
Hi Arvis , you are setting error message to EDITTEXT ,remove that error tag and put error message to TextInputLayout and ENABLE the setErrorEnable : True – Brahmam Yamani Oct 26 '15 at 06:19
Hi Hirak, it's Possible in Normal state only , change the color accent and color control normal colors ,it is working only normal state – Brahmam Yamani Oct 26 '15 at 06:22
What are True and False states? – Elyess Abouda Nov 19 '15 at 13:12
Hi Elyess, True and False State Means , Active and Normal States Ex (state_pressed="true" ---- Active State , state_pressed="false" ----- Normal State) – Brahmam Yamani Nov 19 '15 at 13:26
2

This works but I am getting an error in my activity preview "Rendering Problems Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layout to choose a different layout, or fix the theme style references. Potential stack overflow trying to resolve '?attr/textColorHighlight': cyclic resource definitions? Render may not be accurate. (4 similar errors not shown) Failed to find '?attr/textColorHighlight' in current theme. (4 similar errors not shown)" – Micro Dec 29 '15 at 22:35
19

Careful, setting this `android:theme` style on `TextInputLayout` results in `InflateException` crashes on ASUS Zenphones (and possibly other devices). – friederbluemle Feb 22 '16 at 08:40
App chrashed when you set error message on TextInputLayout or underlaying EditText view: android.view.InflateException: Error inflating class TextView – n j Mar 17 '16 at 13:25
14

Hi n j , Sorry For That , i don't know why it is happening but i changed TextAppearance.AppCompat to ThemeOverlay.AppCompat.Light it is Working fine even when using set error to textinputlayout – Brahmam Yamani Mar 18 '16 at 05:28
11

Setting parent to `ThemeOverlay.AppCompat.Light` helped to solve crashing on my ASUS Zenphone (@friederbluemle) – Lukasz Wiktor May 25 '16 at 10:24
floating lable and line colors different in lolipop devise and below lollipop device.how to maintain constantly – Harsha Jun 06 '16 at 11:16
4

The parent of your style should be "Widget.Design.TextInputLayout" otherwise setting errors on the edit text will result in an error – Florian Jun 13 '16 at 17:51
hi in TextInputLayout prelollipop floating test is in green color in lollipop devices in orange color can u post where i need to set in orange for pre lollipop also please – Harsha Aug 06 '16 at 12:15
3

instead of android:theme="@style/TextLabel" ,i suggest you to use style="@style/TextLabel" ,as android:theme="@style/TextLabel" will throw error in some devices. – Gagan Aug 12 '16 at 09:58
1

UnsupportedOperationException: Can't convert to color: type=0x2 in api 16 or blow any idea to resolve that – Mohammad irshad sheikh Sep 16 '16 at 07:35
@irshadsheikh See updated answer, Or just this link: http://stackoverflow.com/a/31723120/421467 – Dr.jacky Oct 12 '16 at 18:12
1

@Brahmam Yamani Survive for 100 more years to help us out. This is so disturbing, android docs is like finding a piece of algae in the ocean. Thanks mate for this awesome answer – DJphy Jan 09 '17 at 13:12
I'm getting Potential stack overflow trying to resolve '?attr/textColorHighLight': cyclic resource definitions? Render may not be accurate. Failed to find '?attr/textColorHighlight' in current theme. How can I fix it? – CGR Jun 01 '17 at 16:21
Ok just add @color/white in TextLabel – CGR Jun 01 '17 at 16:30
I don't understand this comment: – Neon Warge Oct 07 '17 at 02:23
3

I don't understand why this is the accepted answer. parent should be Widget.Design.TextInputLayout to ensure, that all required items are present. If you don't do that, you get different crashes depending on the state. For example, if you call setErrorEnabled to true – creaity Feb 08 '18 at 10:38
how to set errorTextAppearance and this theme both in TextInputLayout – mitesh makwana Aug 17 '18 at 10:20
@cesard's [solution](https://stackoverflow.com/a/45988369/6346531) is much simpler and works perfectly! – aksh1618 Feb 10 '19 at 17:28
I am using the new `com.google.android.material.textfield.TextInputLayout` and while the `ThemeOverlay.AppCompat.Light` solution does fix initial crashes, I still had problems with error state. In the end I had to use the Material Bridge theme to still use the old design ` – Yani2000 Nov 02 '20 at 21:36

score 109 · Answer 2 · edited Jan 07 '16 at 09:19

109

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

edited Jan 07 '16 at 09:19

Zapnologica

22,170
44
158
253

answered Jun 01 '15 at 03:34

Fang

3,652
4
16
30

18

This is the same as the accepted answer, except with the misleading implication that you need to use AppCompatEditText. AppCompatActivity will automatically use AppCompatEditText for EditText instances, you don't need to specifically use that. – Niall Aug 04 '15 at 09:28
4

The first line of code above right after " – AJW Sep 10 '15 at 23:17
`android:textColorHint="@color/gray" //support 23.0.0` made my hint text colour visible (the hint text colour was black by default irrespective of the hint text colour I set and if the background is black the text is completley hidden – Rajaraman Subramanian Oct 12 '15 at 14:37

score 70 · Answer 3 · edited Dec 03 '15 at 17:06

70

Found the answer, use android.support.design:hintTextAppearance attribute to set your own floating label appearance.

Example:

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

edited Dec 03 '15 at 17:06

Pankaj

7,908
6
42
65

answered May 30 '15 at 15:30

johanson

3,167
2
16
13

Nice smooth animation. Thanks – Joaquin Iurchuk Jun 03 '15 at 16:23
I get `Namespace 'android.support.design' not bound`. Any suggestions? – Sunkas Jun 17 '15 at 06:57
@Sunkas add `compile 'com.android.support:design:23.1.1'` to your app gradle file – Ahmed Mostafa Feb 21 '16 at 19:22

Gabriele Mariotti · Answer 4 · 2020-07-03T13:39:52.813

how do I change the floating label text color?

With the Material Components library you can customize the TextInputLayout the hint text color using (it requires the version 1.1.0)

In the layout:
app:hintTextColor attribute : the color of the label when it is collapsed and the text field is active
android:textColorHint attribute: the color of the label in all other text field states (such as resting and disabled)

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

extending a material style 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>

The default selector for android:textColorHint is:

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

This is great and easier to understand than the documentation! I just have one question, is it possible to use a different color for the hint text color in resting position when there is and there is not input text? — Seven, Dec 11 '20 at 05:07

score 24 · Answer 5 · answered Aug 31 '17 at 18:59

You don't need to use android:theme="@style/TextInputLayoutTheme" to change the floating label color, since it's going to affect to the entire theme for the small TextView used as label. Instead, you could use 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>

Let me know if the solution works :-)

score 5 · Answer 6 · answered Oct 05 '15 at 09:39

Ok, so, I found this answer very helpful and thanks to all the people who contributed. Just to add something, though. The accepted answer is indeed the correct answer...BUT...in my case, I was looking to implement the error message below the EditText widget with app:errorEnabled="true" and this single line made my life difficult. it seems that this overrides the theme I chose for android.support.design.widget.TextInputLayout, which has a different text color defined by android:textColorPrimary.

In the end I took to applying a text color directly to the EditText widget. My code looks something like this:

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>

And my widget:

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

Now it displays black text color instead of the textColorPrimary white.

Z3R0 · Answer 7 · 2021-01-07T15:48:52.240

Programmatically you can use:

/* 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})

Explanation:

Get int color value from a color resource (a way to present rgb colors used by android). I wrote ColorEnabled, but really it should be, for this answer, ColorHintExpanded & ColorViewCollapsed. Anyway this is the color you will see when the hint of a view "TextInputLayout" is on Expanded or Collapsed state; you will set it by using next array on function "setDefaultHintTextColor" of the view. Reference: Reference for TextInputLayout - search in this page the method "setDefaultHintTextColor" for more info

Looking to docs above you can see that the functions set the colors for Expanded & Collapsed hint by using a ColorStateList.

ColorStateList docs

To create the ColorStateList I first created a matrix with the states I want, in my case state_enabled & state_disabled (whose are, in TextInputLayout, equals to Hint Expanded and Hint Collapsed [I don't remember in which order lol, anyway I found it just doing a test]). Then I pass to the constructor of the ColorStateList the arrays with int values of color resources, these colors have a correspondences with the states matrix (every element in colors array correspond to the respective array in states matrix at same position). So the first element of the colors array will be used as color for every state in the first array of the states matrix (in our case the array has only 1 element: enabled state = hint expanded state for TextInputLayut). Last things states have positive / negative values, and you have only the positive values, so the state "disabled" in android attrs is "-android.state.enabled", the state "not focused" is "-android.state.focused" ecc.. ecc..

Hope this is helpful. Bye have a nice coding (:

Explaination? These are just 2 methods :/ Anyway ok I fast add them. — Z3R0, Jan 27 '20 at 16:26
Just four lines with a lot of text - just explain the concepts behind them briefly and everybody has a good reason to leave an upvote :) — Nico Haase, Jan 27 '20 at 16:28
Done ;) Hope it is right and helpful,. Have a nice coding :D — Z3R0, Jan 27 '20 at 16:50

score 3 · Answer 8 · answered Oct 23 '15 at 12:34

I suggest you make style theme for TextInputLayout and change only accent color. Set parent to your app base theme:

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

score 2 · Answer 9 · answered Nov 26 '15 at 16:06

2

In the latest version of the support library (23.0.0+), TextInputLayout takes the following attribute in XML to edit the floating label color: android:textColorHint="@color/white"

answered Nov 26 '15 at 16:06

spierce7

14,797
13
65
106

score 2 · Answer 10 · answered Feb 08 '18 at 10:41

Instead of Brahmam Yamani answer I prefer to use Widget.Design.TextInputLayout as parent. That ensures, that all required items are present, even if not all items are overwritten. In Yamanis answer, the app will crash with an unresolvable resource, if setErrorEnabled(true) is called.

Simply change the style to the following:

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

works well on android 4.3 and 7, no errors when using EditText.setError() — Saul_programa, Apr 12 '18 at 05:36

score 2 · Answer 11 · answered Mar 18 '22 at 08:27

Too many complicated solutions. Here is a one liner to change the color of the floating label.

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

In addition to change other attributes:

To change the box stroke color:

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

To change the box stroke width:

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

To change the edit TextInputEditText hint color:

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

To change the TextInputEditText color:

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

score 1 · Answer 12 · answered Oct 11 '17 at 03:58

To change color of hint and edit text underline color : colorControlActivated

To change character counter color : textColorSecondary

To change error message color : colorControlNormal

To change password visibility button tint : colorForeground

For more info on TextInputLayout read 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>

score 1 · Answer 13 · answered Jul 12 '18 at 00:23

1

In my case I added this "app:hintTextAppearance="@color/colorPrimaryDark"in my TextInputLayout widget.

answered Jul 12 '18 at 00:23

KoralReef

41
7

This does not work. `error: '#FFFFFF' is incompatible with attribute hintTextAppearance` – Taslim Oseni Jul 07 '19 at 12:39

score 1 · Answer 14 · answered May 11 '20 at 07:21

From the documentation:

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.

So I set android:hint and app:hintTextColor on TextInputLayout, not on TextInputEditText and it worked.

score 1 · Answer 15 · answered Oct 05 '20 at 06:55

This is simple but the developer gets confused due to multiple views having the same attributes in different configurations/namespaces.

In the case of the TextInputLayout we have every time a different view and with params either with TextInputEditText or directly to TextInputLayout.

I was using all the above fixes: But I found that I was using

                app:textColorHint="@color/textcolor_black"

actually i should be using

                android:textColorHint="@color/textcolor_black"

As an attribute of 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>

score 0 · Answer 16 · answered Jun 01 '15 at 13:00

you should change your colour here

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

score 0 · Answer 17 · edited Feb 15 '16 at 12:45

0

Now, simply using colorAccent and colorPrimary will work perfectly.

edited Feb 15 '16 at 12:45

frogatto

28,539
11
83
129

answered Jun 11 '15 at 03:27

Kyle Horkley

911
1
9
23

4

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Swati Nov 09 '15 at 05:37
2

@Swati This is an answer to the question. I'm telling him to use colorAccent and colorPrimary. – Kyle Horkley Nov 10 '15 at 03:52
6

Well, it's more of a comment. You may have a point if you add a sample code. – Sufian Nov 12 '15 at 09:28
Actually TextInputLayout took exactly `colorPrimary` in the theme to set the hint and bottom line's focused color. Though there really should have been some explanation / code to showcase it in this answer – Kirill Starostin Oct 24 '19 at 01:59

score 0 · Answer 18 · answered Feb 16 '16 at 02:36

I solve the problem. This is Layout：

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

This is Style:

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

You should use your theme in application:

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

score 0 · Answer 19 · answered Aug 05 '17 at 07:36

0

to change color of the text label when you are focusing on it. i.e. typing in it. you have to add specify

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

Just a note: You have to add all these implementations to your main theme.

answered Aug 05 '17 at 07:36

Yash Ojha

792
9
17

score 0 · Answer 20 · answered Aug 28 '17 at 05:56

Its Working for me ..... add hint color in 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>

score 0 · Answer 21 · answered Jan 06 '18 at 12:22

I tried using android:textColorHint in the android.support.design.widget.TextInputLayout it works fine.

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

score 0 · Answer 22 · answered Feb 06 '18 at 00:02

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

add this to styles and set TextInputLayout Theam to App2 and it will work ;)

score 0 · Answer 23 · answered Jul 29 '19 at 09:22

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

score 0 · Answer 24 · answered Oct 26 '19 at 23:40

Can use app:hintTextColor if you use com.google.android.material.textfield.TextInputLayout, try this

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

score 0 · Answer 25 · answered Jan 27 '20 at 12:52

Try The Below Code It Works In Normal State

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

In Styles Folder TextLabel Code

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

score 0 · Answer 26 · answered May 16 '20 at 16:23

Because you must add colorControlNormal, colorControlActivated, colorControlHighLight items to main application theme:

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

How to change the floating label color of TextInputLayout

26 Answers26

Linked

Related