Navigation Component exit animation is not work as expected

Viewed 77

I am using the Navigation Component to handle navigation inside the Android app and it's working great but recently, I received one requirement in which I have to slide up both fragments UI (entering & exiting) when launching a new fragment. But I see that exit slide up animation is not working when I use app:popUpTo (main navigation id) and popUpToInclusive inside the action tag.

Here, you can find the animation files:

  • slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <translate
        android:duration="@integer/screen_slide_up_down_animation_duration"
        android:fromXDelta="0%"
        android:fromYDelta="100%p"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>
  • slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="@integer/screen_slide_up_down_animation_duration"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="100%p" />
</set>
  • nav_graph_onboarding.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_onboarding"
    app:startDestination="@+id/introPagerScreen"
    tools:ignore="UnusedNavigation">

    <!-- other Code -->

    <fragment
        android:id="@+id/usernameCaptureScreen"
        android:name="com.ui.onboarding.UsernameCaptureFragment"
        android:label="@string/choose_username"
        tools:layout="@layout/fragment_username_capture">

        <argument
            android:name="suggestedUsername"
            android:defaultValue="@null"
            app:argType="string"
            app:nullable="true" />

        <action
            android:id="@+id/action_username_capture_to_welcome"
            app:destination="@+id/welcomeScreen"
            app:enterAnim="@anim/slide_up"
            app:exitAnim="@anim/slide_up"
            app:popEnterAnim="@anim/slide_down"
            app:popExitAnim="@anim/slide_down"
            app:popUpTo="@id/nav_onboarding"
            app:popUpToInclusive="true" />

    </fragment>

    <fragment
        android:id="@+id/welcomeScreen"
        android:name="com.ui.onboarding.WelcomeFragment"
        android:label="@string/welcome_screen"
        tools:layout="@layout/fragment_welcome">

        <action
            android:id="@+id/action_welcome_to_profile_photo_capture"
            app:destination="@+id/profilePhotoCaptureScreen"
            app:enterAnim="@anim/slide_up"
            app:exitAnim="@anim/slide_up"
            app:popEnterAnim="@anim/slide_down"
            app:popExitAnim="@anim/slide_down"
            app:popUpTo="@id/nav_onboarding"
            app:popUpToInclusive="true" />

    </fragment>

    <!-- other Code -->

</navigation>

I am not sure how shall I manage to clear the back stack without using app:popUpTo and handle the back button as well.

0 Answers
Related