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

Question

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>

Any help is greatly appreciated

score 5 · Accepted Answer · answered Mar 22 '20 at 19:48

5

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.

answered Mar 22 '20 at 19:48

GSala

946
7
15

1

I kindof refuse to accept this as the final solution. Of course i saw that the documentation is missing that feature. But i do not like how the filled boxes look like. Hmm, maybe i will play around with their stlyle – Avinta Mar 22 '20 at 21:19
You shouldn't accept it as the solution. I was just commenting to help out. Actually, it should have been a comment on your question, not an answer – GSala Mar 22 '20 at 22:13
1

Sorry, my comment sounded way to offending when i reread it now. It was more a talking to myself kindof refuse to accept. I appreciate your answer though:) – Avinta Mar 22 '20 at 22:33
@DennisH. Did you find any solution? I am kinda stuck with the same issue. – pecific_rim May 05 '20 at 13:13
@dtb305 No, I have not. I seems that you would have to restyle the whole widget. Currently it also lays on top of the edit text which makes the border disappear. With a transparent background it would not. Also what to do where the background colour touches the inside color. I see why android does not support that. It is complex to realise and may not even look good. But I appreciate an answer if anyone is going to try this – Avinta May 06 '20 at 22:15

score 1 · Answer 2 · answered May 26 '20 at 15:54

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.

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!

score 0 · Answer 3 · answered Apr 07 '23 at 12:51

Setting a separate background color just for the hint feels a bit weird and doesn't look like something that's officially supported, but the setHint() method takes a CharSequence parameter - maybe you could try a SpannabeString with BackgroundColorSpan.

I tried and it works for me :)

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

3 Answers3

Linked