Control specific elements in a shared element animation

Question

In my app I have a shared element that looks something like this

 <FrameLayout
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/title"
        android:layout_margin="16dp"
        android:text="Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:id="@+id/image"
        android:src="@drawable/hero_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</FrameLayout>

In my activity I mark the image as the shared element and thus the image transitions to the next activity. However, I want to fade out the title before the image is transitioning. It looks like I should be able to get this working by using setSharedElementExitTransition() and setting the title as a target, but whatever I try, that animation appears not to work and the transitioning image is drawn over the snapshotted title.

I've read through https://halfthought.wordpress.com/2014/12/08/what-are-all-these-dang-transitions/ by George Mount and looked through his excellent answers here on SO, but I just need a little bit more help :)

Answer 1

This is how to get the basics working, assuming setTransitionName("text") is called on the title view

1. Set the proper shared element exit animation in Activity A:

   getWindow().setSharedElementExitTransition(new TransitionSet().
               addTransition(new Fade().addTarget("text"));
   

2. After startActivity() is called, change the visibility of the title text view using setVisibility(View.INVISIBLE). This is required to make the fade work.

Setting the view to INVISIBLE was the essential step that I was missing, and I also had a window exit animation set. However, I should have set a window return animation using Window.setReturnTransition().