Theme color modification of TextInputLayout

Regarding the issue of TextInputLayout class, this type is not available in androidx, and dependencies need to be imported.

implementation 'com.google.android.material:material:1.0.0'

use:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_account"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextInputLayoutTheme"
    app:hintTextAppearance="@style/TextInputLayoutTheme"  //提示语的样式
    app:errorTextAppearance="@style/TextInputLayouteErrMsg" //错误提示的样式
    >
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="numberPassword"
        android:imeOptions="actionDone"
        android:lines="1"
        android:singleLine="true"
        android:hint="@string/please_enter_password"
        />
</com.google.android.material.textfield.TextInputLayout>

Use it in combination with TextInputEditText to achieve a smooth user experience. When Editext gets focus, hints will automatically appear on it, enhancing the user experience.

But with such a cool effect, the most troublesome thing is how to modify the hint text and bottom line color of TextInputLayout?

Please pay attention to the red part of the above code, it is very critical! When we modify TextInputLayout, we must remember to modify the Theme rather than the style.

When the EditText of the first TextInputLayout gets focus, the text and color use Theme

android:theme="@style/TextInputLayoutTheme"

    <style name="TextInputLayoutTheme" >
        <item name="android:textColor">@color/colorPrimaryDark</item>
<!--        <item name="android:textSize">16sp</item>-->
        <!-- 底部线 默认颜色 -->
        <item name="colorControlNormal">@color/colorPrimaryDark</item>
        <!-- 底部线 EditText激活时颜色 -->
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

When clicking to log in, the first input box is judged to be non-empty, and the performance is as follows

app:errorTextAppearance="@style/TextInputLayouteErrMsg"

Because our display form in the code is error, see below

text_account.setError("账号不能为空");

At this point, everyone can adapt to various colors at will, and no longer have to worry about bugs raised by the product sister. . . . .

Theme color modification of TextInputLayout

Guess you like