Change EditText hint color when using TextInputLayout

Question

I am using the new TextInputLayout from the design library. I am able to get it to show and to change the color of the floating label. Unfortunately the actual EditText hint is now always white.

I have tried changing the hintColor in XML, styles, and programmatically and also tried using the android.support.v7.widget.AppCompatEditText but the EditText hint always shows white.

Here is my XML for my TextInputLayout and EditText

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


    <EditText

    android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/city"
        android:textColorHint="@color/black"
        android:hint="@string/city" />

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

And here is the style I am using for the TextInputLayout (I tried making the hintTextColor attribute black but didn't do anything for me):

<style name="GreenTextInputLayout" parent="@style/TextAppearance.AppCompat">
    <item name="android:textColor">@color/homestory_green</item>
</style>

score 191 · Answer 1 · edited May 28 '22 at 10:17

191

Define android:textColorHint in your application theme:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>

    <item name="android:textColorHint">@color/secondary_text</item>
</style>

Source

Or, in your layout, like:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android.support.design:hintTextAppearance="@style/GreenTextInputLayout"
    android:textColorHint="@color/secondary_text">

edited May 28 '22 at 10:17

Top-Master

7,611
5
39
71

answered Jun 27 '15 at 06:45

mbelsky

6,093
2
26
34

1

It works for me but the hint's color is not set at fragment & view creation, I have to click on my `EditText` for the hint color to be set on all inputs within the view... haven't found any fix to that yet (`requestFocus()` and `performClick()` don't do the trick unfortunately). – Mickäel A. Aug 12 '16 at 16:38
1

worked when used as attribute : – masoud Cheragee Jun 13 '17 at 16:07
The problem is that if colorControlActivated is set, it will override textColorHint. – 6rchid Sep 01 '22 at 02:30

score 82 · Answer 2 · edited Apr 21 '16 at 14:09

Create custom style in style.xml

<style name="EditTextHint" parent="TextAppearance.AppCompat">
    <item name="colorAccent">@android:color/white</item>
    <item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
    <item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
    <item name="colorControlActivated">@color/your color</item>
    <item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>
</style>

Then in your layout xml file, add theme attribute as below

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

      <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

hope this works

Showing "Error inflating class EditText". Please help ! – Mohit Khaitan Sep 14 '16 at 10:09 — Mohit Khaitan, Sep 14 '16 at 10:09
@Coder some of the attributes he added are for 21+ – Mr.O Sep 20 '18 at 11:14 — Mr.O, Sep 20 '18 at 11:14

score 61 · Answer 3 · answered Apr 23 '16 at 05:25

61

Add textColorHint property to your edit text

android:textColorHint="#F6F6F6"

or whichever color you want

answered Apr 23 '16 at 05:25

Cherry admin

637
5
4

score 42 · Answer 4 · edited Dec 21 '15 at 08:27

got the same problem. Resolved by putting these lines in parent theme.

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimaryDark</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <item name="colorAccent">@color/AccentColor</item>
    <item name="android:windowTranslucentStatus">true</item>

    <item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
    <item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
    <item name="colorControlActivated">#ff0000</item>
    <item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>
    <!-- Customize your theme here. -->
</style>

If you put these

<item name="android:textColorHint">@color/BackgroundtWhiteColor</item>
<item name="colorControlNormal">@color/BackgroundtWhiteColor</item>
<item name="colorControlActivated">#ff0000</item>
<item name="colorControlHighlight">@color/BackgroundtWhiteColor</item>

in a separate style and apply it to TextInputLayout or Edittext it won't appear. You HAVE to place it in application's parent theme.

score 39 · Answer 5 · answered Sep 05 '19 at 19:15

39

With the Material Components library you can customize the TextInputLayout the hint text color using:

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)

Something like:

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

answered Sep 05 '19 at 19:15

Gabriele Mariotti

320,139
94
887
841

1

This is exactly what I was looking for. Simple way to manage the state of hint text! Brilliant answer! However I can not declare `app:hintTextColor` in the style but in layout only. – sud007 Apr 13 '23 at 07:38
1

Just figured, can also declare `@color/lsHintTextColor` in the style. – sud007 Apr 13 '23 at 08:04

score 23 · Answer 6 · answered Jun 13 '15 at 22:28

I'm not sure what causes your problem put this code works perfectly for me. I think it has something to do with using the correct xml namespace (xmlns). I'm not sure if using android.support.design without xml namespace attribute is supported. Or it has something to do with the textColorHint attribute you are using on the EditText itself.

Layout:

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

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="test"
        android:inputType="text" />
</android.support.design.widget.TextInputLayout>

Style:

<style name="GreenTextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

This still works like what I have. The problem I am having is that before the user touches the EditText, the EditText color is white. When the user touches the EditText, the TextInputLayout label is green and works fine. — SamIAmHarris, Jun 13 '15 at 23:41
This works for the floating hint, but not the hint inside the empty EditText control. For that, update the application theme as per [@mbelsky's answer](http://stackoverflow.com/a/31086001/383414) — Richard Le Mesurier, Jan 08 '16 at 13:03
By the way, the default app:hintTextAppearance style is `@style/TextAppearance.Design.Hint`, so you might want to use that as your `parent` rather than `@android:style/TextAppearance` or `@style/TextAppearance.AppCompat` — rockgecko, Sep 07 '17 at 23:53

Rajiv Manivannan · Answer 7 · 2015-08-04T10:58:41.097

Refer the below code it worked for me.But it will affect all your controls color.

 <!-- In your style.xml file -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
            <!--EditText hint color-->
            <item name="android:textColorHint">@color/default_app_white</item>
           <!-- TextInputLayout text color-->
            <item name="colorControlActivated">@color/default_app_green</item>
            <!-- EditText line color when EditText on-focus-->
            <item name="colorControlHighlight">@color/default_app_green</item>
            <!-- EditText line color when EditText  in un-focus-->
            <item name="colorControlNormal">@color/default_app_white</item>
        </style>

score 16 · Answer 8 · answered Dec 03 '15 at 08:11

16

In the TextInputLayout that holds the EditText, add:

android:textColorHint="someColor"

answered Dec 03 '15 at 08:11

Brent Ray

191
1
2

score 14 · Answer 9 · edited Jun 15 '17 at 18:05

14

A lot answers but need only a line for this:

android:textColorHint="#000000"

    <EditText
        android:id="@+id/edtEmail"
        android:textColorHint="#000000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

edited Jun 15 '17 at 18:05

Junior Mayhé

16,144
26
115
161

answered May 07 '17 at 19:04

Diego Venâncio

5,698
2
49
68

score 14 · Answer 10 · answered Jul 18 '20 at 13:56

if you are using the Material design library. Currently, I am using the version

implementation 'com.google.android.material:material:1.3.0-alpha01'

1 - Set color when TextInputLayout is resting.

<item name="android:textColorHint">@color/your_color_hint</item>

2 - Set color when TextInputLayout is floating/focused/tapped.

<item name="hintTextColor">@color/your_color_floating_hint</item>

3 - Set color of the line under TextInputLayout.

<item name="boxStrokeColor">@color/TextViewColor_line</item>

4 - Set color of the error under TextInputLayout.

<item name="boxStrokeErrorColor">@color/colorPrimary</item>

score 10 · Answer 11 · edited Dec 12 '17 at 09:23

You can use android:textColorHint="@color/color_black" inside TextInputlayout It worked for me.

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dp_10"
                android:textColorHint="@color/color_black"
                app:hintTextAppearance="@style/TextLabel">

                <EditText
                    android:id="@+id/et_state"
                    style="@style/profile_editTextStyle"

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

score 8 · Answer 12 · answered Feb 24 '16 at 04:15

According to this: https://code.google.com/p/android/issues/detail?id=176559

Try this:

<android.support.design.widget.TextInputLayout
    android:textColorHint="#A7B7C2"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <EditText
        android:id="@+id/et_confirm_password"
        android:textColor="@android:color/black"
        android:hint="Confirm password"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 </android.support.design.widget.TextInputLayout>

It works in 23.1.1

score 6 · Answer 13 · answered Jun 30 '15 at 10:13

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

            <EditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name"
                android:textColor="@color/black"
                android:textColorHint="@color/grey"/>
        </android.support.design.widget.TextInputLayout>

Use textColorHint to set the color that you want as the Hint color for the EditText. The thing is that Hint in the EditText disappears not when you type something, but immediately when the EditText gets focus (with a cool animation). You will notice this clearly when you switch focus away and to the EditText.

score 5 · Accepted Answer · answered Jun 16 '15 at 18:58

5

Looks like the parent view had a style for a 3rd party library that was causing the EditText to be white.

android:theme="@style/com_mixpanel_android_SurveyActivityTheme"

Once I removed this everything worked fine.

answered Jun 16 '15 at 18:58

SamIAmHarris

2,158
3
16
19

score 5 · Answer 15 · answered Jun 27 '15 at 08:12

try this may this help

      edittext.addTextChangedListener(new  TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            // TODO Auto-generated method stub
            Toast.makeText(getApplicationContext(), "onTextChanged", 2000).show();;
            //newuser.setTextColor(Color.RED);
            edittext.setHintTextColor(Color.RED);

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s) {
            // TODO Auto-generated method stub
            Toast.makeText(getApplicationContext(), "afterTextChanged", 2000).show();;

        }
    });

