How to set TextInputLayout's outlined box floating hint background color

user_4338278 0
Viewed 3497

How to change the background color of the floating hint in a text input layout outline box style to transparent. I think the attached picture clearly states the issue It should be red above the stroke and white below). What I did to change the background itself was:

<style name="App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxBackgroundColor">@color/white</item>
</style>

Outlined box with corrupted background

Any help is greatly appreciated

android-textinputlayout material-design android-edittext background android
2 Answers

If you look at the style docs in https://material.io/develop/android/components/text-fields/ you can see the "Filled text view" supports the boxBackgroundColor attribute while the "Outlined text field" does not.

So I don't think there's a proper solution to this problem unless you find the inner hint TextView within the layout and change the background manually. But that would be quite hacky since it depends on the implementation of the TextInputLayout staying the same.

user_21539260

I don't know if it helps but I managed to have a uniform background inside the box strokes for the TextInputLayout in outline box mode.

enter image description here

In my example, the box corners have a 10dp radius (text_input_layout_box_radius). Also, the TextInputEditText has height of 80dp (text_input_edit_text_height).

I defined a style for the TextInputLayout in which I apply a custom background shape:

    <style name="MyTextInputLayout" parent="Widget.Design.TextInputLayout">
        <item name="android:background">@drawable/text_input_background</item>
        <!-- ... other customizations ... -->
    </style>

The text_input_background.xml drawable is defined as a layer-list:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="@dimen/text_input_edit_text_height"
        android:top="@dimen/text_input_background_padding_top">
        <shape>
            <corners android:radius="@dimen/text_input_layout_box_radius" />
            <solid android:color="@color/<your_background_color>" />
        </shape>
    </item>
</layer-list>

The text_input_background_padding_top is equal to 13dp and it does the magic here. In my case, it centers the shape inside the box. It is needed to compensate for the hint height which is 30sp in my case, it can be modified with the hintTextAppearance attribute. You will probably have to find the correct padding value corresponding to your hint text height.

Let me know if it helps!

user_90077300
Related