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

User · Answer

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>

User · Answer

lt com google android material textfield TextInputLayout     android hint  Hint      android layout width  match parent      android layout height  wrap content      android theme   style TextInputLayoutHint  gt        lt 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    gt    lt  com google android material textfield TextInputLayout gt    res values styles xml   lt style name  TextInputLayoutHint  parent    gt       lt item name  android textColorHint  gt  545454 lt  item gt       lt item name  colorControlActivated  gt  2dbc99 lt  item gt       lt item name  android textSize  gt 11sp lt  item gt   lt  style gt

User · Answer

lt style name  TextAppearance App TextInputLayout  parent   android style TextAppearance  gt       lt item name  android textColor  gt  color red lt  item gt       lt item name  android textSize  gt 14sp lt  item gt   lt  style gt    lt 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   gt        lt android support v7 widget AppCompatEditText         android layout width  match parent          android layout height  wrap content          android hint   string hint    gt   lt  android support design widget TextInputLayout gt

User · Answer

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  quot setDefaultHintTextColor quot  method  remember that you have a matrix for the states of the view and an array for the colors  So the color in position  quot colors 0x0  quot  will be used for every states inside the array in the same position inside the matrix  quot states quot   so in the array  quot states 0x0  quot   So you have  quot colors pos  - gt  states pos  quot   or  quot colors pos  - gt  color used for every states inside the array of view states - gt  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  amp  ColorViewCollapsed  Anyway this is the color you will see when the hint of a view  quot TextInputLayout quot  is on Expanded or Collapsed state  you will set it by using next array on function  quot setDefaultHintTextColor quot  of the view  Reference  Reference for TextInputLayout - search in this page the method  quot setDefaultHintTextColor quot  for more info Looking to docs above you can see that the functions set the colors for Expanded  amp  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  amp  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  quot disabled quot  in android attrs is  quot -android state enabled quot   the state  quot not focused quot  is  quot -android state focused quot  ecc   ecc   Hope this is helpful  Bye have a nice coding

User · Answer

Now  simply using colorAccent and colorPrimary will work perfectly

User · Answer

Can use app hintTextColor if you use com google android material textfield TextInputLayout  try this    lt 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  gt                            lt com google android material textfield TextInputEditText         android layout width  match parent          android layout height  wrap content            gt    lt  com google android material textfield TextInputLayout gt

User · Answer

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   lt style name  MyAppTheme  parent  Theme AppCompat Light DarkActionBar  gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorControlActivated  gt  e91e63 lt  item gt       lt item name  android colorForeground  gt  33691e lt  item gt       lt item name  colorControlNormal  gt  f57f17 lt  item gt       lt item name  android textColorSecondary  gt  673ab7 lt  item gt   lt  style gt

User · Answer

I tried using android textColorHint in the android support design widget TextInputLayout it works fine            lt android support design widget TextInputLayout             android layout width  match parent              android layout height  wrap content              android textColorHint   color colorAccent  gt                lt 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   gt            lt  android support design widget TextInputLayout gt

User · Answer