why did you put it in onTextChanged listener? – user25 Jun 24 '18 at 17:40 — user25, Jun 24 '18 at 17:40

score 5 · Answer 16 · answered Sep 16 '18 at 13:19

late but it may help someone i have done like this

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="30dp"
        android:layout_marginStart="30dp"
        android:textColorHint="#8cffffff">

        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/email_edit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/security_email"
            android:inputType="textEmailAddress"
            android:textColor="@color/white"
            app:backgroundTint="#8cffffff" />
    </android.support.design.widget.TextInputLayout>

score 4 · Answer 17 · answered Oct 15 '16 at 16:55

<item name="colorAccent">@android:color/black</item>

change your colorAccent to your desired color inside your Theme,this will change your EditText line,Cursor as well as your hint

or you can also include this style inside your style.xml

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

then inside your TextInputLayout you can put it like this

<android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TextLabel">
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/password"
                android:drawableStart="@drawable/password"
                android:maxLines="1"
                android:hint="password"
                android:inputType="textWebPassword" />

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

score 4 · Answer 18 · answered May 11 '20 at 07:16

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.

Try setting android:hint and app:hintTextColor on TextInputLayout instead of on TextInputEditText.

score 3 · Answer 19 · answered Sep 27 '22 at 10:11

3

This Should 100% work

