how to change color of TextinputLayout s label and edittext underline android

Question

I am using android design library s TextinputLayout  But couldn t customize the hint color  label color and the underline color of EditText inside TextinputLayout  Please help

User · Answer

lt style name  Widget Design TextInputLayout  parent  android Widget  gt       lt item name  hintTextAppearance  gt  style TextAppearance Design Hint lt  item gt       lt item name  errorTextAppearance  gt  style TextAppearance Design Error lt  item gt   lt  style gt    You can override this style for layout  And also you can change inner EditText-item style too

User · Answer

Change bottom line color    lt item name  colorControlNormal  gt  c5c5c5 lt  item gt   lt item name  colorControlActivated  gt  color accent lt  item gt   lt item name  colorControlHighlight  gt  color accent lt  item gt    For more info check this thread   Change hint color when it is floating   lt style name  MyHintStyle  parent   android style TextAppearance  gt       lt item name  android textColor  gt  color main color lt  item gt   lt  style gt    and use it like this    lt android support design widget TextInputLayout             app hintTextAppearance   style MyHintStyle  gt    Change hint color when it is not a floating label    lt android support design widget TextInputLayout             app hintTextAppearance   style MyHintStyle      android textColorHint   c1c2c4  gt    Thanks to  AlbAtNf

User · Answer

If you want to change the bar line color and the hint text color of the TextInputLayout  what the accent color normally is   then just create this style    lt style name  MyStyle  gt       lt item name  colorAccent  gt  color your color lt  item gt   lt  style gt    Then apply it to your TextInputLayout as a theme    lt android support design widget TextInputLayout             app theme   style MyStyle    gt    This basically sets a theme  not style  to one view  as opposed to the whole activity

User · Answer

A TextinputLayout is not a view  but a Layout  as very nicely described by Dimitrios Tsigouris in his blog post here  Therefore  you don t need a Style  which is for Views only  but use a Theme  Following the blog post  I ended up with the following solution    Start in your styles xml with   lt style name  TextInputLayoutAppearance  parent  Widget Design TextInputLayout  gt           lt  -- reference our hint  amp  error styles -- gt           lt item name  android textColor  gt  color your colour here lt  item gt           lt item name  android textColorHint  gt  color your colour here lt  item gt           lt item name  colorControlNormal  gt  color your colour here lt  item gt           lt item name  colorControlActivated  gt  color your colour here lt  item gt           lt item name  colorControlHighlight  gt  color your colour here lt  item gt   lt  style gt    And in your layout add   lt com google android material textfield TextInputLayout                 android theme   style TextInputLayoutAppearance

User · Answer

I used all of the above answers and none worked  This answer works for API 21   Use app hintTextColor attribute when text field is focused and app textColorHint attribute when in other states  To change the bottmline color use this attribute app boxStrokeColor as demonstrated below   lt com google android material textfield TextInputLayout             app boxStrokeColor  quot  color colorAccent quot              app hintTextColor  quot  color colorAccent quot              android textColorHint  quot  android color darker gray quot               lt com google android material textfield TextInputEditText                 android layout width  quot match parent quot                  android layout height  quot wrap content quot    gt   lt  com google android material textfield TextInputLayout gt   It works for AutoCompleteTextView as well  Hope it works for you

User · Answer

Add this attribute in Edittext tag and enjoy    android backgroundTint   color colorWhite

User · Answer

This Blog Post describes various styling aspects of EditText and AutoCompleteTextView wrapped by TextInputLayout   For EditText and AppCompat lib 22 1 0  you can set theme attribute with some theme related settings    lt style name  StyledTilEditTextTheme  gt      lt item name  android imeOptions  gt actionNext lt  item gt      lt item name  android singleLine  gt true lt  item gt      lt item name  colorControlNormal  gt  color greyLight lt  item gt      lt item name  colorControlActivated  gt  color blue lt  item gt      lt item name  android textColorPrimary  gt  color blue lt  item gt      lt item name  android textSize  gt  dimen styledtil edit text size lt  item gt   lt  style gt    lt style name  StyledTilEditText  gt       lt item name  android theme  gt  style StyledTilEditTextTheme lt  item gt       lt item name  android paddingTop  gt 4dp lt  item gt   lt  style gt    and apply them on EditText    lt EditText     android id    id etEditText      style   style StyledTilEditText    For AutoCompleteTextView things are more complicated because wrapping it in TextInputLayout and applying this theme breaks floating label behaviour   You need to fix this in code   private void setStyleForTextForAutoComplete int color        Drawable wrappedDrawable       DrawableCompat wrap autoCompleteTextView getBackground         DrawableCompat setTint wrappedDrawable  color       autoCompleteTextView setBackgroundDrawable wrappedDrawable       and in Activity onCreate   setStyleForTextForAutoComplete getResources   getColor R color greyLight    autoCompleteTextView setOnFocusChangeListener  v  hasFocus  - gt        if hasFocus            setStyleForTextForAutoComplete getResources   getColor R color blue          else           if autoCompleteTextView getText   length      0                    setStyleForTextForAutoComplete getResources   getColor R color greyLight

User · Answer

