Android Navigation Component fragment transitions have white background

Question

I'm using the Jetpack Navigation library and having an issue with the fragment transitions, either if it's a fade or slide animation it always has a white background instead of the previous screen content.

fragment A -> fragment B, when the animation is running instead of seeing the background as fragment A, it's a white background.

navigation

  <fragment
      android:id="@+id/nav_page"
      android:name="my.fragmenta"
      tools:layout="@layout/fragment_a">

    <action
        android:id="@+id/action_to_b"
        app:destination="@id/nav_b"
        app:enterAnim="@anim/slide_in_up"
        app:popExitAnim="@anim/slide_out_down"/>
  </fragment>

activity style

  <style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">@color/statusBarColor</item>
  </style>

anim files

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="100%p"
    android:toYDelta="0"
    android:duration="@android:integer/config_longAnimTime" />

and

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0"
    android:toYDelta="100%p"
    android:duration="@android:integer/config_longAnimTime" />

Anyone has an idea how to fix it?

Answer 1

After many tries I figured this is the best approach to animate transitions:

<action
    android:id="@+id/id"
    app:destination="@id/dest"
    app:enterAnim="@anim/slide_in_bottom"
    app:exitAnim="@anim/slide_out_top"
    app:popEnterAnim="@anim/slide_in_top"
    app:popExitAnim="@anim/slide_out_bottom"/>

or

<action
    android:id="@+id/id"
    app:destination="@id/dest"
    app:enterAnim="@anim/slide_in_right"
    app:exitAnim="@anim/slide_out_left"
    app:popEnterAnim="@anim/slide_in_left"
    app:popExitAnim="@anim/slide_out_right"/>

you should have all four events to have a smooth animation.