android:textColorHint="@color/white"

answered Sep 27 '22 at 10:11

JAWAD KHAN

61
7

score 2 · Answer 20 · answered May 29 '18 at 11:16

 <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_passdword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="#d3d3d3">
        <EditText
            android:id="@+id/etaddrfess_ciwty"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="50dp"
            android:fontFamily="@font/frutiger"
            android:gravity="start"
            android:hint="@string/address_city"
            android:padding="10dp"
            android:textColor="#000000"
            android:textColorHint="#000000"
            android:textSize="14sp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
    </android.support.design.widget.TextInputLayout>``

score 2 · Answer 21 · answered Mar 10 '20 at 15:16

If you are using new androidx Material design library com.google.android.material then you can use colorstatelist to control hint text color in focused, hovered and default state as follows. (inspired by this)

In res/color/text_input_box_stroke.xml put something like the following:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fcc" android:state_focused="true"/>
    <item android:color="#cfc" android:state_hovered="true"/>
    <item android:color="#ccf"/>
</selector>

Then in your styles.xml you would put:

<style name="MtTILStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
    <item name="hintTextColor">@color/text_input_box_stroke</item>
</style>

Finally indicate your style in the actual TextInputLayout For some reason you also need to set android:textColorHint for default text color of hint:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/my_layout_id"
    style="@style/LoginTextInputLayoutStyle"
    android:textColorHint="#ccf"
    ...

Md. Shofiulla · Answer 22 · 2021-02-23T11:43:51.957