Try The Below Code It Works In Normal State   lt android support design widget TextInputLayout      android layout width  quot match parent quot       android layout height  quot wrap content quot       android theme  quot  style TextLabel quot  gt         lt android support v7 widget AppCompatEditText          android layout width  quot match parent quot           android layout height  quot wrap content quot           android hint  quot Hiiiii quot           android id  quot   id edit id quot   gt     lt  android support design widget TextInputLayout gt   In Styles Folder TextLabel Code   lt style name  quot TextLabel quot  parent  quot TextAppearance AppCompat quot  gt       lt  -- Hint color and label color in FALSE state -- gt       lt item name  quot android textColorHint quot  gt  color Color Name lt  item gt        lt item name  quot android textSize quot  gt 20sp lt  item gt       lt  -- Label color in TRUE state and bar color FALSE and TRUE State -- gt       lt item name  quot colorAccent quot  gt  color Color Name lt  item gt       lt item name  quot colorControlNormal quot  gt  color Color Name lt  item gt       lt item name  quot colorControlActivated quot  gt  color Color Name lt  item gt    lt  style gt   Set To Main Theme of App It Works Only Highlight State Only   lt item name  quot colorAccent quot  gt  color Color Name lt  item gt   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   lt item name  quot colorPrimary quot  gt  color your color lt  item gt     Activated State   lt item name  quot colorOnSurface quot  gt  color your color lt  item gt     Normal State  or else do you want different colors in noraml state and activated state and with customization follow below code  lt style name  quot Widget App TextInputLayout quot  parent  quot Widget MaterialComponents TextInputLayout OutlinedBox quot  gt       lt item name  quot materialThemeOverlay quot  gt  style ThemeOverlay App TextInputLayout lt  item gt       lt item name  quot shapeAppearance quot  gt  style ShapeAppearance App SmallComponent lt  item gt    Changes the Shape Apperance      lt  -- lt item name  quot hintTextColor quot  gt  attr colorOnSurface lt  item gt -- gt      When you added this line it will applies only one color in normal and activate state i e colorOnSurface color  lt  style gt    lt style name  quot ThemeOverlay App TextInputLayout quot  parent  quot  quot  gt       lt item name  quot colorPrimary quot  gt  color colorPrimaryDark lt  item gt     Activated color      lt item name  quot colorOnSurface quot  gt  color colorPrimary lt  item gt       Normal color      lt item name  quot colorError quot  gt  color colorPrimary lt  item gt           Error color        Text Appearance styles      lt item name  quot textAppearanceSubtitle1 quot  gt  style TextAppearance App Subtitle1 lt  item gt       lt item name  quot textAppearanceCaption quot  gt  style TextAppearance App Caption lt  item gt        lt  --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 -- gt       lt item name  quot editTextStyle quot  gt  style Widget MaterialComponents TextInputEditText OutlinedBox lt  item gt   lt  style gt    lt style name  quot TextAppearance App Subtitle1 quot  parent  quot TextAppearance MaterialComponents Subtitle1 quot  gt       lt item name  quot fontFamily quot  gt  font your font lt  item gt       lt item name  quot android fontFamily quot  gt  font your font lt  item gt   lt  style gt    lt style name  quot TextAppearance App Caption quot  parent  quot TextAppearance MaterialComponents Caption quot  gt       lt item name  quot fontFamily quot  gt  font your font lt  item gt       lt item name  quot android fontFamily quot  gt  font your font lt  item gt   lt  style gt    lt style name  quot ShapeAppearance App SmallComponent quot  parent  quot ShapeAppearance MaterialComponents SmallComponent quot  gt       lt item name  quot cornerFamily quot  gt cut lt  item gt       lt item name  quot cornerSize quot  gt 4dp lt  item gt   lt  style gt   Add the below line to your main theme or else you can set style to textinputlayout in your xml  lt item name  quot textInputStyle quot  gt  style Widget App TextInputLayout lt  item gt

User · Answer

lt style name  AppTheme2  parent  AppTheme  gt       lt  -- Customize your theme here  -- gt       lt item name  colorControlNormal  gt  fff lt  item gt       lt item name  colorControlActivated  gt  fff lt  item gt  lt  style gt        add this to styles and set TextInputLayout Theam to App2 and it will work

User · Answer

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  quot  color textcolor black quot   actually i should be using                 android textColorHint  quot  color textcolor black quot   As an attribute of TextinputLayout textcolor black xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt       lt item android color  quot  color black txt quot  android state enabled  quot true quot    gt       lt item android color  quot  color black txt quot  android state selected  quot true quot    gt       lt item android color  quot  color txtColorGray quot  android state selected  quot false quot    gt       lt item android color  quot  color txtColorGray quot  android state enabled  quot false quot    gt   lt  selector gt

User · Answer

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

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     So I set android hint and app hintTextColor on TextInputLayout  not on TextInputEditText and it worked

User · Answer

you should change your colour here   lt style name  Base Theme DesignDemo  parent  Theme AppCompat Light NoActionBar  gt           lt item name  colorPrimary  gt  673AB7 lt  item gt           lt item name  colorPrimaryDark  gt  512DA8 lt  item gt           lt item name  colorAccent  gt  FF4081 lt  item gt           lt item name  android windowBackground  gt  color window background lt  item gt       lt  style gt

User · Answer

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    lt style name  TextLabel  parent  Widget Design TextInputLayout  gt       lt  -- Hint color and label color in FALSE state -- gt       lt item name  android textColorHint  gt  color Color Name 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 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

User · Answer

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      lt com google android material textfield TextInputLayout      app hintTextColor  quot  color mycolor quot       android textColorHint  quot  color text input hint selector quot            gt    extending a material style Widget MaterialComponents TextInputLayout       lt style name  quot MyFilledBox quot  parent  quot Widget MaterialComponents TextInputLayout FilledBox quot  gt       lt item name  quot hintTextColor quot  gt  color mycolor lt  item gt       lt item name  quot android textColorHint quot  gt  color text input hint selector lt  item gt   lt  style gt    The default selector for android textColorHint is   lt selector xmlns android  quot http   schemas android com apk res android quot  gt     lt item android alpha  quot 0 38 quot  android color  quot  attr colorOnSurface quot  android state enabled  quot false quot   gt     lt item android alpha  quot 0 6 quot  android color  quot  attr colorOnSurface quot   gt   lt  selector gt

