TextInputLayout shared element transition issue

Question

Here we go: two Activities with a shared element transition (Button). The second Activity has a TextInputLayout with a hint:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:focusable="true"
              android:focusableInTouchMode="true"
              android:gravity="center_horizontal"
              android:orientation="vertical">

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="GO"
            android:transitionName="test"/>

    <android.support.design.widget.TextInputLayout android:layout_width="match_parent"
                                                   android:layout_height="wrap_content"
                                                   android:hint="WTF?!">
        <android.support.design.widget.TextInputEditText android:layout_width="match_parent"
                                                         android:layout_height="wrap_content"/>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>   

The enter transition of the second Activity is delayed for clarifying the problem: The hint of the TextInputLayout ignores the transition animation and displayed immediately after the transition is started. At the end of the animation you can see the correctly animated EditText background (horizontal line) below the hint. Is this a bug or am I missing something? Here is the second Activity:

public class SecondActivity extends AppCompatActivity {

    public static void launch(Activity activity, View sharedElement) {
        Intent intent = new Intent(activity, SecondActivity.class);

        ActivityOptionsCompat options = ActivityOptionsCompat.
                makeSceneTransitionAnimation(activity, sharedElement, "test");
        activity.startActivity(intent, options.toBundle());
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setEnterTransition(new Slide().setDuration(5000));
        }
    }
}

EDIT: This bug can be "fixed" by adding a background the the second Activity's layout.

Loosejointed

Which is your shared element? What do you expect to happen? – Bearer

The shared element is the button, as you can see from the example code. The expectation is, that the hint of the TextInputLayout is properly animated as a part of the Activity transition, like the rest of the view (look at the proper transition of the EditText's background in the video). – Loosejointed

Please, clarify your question. Your animated GIF looks nice, we've got it. It's pretty cool animation. But I can't understand, what's the problem? where is it? What I see if blue line moves up. That's all. And then a short blink -- line appears under input field. Is it expected? Is it not expected? Wtf? – Firewarden

The hint of the TextInputLayout is not animated and shows up immediately after transition to the second Activity is started. The blinking line is the background of the EditText appears at the end of the Activity transition. The blue line is a status bar of the second Activity while it is animated in. Nothing cool or special here just the code shown above. – Loosejointed

Answer 1

for API 21+

android:transitionGroup="true"

Add this line in TextInputLayout. It would fix it. Or if you have a few TextInputLayout then add that line to their container.

Flashboard

Answer 2

I think its bug of TextInputLayout. I removed it and I gave the hint to TextInputEditText and it worked as you expected.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GO"
        android:transitionName="test" />


    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="WTF?!" />

</LinearLayout>

Aby

Answer 3

Seems to be a bug. I submitted a new issue.

You can avoid this by defining an android:background for the second activity.

Loosejointed