TextInputLayout
floating label
Android development
UI customization
color change

How to change the floating label color of TextInputLayout

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

In Material TextInputLayout, the floating label color is controlled by the hint text color configuration, not by the EditText text color. The cleanest way to change it is usually either app:hintTextColor in XML or setHintTextColor() in code with a ColorStateList.

XML approach with hintTextColor

The most direct configuration is:

xml
1<com.google.android.material.textfield.TextInputLayout
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    app:hintTextColor="@color/text_input_hint_colors">
5
6    <com.google.android.material.textfield.TextInputEditText
7        android:layout_width="match_parent"
8        android:layout_height="wrap_content"
9        android:hint="Email" />
10
11</com.google.android.material.textfield.TextInputLayout>

This tells the TextInputLayout what color state list to use for the floating label and hint behavior.

Use a ColorStateList for focused and unfocused states

A single fixed color works, but a state list is usually better because the hint often changes color when the field gains focus.

res/color/text_input_hint_colors.xml:

xml
1<selector xmlns:android="http://schemas.android.com/apk/res/android">
2    <item android:state_focused="true" android:color="@color/purple_500" />
3    <item android:color="@color/gray_500" />
4</selector>

That gives you different colors for focused and default states without extra code.

Runtime change in Kotlin

If the color needs to change dynamically, do it in code:

kotlin
val colors = ContextCompat.getColorStateList(this, R.color.text_input_hint_colors)
textInputLayout.setHintTextColor(colors)

This is useful when theming depends on app state, validation mode, or a runtime style change.

Focus, error, and disabled states can change the result

One reason this topic feels inconsistent is that the floating label is not always driven by a single color. Focus state, error state, and enabled or disabled state can all influence what the user actually sees.

For example, a field with an error may show the error color rather than the normal focused hint color. If you are testing only the happy path, your XML may look correct, but the label can still switch color once validation runs.

kotlin
1textInputLayout.error = "Email is required"
2
3val normalColors = ContextCompat.getColorStateList(
4    this,
5    R.color.text_input_hint_colors
6)
7textInputLayout.setHintTextColor(normalColors)

If the label changes unexpectedly, test these states deliberately instead of assuming the attribute is ignored.

Do not confuse it with other TextInputLayout colors

TextInputLayout has several related color knobs:

  • hint or floating label color
  • box stroke color
  • error text color
  • placeholder text color

If you change the wrong one, the floating label may stay unchanged and make it look like your styling did not work.

For example, boxStrokeColor affects the outline or underline, not the floating label text itself.

Theme-based customization

If the same style should apply everywhere, defining it in your theme or a reusable style is cleaner than repeating attributes in every layout.

That is especially useful when you want all text fields in the app to follow the same focused and unfocused hint colors.

Check the Material Components setup

TextInputLayout styling depends on Material Components, so theme setup matters. If an older style parent or a non-Material app theme is applied, some attributes may not behave the way current examples suggest.

A shared style often keeps the configuration predictable:

xml
<style name="AppTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="hintTextColor">@color/text_input_hint_colors</item>
</style>

Then reference that style from each field instead of repeating individual attributes. This also makes it easier to update the label behavior across the app later.

Common Pitfalls

  • Setting the EditText text color and expecting the floating label to change.
  • Changing the box stroke color and confusing it with hint text color.
  • Using a plain color when a focused or unfocused ColorStateList is actually needed.
  • Styling one TextInputLayout manually everywhere instead of using a shared style or theme.
  • Forgetting that Material Components versions can affect which XML attributes are available.

Summary

  • The floating label color is controlled through the TextInputLayout hint text color settings.
  • 'app:hintTextColor is the usual XML solution.'
  • A ColorStateList is the best way to handle focused and default label colors.
  • 'setHintTextColor() works when the color needs to change at runtime.'
  • Do not confuse hint color with stroke color or normal text color.

Course illustration
Course illustration

All Rights Reserved.