Based on Fedor Kazakov and others answers  I created a default config   styles xml     lt resources gt        lt  -- Base application theme  -- gt       lt style name  AppTheme  parent  Theme AppCompat Light  gt           lt  -- Customize your theme here  -- 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  style gt        lt style name  Widget Design TextInputLayout  parent  AppTheme  gt           lt item name  hintTextAppearance  gt  style AppTheme TextFloatLabelAppearance lt  item gt           lt item name  errorTextAppearance  gt  style AppTheme TextErrorAppearance lt  item gt           lt item name  counterTextAppearance  gt  style TextAppearance Design Counter lt  item gt           lt item name  counterOverflowTextAppearance  gt  style TextAppearance Design Counter Overflow lt  item gt       lt  style gt        lt style name  AppTheme TextFloatLabelAppearance  parent  TextAppearance Design Hint  gt           lt  -- Floating label appearance here -- gt           lt item name  android textColor  gt  color colorAccent lt  item gt           lt item name  android textSize  gt 20sp lt  item gt       lt  style gt        lt style name  AppTheme TextErrorAppearance  parent  TextAppearance Design Error  gt           lt  -- Error message appearance here -- gt           lt item name  android textColor  gt  ff0000 lt  item gt           lt item name  android textSize  gt 20sp lt  item gt       lt  style gt    lt  resources gt    activity layout xml     lt android support design widget TextInputLayout     android layout width  match parent      android layout height  wrap content  gt        lt android support v7 widget AppCompatEditText         android layout width  match parent          android layout height  wrap content          android hint  Text hint here          android text  5 2    gt    lt  android support design widget TextInputLayout gt      Focused     Without focus     Error message

User · Answer

lt style name  EditScreenTextInputLayoutStyle  parent  Theme AppCompat Light NoActionBar  gt       lt item name  colorControlNormal  gt  color actionBar background lt  item gt       lt item name  colorControlActivated  gt  color actionBar background lt  item gt       lt item name  colorControlHighlight  gt  color actionBar background lt  item gt       lt item name  colorAccent  gt  color actionBar background lt  item gt       lt item name  android textColorHint  gt  color actionBar background lt  item gt   lt  style gt    apply this style to TextInputLayout

User · Answer

With the Material Components Library you can use the com google android material textfield TextInputLayout   You can apply a custom style to change the colors     To change the hint color you have to use these attributes   hintTextColor and android textColorHint    lt style name  Custom textinputlayout filledbox  parent   style Widget MaterialComponents TextInputLayout FilledBox  gt       lt  -- The color of the label when it is collapsed and the text field is active -- gt       lt item name  hintTextColor  gt  attr colorPrimary lt  item gt        lt  -- The color of the label in all other text field states  such as resting and disabled  -- gt       lt item name  android textColorHint  gt  color selector hint text color lt  item gt   lt  style gt    You should use a selector for the android textColorHint  Something like    lt selector xmlns android  http   schemas android com apk res android  gt     lt item android alpha  0 38  android color   attr colorOnSurface  android state enabled  false   gt     lt item android alpha  0 6  android color   attr colorOnSurface   gt   lt  selector gt    To change the bottom line color you have to use the attribute  boxStrokeColor    lt style name  Custom textinputlayout filledbox  parent   style Widget MaterialComponents TextInputLayout FilledBox  gt                lt item name  boxStrokeColor  gt  color selector stroke color lt  item gt   lt  style gt    Also in this case you should use a selector  Something like    lt selector xmlns android  http   schemas android com apk res android  gt     lt item android color   attr colorPrimary  android state focused  true   gt     lt item android alpha  0 87  android color   attr colorOnSurface  android state hovered  true   gt     lt item android alpha  0 12  android color   attr colorOnSurface  android state enabled  false   gt     lt item android alpha  0 38  android color   attr colorOnSurface   gt   lt  selector gt       You can also apply these attributes in your layout    lt com google android material textfield TextInputLayout     style   style Widget MaterialComponents TextInputLayout FilledBox      app boxStrokeColor   color selector stroke color      app hintTextColor   attr colorPrimary      android textColorHint   color selector hint text color          gt

User · Answer

Works for me  If you trying EditText with Label and trying change to underline color use this  Change to TextInputEditText instead EditText              lt com google android material textfield TextInputLayout                 android id  quot   id editTextTextPersonName3 quot                  android layout width  quot 0dp quot                  android layout height  quot wrap content quot                  android layout marginStart  quot  dimen  16sdp quot                  android layout marginLeft  quot  dimen  16sdp quot                  android layout marginTop  quot  dimen  16sdp quot                  android layout marginEnd  quot  dimen  8sdp quot                  android layout marginRight  quot  dimen  8sdp quot                  android textColorHint  quot  color white quot                  app layout constraintEnd toStartOf  quot   id guideline3 quot                  app layout constraintStart toStartOf  quot parent quot                  app layout constraintTop toTopOf  quot parent quot  gt                    lt EditText                     android layout width  quot match parent quot                      android layout height  quot match parent quot                      android backgroundTint  quot  color white quot                      android hint  quot Lastname quot                      android textSize  quot  dimen  14sdp quot                      android inputType  quot textPersonName quot                      android textColor  quot  color white quot                      android textColorHint  quot  color white quot    gt               lt  com google android material textfield TextInputLayout gt

[android] how to change color of TextinputLayout's label and edittext underline android

Examples related to android

Examples related to android-design-library

Examples related to android-textinputlayout