Android Fragment Transition With Animation

Android Fragment Transition With Animation

Android Fragment Transition With Animation
In this article, we are going to learn how to add animation in between fragment transition. Below is the demonstration what we are going to achieve in this article.

Before starting the coding, we are assuming you are aware of How to create and add a fragment? How to change Fragment or Fragment Transition? 
If you are not aware of the mentioned topics, we highly recommend reading these articles before starting this one.
In this article, we need to add animation between fragment transitions. So why not create our animations first.
Step 1: First, we are going to add an "anim" resource directory to store our animation.xml files.
Step 2: Now we are going to create a below four animations XML files
enter.xml

Code

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

exit.xml

Code

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

pop_enter.xml

Code

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

pop_exit.xml

Code

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

Step 3: Now it’s time to use the above animation XML files in our fragment transitions. In our article how to change fragment we learned about how to change fragment now, we are going to change the same code.

Code

private void createFragment(Object obj) {
        fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.fragHolder, (Fragment) obj);
        fragmentTransaction.commit();
    }

Above code is used to change the fragment. To add animation effects modify above codes as shown in below code snippet.

Code

private void createFragment(Object obj) {
        fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.setCustomAnimations(R.anim.enter, R.anim.exit, R.anim.pop_enter, R.anim.pop_exit);
        fragmentTransaction.replace(R.id.fragHolder, (Fragment) obj);
        fragmentTransaction.commit();
    }

What is the difference? In the new code snippet, we added a new line which defining the custom animation for fragmentTransaction. fragmentTransaction.setCustomeAnimation is used to define the custom transition effects. Now let’s run your app and enjoy the transition animation.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share