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

Based on Fedor Kazakov and others answers, I created a default config.

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

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

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

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

Focused:

Without focus:

Error message:

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

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

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

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

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

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

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

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

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

[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