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

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>


<style name="TextAppearance.App.TextInputLayout" parent="@android:style/TextAppearance">    <item name="android:textColor">@color/red</item>    <item name="android:textSize">14sp</item></style><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" >    <android.support.v7.widget.AppCompatEditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="@string/hint" /></android.support.design.widget.TextInputLayout>


Found the answer, use android.support.design:hintTextAppearance attribute to set your own floating label appearance.

Example:

<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">    <EditText        android:id="@+id/password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="@string/prompt_password"/></android.support.design.widget.TextInputLayout>