User · Answer

Found the answer  use android support design hintTextAppearance attribute to set your own floating label appearance   Example    lt 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  gt        lt EditText         android id    id password          android layout width  match parent          android layout height  wrap content          android hint   string prompt password   gt   lt  android support design widget TextInputLayout gt

User · Answer

I solve the problem  This is Layout     lt android support design widget TextInputLayout            android id    id til username             android layout width  match parent             android layout height  wrap content             android hint   string username              gt               lt android support v7 widget AppCompatEditText android id    id et username                 android layout width  match parent                 android layout height  wrap content                 android singleLine  true                   gt          lt  android support design widget TextInputLayout gt    This is Style    lt style name  AppBaseTheme  parent  Theme AppCompat Light DarkActionBar  gt           lt  --             Theme customizations available in newer API levels can go in             res values-vXX styles xml  while customizations related to             backward-compatibility can go here          -- gt       lt  style gt   lt  -- Application theme  -- gt      lt style name  AppTheme  parent  AppBaseTheme  gt           lt  -- All customizations that are NOT specific to a particular API-level can go here  -- gt           lt item name  colorAccent  gt  color pink lt  item gt           lt item name  colorControlNormal  gt  color purple lt  item gt           lt item name  colorControlActivated  gt  color yellow lt  item gt       lt  style gt    You should use your theme in application    lt application         android allowBackup  true          android icon   drawable ic launcher          android label   string app name          android theme   style AppTheme   gt   lt  application gt

User · Answer

to change color of the text label when you are focusing on it  i e  typing in it  you have to add specify   lt item name  android textColorPrimary  gt  color yourcolorhere lt  item gt    Just a note  You have to add all these implementations to your main theme

User · Answer

Its Working for me        add hint color in TextInputLayout       lt android support design widget TextInputLayout         android textColorHint   ffffff          android id    id input layout password          android layout width  match parent          android layout height  wrap content  gt           lt 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                gt       lt  android support design widget TextInputLayout gt

User · Answer

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    lt style name  TextInputLayout HintText  gt     lt item name  android textColor  gt  attr colorPrimary lt  item gt     lt item name  android textSize  gt  dimen text tiny size lt  item gt         lt  style gt    Let me know if the solution works  -

User · Answer

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   lt item name  colorPrimary  gt  color my yellow lt  item gt   lt item name  colorPrimaryDark  gt  color my yellow dark lt  item gt   lt item name  colorAccent  gt  color my yellow dark lt  item gt   lt item name  android textColorPrimary  gt  android color white lt  item gt   lt item name  android textColorSecondary  gt  color dark gray lt  item gt   lt item name  android windowBackground  gt  color light gray lt  item gt   lt item name  windowNoTitle  gt true lt  item gt   lt item name  windowActionBar  gt false lt  item gt   lt item name  android textColorHint  gt  color dark gray lt  item gt   lt item name  android colorControlNormal  gt  android color black lt  item gt   lt item name  android colorControlActivated  gt  android color white lt  item gt    And my widget    lt 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  gt            lt 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    gt   lt  android support design widget TextInputLayout gt    Now it displays black text color instead of the textColorPrimary white

User · Answer

In my case I added this  app hintTextAppearance   color colorPrimaryDark in my TextInputLayout widget

User · Answer

I suggest you make style theme for TextInputLayout and change only accent color  Set parent to your app base theme     lt style name  MyTextInputLayout  parent  MyAppThemeBase  gt        lt item name  colorAccent  gt  color colorPrimary lt  item gt    lt  style gt     lt android support design widget TextInputLayout   android layout width  fill parent    android layout height  wrap content    android theme   style MyTextInputLayout  gt

User · Answer

Because you must add colorControlNormal  colorControlActivated  colorControlHighLight items to main application theme    lt  -- Base application theme  -- gt       lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt            lt item name  colorPrimary  gt  color colorPrimary lt  item gt           lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt           lt item name  colorAccent  gt  color colorAccent lt  item gt            lt item name  colorControlActivated  gt  color yellow bright lt  item gt           lt item name  colorControlNormal  gt  color yellow black lt  item gt        lt  style gt

[android] How to change the floating label color of TextInputLayout

Examples related to android

Examples related to android-edittext

Examples related to android-design-library

Examples related to android-textinputlayout