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   lt android support design widget TextInputLayout     android layout width  match parent      android layout height  wrap content      android support design hintTextAppearance   style GreenTextInputLayout  gt         lt EditText      android layout width  match parent          android layout height  wrap content          android id    id city          android textColorHint   color black          android hint   string city    gt    lt  android support design widget TextInputLayout gt    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     lt style name  GreenTextInputLayout  parent   style TextAppearance AppCompat  gt       lt item name  android textColor  gt  color homestory green lt  item gt   lt  style gt

User · Answer

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>

User · Answer

A lot answers but need only a line for this   android textColorHint   000000        lt EditText         android id    id edtEmail          android textColorHint   000000          android layout width  match parent          android layout height  wrap content   gt

User · Answer

In the TextInputLayout that holds the EditText  add   android textColorHint  someColor

User · Answer

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    lt 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  gt        lt android support v7 widget AppCompatEditText         android layout width  match parent          android layout height  wrap content          android hint  test          android inputType  text    gt   lt  android support design widget TextInputLayout gt    Style    lt style name  GreenTextInputLayout  parent   android style TextAppearance  gt       lt item name  android textColor  gt  00FF00 lt  item gt   lt  style gt

User · Answer

lt android support design widget TextInputLayout         android id    id input layout passdword          android layout width  match parent          android layout height  wrap content          android textColorHint   d3d3d3  gt           lt 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    gt       lt  android support design widget TextInputLayout gt

User · Answer

got the same problem  Resolved by putting these lines in parent theme      lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt       lt item name  colorPrimary  gt  color ColorPrimaryDark lt  item gt       lt item name  colorPrimaryDark  gt  color ColorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color AccentColor lt  item gt       lt item name  android windowTranslucentStatus  gt true lt  item gt        lt item name  android textColorHint  gt  color BackgroundtWhiteColor lt  item gt       lt item name  colorControlNormal  gt  color BackgroundtWhiteColor lt  item gt       lt item name  colorControlActivated  gt  ff0000 lt  item gt       lt item name  colorControlHighlight  gt  color BackgroundtWhiteColor lt  item gt       lt  -- Customize your theme here  -- gt   lt  style gt    If you put these    lt item name  android textColorHint  gt  color BackgroundtWhiteColor lt  item gt   lt item name  colorControlNormal  gt  color BackgroundtWhiteColor lt  item gt   lt item name  colorControlActivated  gt  ff0000 lt  item gt   lt item name  colorControlHighlight  gt  color BackgroundtWhiteColor lt  item gt    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

User · Answer

lt item name  colorAccent  gt  android color black lt  item gt    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   lt style name  TextLabel  parent  TextAppearance AppCompat  gt       lt  -- Hint color and label color in FALSE state -- gt       lt item name  android textColorHint  gt  android color black lt  item gt       lt item name  android textSize  gt 20sp lt  item gt       lt  -- Label color in TRUE state and bar color FALSE and TRUE State -- gt       lt item name  colorAccent  gt  android color black lt  item gt       lt item name  colorControlNormal  gt  android color black lt  item gt       lt item name  colorControlActivated  gt  android color black lt  item gt   lt  style gt    then inside your TextInputLayout you can put it like this   lt 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  gt               lt 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    gt            lt  android support design widget TextInputLayout gt

User · Answer

Use TextInputLayout setDefaultHintTextColor

User · Answer

You can use android textColorHint   color color black  inside TextInputlayout It worked for me    lt 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  gt                    lt 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                         gt               lt  android support design widget TextInputLayout gt

User · Answer

Refer the below code it worked for me But it will affect all your controls color     lt  -- In your style xml file -- gt       lt style name  AppTheme  parent  Theme AppCompat NoActionBar  gt               lt  --EditText hint color-- gt               lt item name  android textColorHint  gt  color default app white lt  item gt              lt  -- TextInputLayout text color-- gt               lt item name  colorControlActivated  gt  color default app green lt  item gt               lt  -- EditText line color when EditText on-focus-- gt               lt item name  colorControlHighlight  gt  color default app green lt  item gt               lt  -- EditText line color when EditText  in un-focus-- gt               lt item name  colorControlNormal  gt  color default app white lt  item gt           lt  style gt

