title: Nested fragments transitioning incorrectly
body: <p>Hello good programmers of stack overflow! I've spent a good week with this problem and am now very <strong>desperate</strong> for a solution.</p>
  
  <hr>
  
  <h1>The scenario</h1>
  
  <p>I'm using android.app.Fragment's not to be confused with the support fragments.</p>
  
  <p>I have 6 child fragments named:</p>
  
  <ul>
  <li><code>FragmentOne</code></li>
  <li><code>FragmentTwo</code></li>
  <li><code>FragmentThree</code></li>
  <li><code>FragmentA</code></li>
  <li><code>FragmentB</code></li>
  <li><code>FragmentC</code></li>
  </ul>
  
  <p>I have 2 parent fragments named:</p>
  
  <ul>
  <li><code>FragmentNumeric</code></li>
  <li><code>FragmentAlpha</code></li>
  </ul>
  
  <p>I have 1 activity named:</p>
  
  <ul>
  <li><code>MainActivity</code></li>
  </ul>
  
  <p>They behave in the following:</p>
  
  <ul>
  <li>Child fragments are fragments that only show a view, they do not show nor contain fragments.</li>
  <li>Parent fragments fill their entire view with a single child fragment. They're able to replace the child fragment with other child fragments.  </li>
  <li>The activity fills most of its view with a parent fragment. It can replace it with other parent fragments. 
  So at any one time the screen has just a single child fragment showing.</li>
  </ul>
  
  <p>As you've probably guessed, </p>
  
  <p><code>FragmentNumeric</code> shows child fragments <code>FragmentOne</code>, <code>FragmentTwo</code>, and <code>FragmentThree</code>. </p>
  
  <p><code>FragmentAlpha</code> shows  child fragments <code>FragmentA</code>, <code>FragmentB</code>,  and <code>FragmentC</code>. </p>
  
  <hr>
  
  <h1>The problem</h1>
  
  <p>I'm trying to transition/animate parent and child fragments. The child fragments transition smoothly and as expected. However when I transition to a new parent fragment, it looks terrible. The child fragment looks like it runs an independent transition from its parent fragment. And the child fragment looks like it is removed from the parent fragment as well. A gif of it can be viewed here <a href="https://imgur.com/kOAotvk" rel="noreferrer">https://imgur.com/kOAotvk</a>. Notice what happens when I click Show Alpha.</p>
  
  <p>The closest question &amp; answers I could find are here: <a href="https://stackoverflow.com/questions/14900738/nested-fragments-disappear-during-transition-animation">Nested fragments disappear during transition animation</a> however all of the answers are unsatisfying hacks. </p>
  
  <hr>
  
  <h1>Animator XML Files</h1>
  
  <p>I have the following animator effects (duration is long for testing purposes):</p>
  
  <p><strong>fragment_enter.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;set&gt;
      &lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
          android:duration="4000"
          android:interpolator="@android:anim/linear_interpolator"
          android:propertyName="xFraction"
          android:valueFrom="1.0"
          android:valueTo="0" /&gt;
  &lt;/set&gt;
  </code></pre>
  
  <p><strong>fragment_exit.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;set&gt;
      &lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
          android:duration="4000"
          android:interpolator="@android:anim/linear_interpolator"
          android:propertyName="xFraction"
          android:valueFrom="0"
          android:valueTo="-1.0" /&gt;
  &lt;/set&gt;
  </code></pre>
  
  <p><strong>fragment_pop.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;set&gt;
      &lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
          android:duration="4000"
          android:interpolator="@android:anim/linear_interpolator"
          android:propertyName="xFraction"
          android:valueFrom="0"
          android:valueTo="1.0" /&gt;
  &lt;/set&gt;
  </code></pre>
  
  <p><strong>fragment_push.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;set&gt;
      &lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
          android:duration="4000"
          android:interpolator="@android:anim/linear_interpolator"
          android:propertyName="xFraction"
          android:valueFrom="-1.0"
          android:valueTo="0" /&gt;
  &lt;/set&gt;
  </code></pre>
  
  <p><strong>fragment_nothing.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;set&gt;
      &lt;objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
          android:duration="4000" /&gt;
  &lt;/set&gt;
  </code></pre>
  
  <hr>
  
  <h1>MainActivity.kt</h1>
  
  <p>Things to consider: The first parent fragment, FragmentNumeric, doesn't have enter effects so its always ready with the activity and doesn't have exit effects because nothing is exiting. I'm also using <code>FragmentTransaction#add</code> with it where as FragmentAlpha is using <code>FragmentTransaction#replace</code> </p>
  
  <pre class="lang-java prettyprint-override"><code>class MainActivity : AppCompatActivity {
  
      fun showFragmentNumeric(){
          this.fragmentManager.beginTransaction()
                  .setCustomAnimations(R.animator.fragment_nothing,
                                       R.animator.fragment_nothing,
                                       R.animator.fragment_push,
                                       R.animator.fragment_pop)
                  .add(this.contentId, FragmentNumeric(), "FragmentNumeric")
                  .addToBackStack("FragmentNumeric")
                  .commit()
  }
  
      fun showFragmentAlpha(){
          this.fragmentManager.beginTransaction()
                  .setCustomAnimations(R.animator.fragment_enter,
                                       R.animator.fragment_exit,
                                       R.animator.fragment_push,
                                       R.animator.fragment_pop)
                  .replace(this.contentId, FragmentAlpha(), "FragmentAlpha")
                  .addToBackStack("FragmentAlpha")
                  .commit()
      }
  
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          if (savedInstanceState == null) {
              showFragmentNumeric()
          }
      }
  }
  </code></pre>
  
  <hr>
  
  <h1>FragmentNumeric</h1>
  
  <p>Does the same thing as the activity in terms of quickly showing its first child fragment.</p>
  
  <pre class="lang-java prettyprint-override"><code>class FragmentNumeric : Fragment {
  
      fun showFragmentOne(){
              this.childFragmentManager.beginTransaction()
                      .setCustomAnimations(R.animator.fragment_nothing,
                                           R.animator.fragment_nothing,
                                           R.animator.fragment_push,
                                           R.animator.fragment_pop)
                      .add(this.contentId, FragmentOne(), "FragmentOne")
                      .addToBackStack("FragmentOne")
                      .commit()
      }
  
      fun showFragmentTwo(){
          this.childFragmentManager.beginTransaction()
                  .setCustomAnimations(R.animator.fragment_enter,
                                       R.animator.fragment_exit,
                                       R.animator.fragment_push,
                                       R.animator.fragment_pop)
                  .replace(this.contentId, FragmentTwo(), "FragmentTwo")
                  .addToBackStack("FragmentTwo")
                  .commit()
      }
  
  
      fun showFragmentThree(){
          this.childFragmentManager.beginTransaction()
                  .setCustomAnimations(R.animator.fragment_enter,
                                       R.animator.fragment_exit,
                                       R.animator.fragment_push,
                                       R.animator.fragment_pop)
                  .replace(this.contentId, FragmentThree(), "FragmentThree")
                  .addToBackStack("FragmentThree")
                  .commit()
      }
  
      override fun onViewCreated(view: View?, savedInstanceState: Bundle?) {
          super.onViewCreated(view, savedInstanceState)
          if (savedInstanceState == null) {
              if (this.childFragmentManager.backStackEntryCount &lt;= 1) {
                  showFragmentOne()
              }
          }
      }
  }
  </code></pre>
  
  <hr>
  
  <h1>Other Fragments</h1>
  
  <p>FragmentAlpha is following the same pattern as FragmentNumeric, replacing Fragments One, Two and Three with Fragments A, B and C respectively. </p>
  
  <p>Children fragments are just showing the following XML view and setting its text and button click listener dynamically to either call a function from the parent fragment or activity. </p>
  
  <p><strong>view_child_example.xml</strong></p>
  
  <pre><code>&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/background"
      android:clickable="true"
      android:focusable="true"
      android:orientation="vertical"&gt;
  
      &lt;TextView
          android:id="@+id/view_child_example_header"
          style="@style/Header"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" /&gt;
  
  
      &lt;Button
          android:id="@+id/view_child_example_button"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"  /&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>Using dagger and some contracts I have the child fragments callback to their parent fragments and hosting activities by doing something like the below:</p>
  
  <p>FragmentOne sets the button click listener to do:</p>
  
  <pre><code>(parentFragment as FragmentNumeric).showFragmentTwo()
  </code></pre>
  
  <p>FragmentTwo sets the button click listener to do: </p>
  
  <pre><code>(parentFragment as FragmentNumeric).showFragmentThree()
  </code></pre>
  
  <p>FragmentThree is different, it will set the click listener to do:</p>
  
  <pre><code>(activity as MainActivity).showFragmentAlpha()
  </code></pre>
  
  <hr>
  
  <p>Does anyone have a solution for this problem? </p>
  
  <hr>
  
  <h1>Update 1</h1>
  
  <p>I've added an example project as requested: <a href="https://github.com/zafrani/NestedFragmentTransitions" rel="noreferrer">https://github.com/zafrani/NestedFragmentTransitions</a></p>
  
  <p>A difference in it and that from the one in my original video is the parent fragment no longer uses a view with the xFraction property. So it looks like the enter animation doesn't have that overlapping effect anymore. It still however does remove the child fragment from the parent and animate them side by side. After the animation completes, Fragment Three is replaces with Fragment A instantly.</p>
  
  <h1>Update 2</h1>
  
  <p>Both the parent and child fragment views are using xFraction property. The key is to suppress the childs animation when the parent is animating. </p>