ChangeTextInputLayout Title Color

Question

I have migrated my project to androidX and using the new material theme with material design component. I was able to use new Outlined style for my TextInputLayout, Currently it is showing title in white color. I tried setting style to TextInputLayout with.

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

But it shows title in white color.

After that I created separate style in styles.xml

<style name="TextLabel" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/colorAccent</item>
    <item name="android:textColorHint">@color/colorAccent</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorHint">@color/colorAccent</item>
    <item name="android:textColor">@color/white</item>
    <item name="colorControlNormal">@color/colorAccent</item>
    <item name="colorControlActivated">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
</style>

I use this style to my xml as below.

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/pad_small"
        android:hint="Search Store"
        style="@style/TextLabel">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/et_search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/ic_search"/>
</com.google.android.material.textfield.TextInputLayout>

gradle import that I am using is

implementation 'com.google.android.material:material:1.1.0-alpha01'

The layout looks as below, what am I missing? How to change the color of title of TextInputLayout? Currently I have set dark background so text is visible, but I want to use white background and when I do that title gets mixed with background and is not visible.

Answer 1

Try using

android:textColorHighlight="@color/when_focused"
android:textColorHint="@color/not_focused"

Change your styles.xml like this

<style name="TextLabel"parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/colorAccent</item>
    <item name="android:textColorHint">@color/colorAccent</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHighlight="@color/when_focused"</item>
 </style>

If that doesn't work, try using these two directly in the XML

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/pad_small"
    android:textColorHighlight="@color/when_focused"
    android:textColorHint="@color/not_focused"
    android:hint="Search Store"
    style="@style/TextLabel">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/et_search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_search"/>
 </com.google.android.material.textfield.TextInputLayout>

Answer 2

Try using hintColor? In layout? That works in normal cases haven't worked with material design I meant hintColor this way

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/pad_small"
    android:hintColor="#0000"
    android:hint="Search Store"
    style="@style/TextLabel">