Material-components-android: background color of TextInputLayout

Created on 12 May 2018 · 9Comments · Source: material-components/material-components-android

Hi guys, I'm new here, I just tried the basic TextInputLayout for the first time,
by default the background looks like translucent , according to our design I need to change it to pure white. But I tried app:boxBackgroundColor="#ffffff", then the text and text hint become invisible!
Then I tried app:boxBackgroundColor="#80ffffff" I can see they are some kind of transparent.
You know why? I just wanna pure white background and keep others same.

Thanks in advance!

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="120dp"
app:boxBackgroundColor="#ffffff">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ff000000"
        android:textColorHint="#ff0000"
        android:hint="Location"/>

Source

houdangui1985

👍11

Most helpful comment

bug not fixed,i am using com.google.android.material:material:1.1.0-alpha02
<com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" app:hintEnabled="false" app:boxBackgroundColor="@color/transparent" app:passwordToggleEnabled="true" android:paddingLeft="@dimen/padding_very_small_8" android:gravity="center_vertical" android:background="@color/transparent" android:layout_height="match_parent"> <com.google.android.material.textfield.TextInputEditText tools:text="assdasdasdasd" android:inputType="textPassword" android:textSize="@dimen/text_size_small_10" android:hint="@string/password_text" android:textAlignment="gravity" android:background="@color/transparent" android:layout_width="match_parent" android:gravity="center_vertical" android:layout_height="match_parent"/> </com.google.android.material.textfield.TextInputLayout>

background showing white

ghost on 7 Jan 2019

👍19

All 9 comments

@houdangui1985 Thanks for reporting this issue. I looked into it and it appears that the box background draw() was getting called after the other draw() calls, which caused the background to be drawn on top of the other text field elements. I have a fix for this in the works, it should be in soon.