title: Shared elements and content transitions in Fragments
body: <p>I have the following problem:</p>
  
  <p>I'm trying to transition from <code>Fragment</code> A to <code>Fragment</code> B. There is a shared element between these fragments in the form of a <code>Button</code> and some other <code>View's</code> (see layout).</p>
  
  <pre><code>&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:flipper="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;com.mypackage.view.IndicatorViewFlipper
          android:transitionGroup="true"
          android:id="@+id/intro_viewflipper"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          flipper:indicatorColor="@color/white"
          flipper:indicatorMargin="4dp"
          flipper:indicatorRadius="4dp"
          flipper:indicatorBarMargin="104dp"/&gt;
  
      &lt;Button
          android:id="@+id/account_create_btn"
          style="?android:attr/borderlessButtonStyle"
          android:textColor="@color/white"
          android:layout_width="match_parent"
          android:layout_height="@dimen/button_standard_height"
          android:layout_above="@+id/txt_already_account"
          android:background="@drawable/button_yellow_selector"
          android:transitionName="create_account"
          android:text="@string/account_create_btn"
          android:textSize="24sp"
          android:textAllCaps="false" /&gt;
  
      &lt;TextView
          android:id="@+id/txt_already_account"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:gravity="center"
          android:layout_above="@+id/account_login_btn"
          android:layout_marginTop="24dp"
          android:text="@string/account_welcome_already_account"/&gt;
  
      &lt;Button
          android:id="@+id/account_login_btn"
          style="?android:attr/borderlessButtonStyle"
          android:layout_width="match_parent"
          android:layout_height="@dimen/button_standard_height"
          android:layout_marginTop="8dp"
          android:layout_alignParentBottom="true"
          android:transitionName="login"
          android:background="@drawable/button_blue_selector"
          android:textColor="@color/white"
          android:textSize="24sp"
          android:textAllCaps="false"
          android:text="@string/account_create_login_btn"/&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>What I'm trying to do is to let all the content in <code>Fragment</code> <em>except for the shared element</em>, transition (slide to the left) and let all the content form <code>Fragment</code> B <em>except for the shared element</em> slide in from the right. During this content transition I want the shared element to remain in its original position until the content transitions are done, and then let it slide to its new position in <code>Fragment</code> B.</p>
  
  <p>This last behaviour is where it goes wrong: once I start the exit transition in <code>Fragment</code> A the shared element disappears and slides in from the right with the content transition of <code>Fragment</code> B. The behaviour of the shared element is correct if I don't add any exit/enter transitions.</p>
  
  <p>The code (in <code>Fragment</code> A):</p>
  
  <pre><code>Fragment fragment = MyFragment.newInstance();
  FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
  fragmentTransaction.hide(this);
  fragmentTransaction.add(R.id.frame_container, fragment, fragment.getClass().getSimpleName());
  fragmentTransaction.addSharedElement(sharedElement, sharedElementTag);
  Transition sharedElementTransaction = TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.move);
  sharedElementTransaction.setStartDelay(400);
  fragment.setSharedElementEnterTransition(sharedElementTransaction);
  setExitTransition(new Slide(Gravity.LEFT).setDuration(200));
  fragment.setEnterTransition(new Slide(Gravity.RIGHT).setDuration(200));
  </code></pre>
  
  <p>Can anyone help me get the desired behaviour?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I've made a work around that almost does what I want using <code>animate()</code> on my views to slide/fade them and on completion of this animation trigger the shared element transaction:</p>
  
  <pre><code>Transition sharedElementTransition = TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.move);
  sharedElementTransition.setStartDelay(400);
  fragment.setSharedElementEnterTransition(sharedElementTransition);
  setSharedElementReturnTransition(sharedElementTransition);
  
  mLoginBtn.animate()
     .x(-mLoginBtn.getWidth())
     .setDuration(400)
     .start();
  
  viewFlipper.animate()
     .x(-viewFlipper.getWidth())
     .setDuration(400)
     .setListener(new AnimatorListenerAdapter() {
     @Override
     public void onAnimationEnd(Animator animation) {
          super.onAnimationEnd(animation);
          transaction.commit();
     }
  })
  .start();
  
  fragment.setEnterSharedElementCallback(new SharedElementCallback() {
     @Override
     public void onSharedElementStart(List&lt;String&gt; sharedElementNames, List&lt;View&gt; sharedElements, List&lt;View&gt; sharedElementSnapshots) {
     super.onSharedElementStart(sharedElementNames, sharedElements, sharedElementSnapshots);
     viewFlipper.animate()
             .x(0)
             .setDuration(400)
             .setListener(null)
             .start();
  
     mLoginBtn.animate()
             .x(0)
             .setDuration(400)
             .start();
     });
  </code></pre>
  
  <p>The problem with this solution is that I can't slide in the <code>Views</code> of the called <code>Fragment</code> so there I now just fade in the <code>Views</code>.</p>