Lee Royld
Lee Royld

Reputation: 75

How to animate fragment animation in conditional navigation

To animate the animation between destinations in the navigation component, one can specify the following attributes in the action tag like below.

<fragment
    .........>
    <action
        ........
        app:enterAnim="@anim/slide_in_right"
        app:exitAnim="@anim/slide_out_left"
        app:popEnterAnim="@anim/slide_in_left"
        app:popExitAnim="@anim/slide_out_right" />
</fragment>

I read about conditional navigation (https://developer.android.com/guide/navigation/navigation-conditional), it suggested that some screens, for example, a login screen should be handled independently from navigation flow.

enter image description here

<navigation
        .........
        app:startDestination="@id/main_fragment">
    <fragment
            android:id="@+id/main_fragment"
            android:name="com.google.android.conditionalnav.MainFragment"
            android:label="fragment_main"
            tools:layout="@layout/fragment_main">
        <action
                android:id="@+id/navigate_to_profile_fragment"
                app:destination="@id/profile_fragment"/>
    </fragment>
    <fragment
            android:id="@+id/login_fragment"
            android:name="com.google.android.conditionalnav.LoginFragment"
            android:label="login_fragment"
            tools:layout="@layout/login_fragment"/>
    <fragment
            android:id="@+id/profile_fragment"
            android:name="com.google.android.conditionalnav.ProfileFragment"
            android:label="fragment_profile"
            tools:layout="@layout/fragment_profile"/>
</navigation>

I want to redirect from ProfileFragment to LoginFragment when the user hasn't authenticated yet with animations. I understand that we can define the transitions explicitly on the LoginFragment when enter or exit the fragment.

 class LoginFragment : Fragment() {
     override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          val inflater = TransitionInflater.from(requireContext())
          enterTransition = inflater.inflateTransition(R.transition.slide_right)
          exitTransition = inflater.inflateTransition(R.transition.fade)
     }
  }

class ProfileFragment : Fragment() {
      .......
      navController.navigate(R.id.login_fragment)
      .......
}

I wonder if there are other ways around to animate from ProfileFragment to LoginFragment with animation using the navigation component or anim attributes like we have on the action tag without specifying it in LoginFragment.

Upvotes: 1

Views: 525

Answers (1)

ianhanniballake
ianhanniballake

Reputation: 199805

If you have an action that needs to be accessible to multiple destinations (as you might want your navigate_to_profile_fragment action to be), this is precisely the use case for global actions - actions defined at the <navigation> graph level, rather than associated with just a single destination. This means that any destination in your graph can trigger the action via navigate(R.id.navigate_to_profile_fragment)

<navigation
    .........
    app:startDestination="@id/main_fragment">
    <action
        android:id="@+id/navigate_to_profile_fragment"
        app:destination="@id/profile_fragment"
        app:enterAnim="@anim/slide_in_right"
        app:exitAnim="@anim/slide_out_left"
        app:popEnterAnim="@anim/slide_in_left"
        app:popExitAnim="@anim/slide_out_right"/>
    <fragment
        android:id="@+id/main_fragment"
        android:name="com.google.android.conditionalnav.MainFragment"
        android:label="fragment_main"
        tools:layout="@layout/fragment_main">
    </fragment>
    <fragment
        android:id="@+id/login_fragment"
        android:name="com.google.android.conditionalnav.LoginFragment"
        android:label="login_fragment"
        tools:layout="@layout/login_fragment"/>
    <fragment
        android:id="@+id/profile_fragment"
        android:name="com.google.android.conditionalnav.ProfileFragment"
        android:label="fragment_profile"
        tools:layout="@layout/fragment_profile"/>
</navigation>

Upvotes: 1

Related Questions