CODEWITHSUNDEEP
androidandroid-fragmentsnavigation
FranticRock
FranticRock

Reputation: 3283

How can we animate a navigateUp() fragment transition?

When executing fragment transactions that are part of the androidx.navigation system, we can specify NavOptions programmatically like this: 

val navOptions = NavOptions.Builder()
        .setEnterAnim(R.anim.slide_in_right)
        .build()
    findNavController(R.id.nav_host_fragment).navigate(R.id.settingsFragment, null, navOptions)

We can also specify them in the navigation.xml like this:

 <fragment
        android:id="@+id/settingsFragment"
        android:name="com.test.android.fragments.SettingsFragment"
        android:label="SettingsFragment">

        <action
            android:id="@+id/action_settings_to_profile"
            app:destination="@id/userProfileSettingsFragment"
            app:enterAnim="@anim/slide_in_right" />

</fragment>

But how can we animate the navigateUp() method? It doesn't accept NavOptions. I am sliding from right my fragment, but when the user presses Back, there's no animation taking place. I want to do a slide to right animation (the reverse of the one they saw when getting there).

How can I animate: navigateUp() ? It calls popBackStackInternal internally which is a complicated operation. I don't see any logic having to do with animation there.

Any alternative solutions to returning to where you came from with animation, besides navigateUp() ?

Upvotes: 1

Views: 1245

Answers (1)

Max
Max

Reputation: 788

You can use the popEnterAnim and popExitAnim attributes like this:

 <fragment
    android:id="@+id/settingsFragment"
    android:name="com.storefaces.android.fragments.SettingsFragment"
    android:label="SettingsFragment">

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

</fragment>

Alternatively, you can call setPopEnterAnim() and setPopExitAnim() methods on NavOptions.Builder

val navOptions = NavOptions.Builder()
    .setEnterAnim(R.anim.slide_in_right)
    .setExitAnim(R.anim.slide_out_right)
    .setPopEnterAnim(R.anim.slide_in_left)
    .setPopExitAnim(R.anim.slide_out_left)
    .build()

findNavController(R.id.nav_host_fragment).navigate(R.id.settingsFragment, null, navOptions)

Upvotes: 4

Related Questions