How to Change the Floating Label Color of Textinputlayout

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>

How to change the floating label color of TextInputLayout and the cursor, without changing `colorAccent` in `AppTheme`

Create a custom style like this:

    <style name="myInputText">
<item name="android:textColor">@color/myColor</item>
<item name="android:textSize">@dimen/text_size</item>
...
</style>

Now, you can directly use this in TextInputLayout, no need to provide any parent in style or change your app theme.

<android.support.design.widget.TextInputLayout
android:textColorHint="@color/myColor"
app:hintTextAppearance="@style/myInputText"
android:layout_width="match_parent"
android:layout_height="50dp">

EDIT

This only changes the color of the floating label, not the cursor. To also change the cursor color, you need to create a drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="10dp"
android:width="2dp"/>
<solid android:color="@color/myColor"/>
</shape>

and add it to the style you use for the TextInputEditText, not the TextInputLayout.

<style name="Settings.TextInputEditText">
...
<item name="android:textCursorDrawable">@drawable/cursor</item>
</style>

How to change the TextInputEditText floating hint color when not focused

Add this code into your style.xml file ->

<style name="TextLabelDummy" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
<item name="colorAccent">@color/black</item> // Text Color
<item name="android:textColorHint">@color/blue</item> // Hint Color
<item name="colorControlActivated">@color/white</item> //Floating label color
</style>

You can change the parent attribute whatever you want. I've randomly used the "Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"

Then call this as theme into you layout file

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textInputLayoutNumberDummy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_marginBottom="32dp"
android:theme="@style/TextLabelDummy">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/textInputEditTextNumberDummy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/text_mobile" />

</com.google.android.material.textfield.TextInputLayout>

It worked fine on my side. Just check it and let me know about it. Thank you.

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

android - Change color of floating label in TextInputLayout

After doing "on the fly", I try to add android:textColorHint="#bbbbc9" in TextInputLayout and it works. Here is the full code:

<style name="EditTextHint" parent="TextAppearance.AppCompat">
<item name="android:textColor">#bbbbc9</item>
<item name="android:textColorHint">#bbbbc9</item>
<item name="android:textSize">11.5sp</item>
</style>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColotHint="#bbbbc9"
app:hintTextAppearance="@style/EditTextHint">

<EditText
android:id="@+id/fet_input_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:paddingTop="7.5dp"
android:textColor="#595968"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>

How to change default color of Android Floating Label for TextInputLayout?

Add this in styles:

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
<item name="android:textColor">@color/red</item>
<item name="android:textSize">14sp</item>
</style>

Add this in your layout:

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="@color/gray"
**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>


Related Topics



Leave a reply



Submit