How to Change Color of Textinputlayout's Label and Edittext Underline Android

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

Change bottom line color:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

For more info check this thread.

Change hint color when it is floating

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

and use it like this:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

Change hint color when it is not a floating label:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

Thanks to @AlbAtNf

how to change color of TextinputLayout's edittext underline android

In your TextAppearence.App.TextInputLayout style, you need to add colorControlActivated and colorControlHighlight.

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">@dimen/_13sdp</item>
    <item name="colorControlNormal">@color/black</item>

    //added attributes
    <item name="colorControlActivated">@color/colorPrimary</item> 
    <item name="colorControlHighlight">@color/colorPrimary</item>

</style>

Edited:

You can remove colorControlHighlight. In your case, it is not necessary. colorControlHightlight is used to applied color on ripple, list selected etc.

You can refer to @Gaëtan Maisse answer here.

How to change textinput edittext underline color when unfocused?

I had a similar problem aswell, where my focused hint color was different compared to unfocused.

The solution that worked for me is the following:

In your text input layout set android:textColorHint="@color/your_unfocused_color" for unfocused color and app:hintTextColor="@color/your_focused_color" for focused, this also changes the underline stroke color, when the state is focused.

For the underline, you need to set app:boxStrokeColor="@color/underline_colors"

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/focused" android:state_enabled="true" />
    <item android:color="@color/focused" android:state_hovered="true" />
    <item android:color="@color/focused" android:state_focused="true" />
    <item android:color="@color/unfocused" />
</selector>

Change underline color and floating hint color of TextInputLayout

add these styles in styles.xml

  <style name="textInputLayout.GrayLabel"
    parent="Widget.Design.TextInputLayout">
    <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
   </style>

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

and use it like this:-

        <android.support.design.widget.TextInputLayout
            style="@style/textInputLayout.GrayLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_8dp">

How to change the floating label color of TextInputLayout

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>

Set To Main Theme of App,It Works Only Highlight State Only

 <item name="colorAccent">@color/Color Name</item>

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

 <item name="colorPrimary">@color/your_color</item> // Activated State
 <item name="colorOnSurface">@color/your_color</item> // Normal State

or else do you want different colors in noraml state and activated state and with customization follow below code

<style name="Widget.App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item> //Changes the Shape Apperance
    <!--<item name="hintTextColor">?attr/colorOnSurface</item>-->   //When you added this line it will applies only one color in normal and activate state i.e colorOnSurface color
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorPrimary">@color/colorPrimaryDark</item>  //Activated color
    <item name="colorOnSurface">@color/colorPrimary</item>    //Normal color
    <item name="colorError">@color/colorPrimary</item>        //Error color

    //Text Appearance styles
    <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
    <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>

    <!--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.-->
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>

<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
    <item name="fontFamily">@font/your_font</item>
    <item name="android:fontFamily">@font/your_font</item>
</style>

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>

Add the below line to your main theme or else you can set style to textinputlayout in your xml

<item name="textInputStyle">@style/Widget.App.TextInputLayout</item>

Material TexInputLayout change color

For Changing the border color and hintTextColor, you can use

app:boxStrokeColor="your color"
app:hintTextColor="your color" /*This changes the color of hint when it's collapsed 
and moved to top that's when user enters a character.*/
app:textColorHint="your color" //This is the text color of uncollapsed hint that's the default state.

Furthermore, if you want to create a style then this is the complete style I use which you can modify as you need.

<style name="TextInputLayoutAppearanceOutLined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="hintTextAppearance">@style/HintText</item>
    <item name="helperTextTextAppearance">@style/HelperText</item>
    <item name="counterTextAppearance">@style/HelperText</item>

    <item name="android:textColor">@color/dark_grey</item>
    <item name="android:textColorHint">@color/dark_grey</item>
    <item name="hintTextColor">@color/colorAccent</item>
    <item name="boxStrokeColor">@color/colorAccent</item>
    <item name="startIconTint">@color/colorAccent</item>
    <item name="endIconTint">@color/colorAccent</item>
    <item name="boxBackgroundColor">@color/white</item>

    <item name="boxCornerRadiusBottomEnd">10dp</item>
    <item name="boxCornerRadiusBottomStart">10dp</item>
    <item name="boxCornerRadiusTopEnd">10dp</item>
    <item name="boxCornerRadiusTopStart">10dp</item>

    <item name="boxStrokeWidthFocused">2dp</item>


    <item name="hintEnabled">true</item>
    <!--<item name="hintAnimationEnabled">true</item>-->

</style>

These are the style elements to change HelperText or HintText apperance:

<style name="HintText" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">12sp</item>
</style>

<style name="HelperText" parent="TextAppearance.Design.HelperText">
    <item name="android:textSize">12sp</item>
</style>

And set it to TextInputlayout as style="@style/TextInputLayoutAppearanceOutLined". Whatever mentioned in the style, you can use it in XML layout tag as well.

Also, the official docs of Material TextInputLayout are very important and easy to understand unlike the developer docs of Android and you should read them once to know more about it here.

Android Material Components theme - change color of TextInputLayout/TextInputEditText label and underline when field is focused

You can first define new theme - like this for example:

<style name="Theme2" parent="AppTheme">
    <item name="colorPrimary">@android:color/holo_green_dark</item>
</style>

...then use it like this:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/filter_box_hint"
    android:theme="@style/Theme2">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/etFilter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textNoSuggestions"
        android:maxLines="1"
        android:paddingTop="4dp"
        android:theme="@style/Theme2" />
</com.google.android.material.textfield.TextInputLayout>

Result (pls ignore box, it's part of diff story) :

---

Related Topics