Here is the complete customization of the google material text input layout. This maybe helpful for you

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/_24sdp"
        android:layout_marginTop="@dimen/_24sdp"
        android:hint="@string/username"
        android:textColorHint="@color/tint"
        app:hintEnabled="true"
        app:hintAnimationEnabled="false"
        app:startIconDrawable="@drawable/ic_user"
        app:startIconTint="@color/tint"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline"
        app:boxCornerRadiusBottomEnd="@dimen/_45sdp"
        app:boxCornerRadiusBottomStart="@dimen/_45sdp"
        app:boxCornerRadiusTopEnd="@dimen/_45sdp"
        app:boxCornerRadiusTopStart="@dimen/_45sdp"
        app:boxStrokeColor="@color/red"
        app:boxStrokeWidth="@dimen/_1sdp"
        <!-- for password 
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/tint" -->
        >
        <com.google.android.material.textfield.TextInputEditText 
            android:layout_width="match_parent" 
            android:layout_height="@dimen/_40sdp" 
            android:padding="0dp" 
            android:fontFamily="@font/poppins_medium" 
            android:textColor="@color/black" 
            android:inputType="textEmailAddress"/>
    </com.google.android.material.textfield.TextInputLayout>

Not Helpful please change yor answer – NSV. Oct 01 '22 at 03:57 — NSV., Oct 01 '22 at 03:57

score 1 · Answer 23 · answered Dec 02 '16 at 10:31

1

You must set hint color on TextInputLayout.

answered Dec 02 '16 at 10:31

Biro Csaba

39
1

score 1 · Answer 24 · answered Dec 02 '19 at 07:01

When I tried to set theme attribute to TextInputLayout, the theme was also getting applied to its child view edittext, which I didn't wanted.

So the solution which worked for me was to add a custom style to the "app:hintTextAppearance" property of the TextInputLayout.

In styles.xml add the following style:

<style name="TextInputLayoutTextAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/text_color</item>
    <item name="android:textSize">@dimen/text_size_12</item>
</style>

And apply this style to the "app:hintTextAppearance" property of the TextInputLayout as below:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/mobile_num_til"
        android:layout_width="0dp"
        android:layout_height="@dimen/dim_56"
        app:layout_constraintStart_toStartOf="@id/title_tv"
        app:layout_constraintEnd_toEndOf="@id/title_tv"
        app:layout_constraintTop_toBottomOf="@id/sub_title_tv"
        android:layout_marginTop="@dimen/dim_30"
        android:padding="@dimen/dim_8"
        app:hintTextAppearance="@style/TextInputLayoutTextAppearance"
        android:background="@drawable/rect_round_corner_grey_outline">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/mobile_num_et"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/mobile_number"
            android:gravity="center_vertical"
            android:background="@android:color/transparent"/>

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

score 0 · Answer 25 · answered Aug 22 '18 at 16:24

Try code below:

The high light color is White:

 <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_mobile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/TextStyle"
        >

        <EditText
            android:id="@+id/input_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:drawablePadding="14dp"
            android:drawableLeft="8dp"
            android:textColor="@color/white"
            android:hint="Mobile" />
    </android.support.design.widget.TextInputLayout>

style: TextStyle

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

score 0 · Answer 26 · answered Jun 20 '19 at 13:41

Here is my experience with this similar issue & the required solution.

Requirement:

Need to create customize TextInputEditText (can say some should be transparent and some should be not but use custom colors for various events)

Problem faced:

android:textColorHint is not working as required.

Solutions tried, which failed:

Used android:textColorHint in style and applied to TextInputEditText. No results or difference.
Set android:textColorHint in application's theme applied. It do helped but it was now set for entire application. (Not up-to mark to requirement)

After a lot of RnD, the best SOLUTION found was in an article which described that we need to apply theme to TextInputLayout or to it's parent view rather then only applying style to TextInputEditText or to it's parent view.

Please check TextInputLayout proper Theming which told that how we are at wrong track.

score 0 · Answer 27 · answered Jul 25 '20 at 06:33

I only wanted to change the label color when it is lifted to top. But setting textColorHint changes the color at every state. So, this worked for me:

   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       ...
        <item name="colorControlActivated">@color/colorPrimary</item>
       ...
    </style>

This will change the color when the input is focused.

score 0 · Answer 28 · answered Oct 29 '20 at 14:21

0

Use TextInputLayout.setDefaultHintTextColor

answered Oct 29 '20 at 14:21

hmac

267
3
9

Change EditText hint color when using TextInputLayout

28 Answers28

Linked

Related