User · Answer

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

User · Answer

Here is my experience with this similar issue  amp  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

User · Answer

Add textColorHint property to your edit text  android textColorHint   F6F6F6    or whichever color you want

User · Answer

Here is the complete customization of the google material text input layout  This maybe helpful for you  lt com google android material textfield TextInputLayout         style  quot  style Widget MaterialComponents TextInputLayout OutlinedBox quot          android layout width  quot 0dp quot          android layout height  quot wrap content quot          android layout marginHorizontal  quot  dimen  24sdp quot          android layout marginTop  quot  dimen  24sdp quot          android hint  quot  string username quot          android textColorHint  quot  color tint quot          app hintEnabled  quot true quot          app hintAnimationEnabled  quot false quot          app startIconDrawable  quot  drawable ic user quot          app startIconTint  quot  color tint quot          app layout constraintEnd toEndOf  quot parent quot          app layout constraintStart toStartOf  quot parent quot          app layout constraintTop toBottomOf  quot  id guideline quot          app boxCornerRadiusBottomEnd  quot  dimen  45sdp quot          app boxCornerRadiusBottomStart  quot  dimen  45sdp quot          app boxCornerRadiusTopEnd  quot  dimen  45sdp quot          app boxCornerRadiusTopStart  quot  dimen  45sdp quot          app boxStrokeColor  quot  color red quot          app boxStrokeWidth  quot  dimen  1sdp quot           lt  -- for password          app passwordToggleEnabled  quot true quot          app passwordToggleTint  quot  color tint quot  -- gt           gt           lt com google android material textfield TextInputEditText              android layout width  quot match parent quot               android layout height  quot  dimen  40sdp quot               android padding  quot 0dp quot               android fontFamily  quot  font poppins medium quot               android textColor  quot  color black quot               android inputType  quot textEmailAddress quot   gt       lt  com google android material textfield TextInputLayout gt

User · Answer

Create custom style in style xml   lt style name  EditTextHint  parent  TextAppearance AppCompat  gt       lt item name  colorAccent  gt  android color white lt  item gt       lt item name  android textColorHint  gt  color BackgroundtWhiteColor lt  item gt       lt item name  colorControlNormal  gt  color BackgroundtWhiteColor lt  item gt       lt item name  colorControlActivated  gt  color your color lt  item gt       lt item name  colorControlHighlight  gt  color BackgroundtWhiteColor lt  item gt   lt  style gt    Then in your layout xml file  add theme attribute as below      lt android support design widget TextInputLayout             android theme   style EditTextHint              android layout width  match parent              android layout height  wrap content  gt          lt EditText             android layout width  match parent              android layout height  wrap content   gt    lt  android support design widget TextInputLayout gt    hope this works

User · Answer

Try code below   The high light color is White     lt 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           gt            lt 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    gt       lt  android support design widget TextInputLayout gt    style   TextStyle       lt style name  TextStyle  parent  TextAppearance AppCompat  gt       lt  -- Hint color and label color in FALSE state -- gt       lt item name  android textColorHint  gt  color white lt  item gt       lt item name  android textSize  gt 20sp lt  item gt       lt  -- Label color in TRUE state and bar color FALSE and TRUE State -- gt       lt item name  colorAccent  gt  color white lt  item gt       lt item name  colorControlNormal  gt  color white lt  item gt       lt item name  colorControlActivated  gt  color white lt  item gt        lt  style gt

User · Answer

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   lt item name  quot android textColorHint quot  gt  color your color hint lt  item gt   2 - Set color when TextInputLayout is floating focused tapped   lt item name  quot hintTextColor quot  gt  color your color floating hint lt  item gt   3 - Set color of the line under TextInputLayout   lt item name  quot boxStrokeColor quot  gt  color TextViewColor line lt  item gt   4 - Set color of the error under TextInputLayout   lt item name  quot boxStrokeErrorColor quot  gt  color colorPrimary lt  item gt

