androidandroid-fragmentsnavigationandroid-architecture-componentsnavigation-architecture

Using jetpack Navigation component transition-animation is not working


I am using the jetpack navigation component for the navigation of fragments, I created an anim at res directory and added this animation-transition:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
    android:duration="600"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromXDelta="100%"
    android:toXDelta="0%" />
 </set>

and set this animation as enter animation for the fragment opening at navigation component visually: enter image description here

after calling this:

findNavController().navigate(R.id.reg2Fragment)

I am still not getting my manual animation the default fade in and out is showing there.

I am using Material Io design for my whole project theme. and here are my dependencies:

implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.6.0'
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.1'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.google.firebase:firebase-auth:21.0.1'
implementation 'androidx.navigation:navigation-fragment-ktx:2.3.5'
implementation 'androidx.navigation:navigation-ui-ktx:2.3.5'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
implementation "androidx.activity:activity-ktx:1.3.1"
implementation "androidx.fragment:fragment-ktx:1.3.6"
implementation platform('com.google.firebase:firebase-bom:28.4.0')
implementation 'com.google.firebase:firebase-analytics-ktx'

// for Jet-Pack-Navigation-Component
implementation 'androidx.navigation:navigation-fragment-ktx'
implementation 'androidx.navigation:navigation-ui-ktx'

here is the navGraph:

 <?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_graph"
app:startDestination="@id/reg1Fragment">
    <fragment
    android:id="@+id/reg1Fragment"
    android:name="com.example.authapp.uiRegistration.Reg1Fragment"
    tools:layout="@layout/fragment_reg1"
    android:label="Reg1Fragment" >
        <action
        android:id="@+id/action_reg1Fragment2_to_reg2Fragment"
        app:destination="@id/reg2Fragment"
        app:enterAnim="@anim/nav_default_enter_anim"
        app:exitAnim="@anim/nav_default_exit_anim"
        app:popEnterAnim="@anim/slide_out_bottom"
        app:popExitAnim="@anim/slide_out_right" />
    </fragment>
    <fragment
    android:id="@+id/reg2Fragment"
    android:name="com.example.authapp.uiRegistration.Reg2Fragment"
    tools:layout="@layout/fragment_reg2"
    android:label="Reg2Fragment" >
        <action
        android:id="@+id/action_reg2Fragment_to_reg3Fragment"
        app:destination="@id/reg3Fragment"
        app:enterAnim="@anim/nav_default_enter_anim" />
    </fragment>
    <fragment
    android:id="@+id/reg3Fragment"
    android:name="com.example.authapp.uiRegistration.Reg3Fragment"
    android:label="fragment_reg3"
    tools:layout="@layout/fragment_reg3" >
       <action
        android:id="@+id/action_reg3Fragment_to_userProfile"
        app:destination="@id/userProfile"
        app:popUpTo="@id/userProfile" />
    </fragment>
    <activity
    android:id="@+id/userProfile"
    android:name="com.example.authapp.UserProfile"
    android:label="activity_user_profile"
    tools:layout="@layout/activity_user_profile" />
    </navigation>

Any expert please help me with this.

Thanks


Solution

  • findNavController().navigate(R.id.reg2Fragment)

    Here the version of the navigate(destinationId) method doesn't involve the animation as the R.id.reg2Fragment doesn't provide any information more than the destination fragment id.

    But in order to include the animation in the navigation, you need to use the navigate() method that accepts a navDirection argument which is typically the method of the generated Direction class for this particular action.

    So, as the id of the action is action_reg1Fragment2_to_reg2Fragment:

    <action
        android:id="@+id/action_reg1Fragment2_to_reg2Fragment"
        app:destination="@id/reg2Fragment"
        app:enterAnim="@anim/nav_default_enter_anim"
        app:exitAnim="@anim/nav_default_exit_anim"
        app:popEnterAnim="@anim/slide_out_bottom"
        app:popExitAnim="@anim/slide_out_right" />
    

    Then, the navigation would be:

    findNavController().navigate(Reg1FragmentDirections.actionReg1Fragment2ToReg2Fragment())