[TextInputLayout] [Motion] Hint does not follow the layout in animations

Description: I have some TextInputLayouts in a Fragment and I have set the Animation of my Fragments to MaterialFadeThrough. The Animation runs fine (slightly expanding in width), but the hint label inside the TextInputLayout does not move with the parent container. After tapping one Input, all hints in the view jump to the correct position.

Screenshots Before tapping (after enterTransition with MaterialFadeThrough):

After focusing the first Input:

Expected behavior: The hint should move correctly with the outline of the TextInputLayout.

Source code: Layout snippet

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/inputFirstName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="24dp"
        android:hint="@string/first_name">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName" />

    </com.google.android.material.textfield.TextInputLayout>

Style

    <style name="AppStyle.TextInput" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
        <item name="shapeAppearanceOverlay">?shapeAppearanceMediumComponent</item>
        <item name="materialThemeOverlay">@style/AppStyle.TextInput.Overlay</item>
        <item name="boxBackgroundColor">@color/cardBackground</item>
    </style>

    <style name="AppStyle.TextInput.Overlay" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
        <item name="editTextStyle">@style/AppStyle.EditText</item>
    </style>

    <style name="AppStyle.EditText" parent="Widget.MaterialComponents.TextInputEditText.FilledBox">
        <item name="android:background">@drawable/bg_textinput</item>
        <item name="android:textAppearance">@style/AppTextAppearance</item>
    </style>

Android API version: Android Q

Material Library version: Bug exists on 1.2.0-beta01 and 1.3.0-alpha01

Device: Android Emulator, Pixel 3 XL

[dsn5ft]

Ahh this keeps coming up, probably because it’s not very clear behavior from the Android Transitions framework. By default, when setting a transition on a fragment or a sceneRoot, that transition will be applied to each child view as opposed to the fragment as a whole. That behavior might make more sense for some of the framework transitions like Explode which expect to animate all the individual views, but our Material transition patterns typically expect to operate on screens as a whole.

I’m still not exactly sure why the TextInputLayout is behaving that way with a start icon, but you can workaround the issue and also achieve the intended effect by adding android:transitionGroup="true" to the top-level view of the fragment. If you support pre-lollipop, then you can do something like ViewGroupCompat.setTransitionGroup(fragment.getView(), true).

[dsn5ft]

Great, thank you! We’ll take a look soon.