User · Answer

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    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   fcc  android state focused  true   gt       lt item android color   cfc  android state hovered  true   gt       lt item android color   ccf   gt   lt  selector gt    Then in your styles xml you would put    lt style name  MtTILStyle  parent  Widget MaterialComponents TextInputLayout OutlinedBox Dense  gt       lt item name  boxStrokeColor  gt  color text input box stroke lt  item gt       lt item name  hintTextColor  gt  color text input box stroke lt  item gt   lt  style gt    Finally indicate your style in the actual TextInputLayout For some reason you also need to set android textColorHint for default text color of hint    lt com google android material textfield TextInputLayout     android id    id my layout id      style   style LoginTextInputLayoutStyle      android textColorHint   ccf

User · Answer

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

User · Answer

lt android support design widget TextInputLayout             android layout width  match parent              android layout height  wrap content  gt                lt 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   gt           lt  android support design widget TextInputLayout gt    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

User · Answer

android textColorHint   FFFFFF  sometime works and sometime doesnt  For me below solution works perfectly  Try The Below Code It Works In your XML file and TextLabel theme is defined in style xml    lt android support design widget TextInputLayout      android layout width  fill parent       android layout height  wrap content       android theme   style MyTextLabel  gt         lt EditText          android layout width  fill parent           android layout height  wrap content           android hint  Floating Label           android id    id edtText   gt     lt  android support design widget TextInputLayout gt    In Styles Folder TextLabel Code    lt style name  MyTextLabel  parent  TextAppearance AppCompat  gt       lt  -- Hint color and label color in FALSE state -- gt       lt item name  android textColorHint  gt  color Color Name lt  item gt    lt  --The size of the text appear on label in false state -- gt       lt item name  android textSize  gt 20sp lt  item gt       lt  -- Label color in TRUE state and bar color FALSE and TRUE State -- gt       lt item name  colorAccent  gt  color Color Name lt  item gt       lt item name  colorControlNormal  gt  color Color Name lt  item gt       lt item name  colorControlActivated  gt  color Color Name lt  item gt    lt  style gt    If you just want to change the color of label in false state then colorAccent   colorControlNormal and colorControlActivated are not required

User · Answer

You must set hint color on TextInputLayout

User · Answer

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

User · Answer

late but it may help someone i have done like this   lt 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  gt            lt 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    gt       lt  android support design widget TextInputLayout gt

User · Answer

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      lt style name  quot AppTheme quot  parent  quot Theme AppCompat Light DarkActionBar quot  gt                      lt item name  quot colorControlActivated quot  gt  color colorPrimary lt  item gt                  lt  style gt   This will change the color when the input is focused

User · Answer

According to this  https   code google com p android issues detail id 176559  Try this    lt android support design widget TextInputLayout     android textColorHint   A7B7C2      android layout width  match parent      android layout height  50dp  gt        lt 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    gt    lt  android support design widget TextInputLayout gt    It works in 23 1 1

User · Answer

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     lt com google android material textfield TextInputLayout      app hintTextColor   color mycolor       android textColorHint   color text input hint selector            gt

User · Answer

Define android textColorHint in your application theme    lt style name  AppTheme  parent  Theme AppCompat NoActionBar  gt       lt item name  colorPrimary  gt  color primary lt  item gt       lt item name  colorPrimaryDark  gt  color primary dark lt  item gt       lt item name  colorAccent  gt  color accent lt  item gt        lt item name  android textColorHint  gt  color secondary text lt  item gt   lt  style gt    Source

[android] Change EditText hint color when using TextInputLayout

Examples related to android

Examples related to android-edittext

Examples related to android-support-library

Examples related to android-design-library

Examples related to android-textattributes