Layout broke with new material components

[LipeDuoli]

General information

• SDK/Library version: 4.2.0

Issue description

Using the new material components, the 2 new variants of EditText layout is a little broke.

[quinnjn]

I made a sample app to try this: https://github.com/quinnjn/android-card-form-issue-74

Using the latest stable, and alpha versions of material didn't show any changes to CardForm, but I think I'm missing the details. Can you provide a PR to that above example repository to put CardForm in the problematic state?

[LipeDuoli]

Hi @quinnjn , PR done.

[alashow]

@quinnjn Apparently it's because of the theme. It works as expected with appcompat themes, but not material components themes.

In your sample, the app theme is set to Theme.AppCompat.Light.DarkActionBar and the problem occurs when the theme is set to theme like Theme.MaterialComponents.Light.

[alashow]

Can be fixed by overriding bt_text_input_layout style and extending legacy input layout style Widget.Design.TextInputLayout:

<style name="bt_text_input_layout" parent="@style/Widget.Design.TextInputLayout">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginTop">12dp</item>
        <item name="android:accessibilityLiveRegion" tools:targetApi="kitkat">polite</item>
</style>

[asknask]

Can confirm this problem exists, and renders the form useless frankly. Tried the fix me mentioned above and it works.

[NissanRayappu5235]

I couldnt overwrite to change the text color inside of textfield.mine remains in white color

[NissanRayappu5235]