CODEWITHSUNDEEP
androidandroid-fragmentsanimationfragment
Alican Temel
Alican Temel

Reputation: 1318

Android fragment animation

I have Fragment A and Fragment B. A is added and showing. I want to add B to transaction with custom animation. When B enters from right, A must exit to left and they must do it together at the same time and same speed. How can i achive this?

Example image: Here (Image showing as ViewPager used, but i cant use ViewPager)

Thanks for your helps.

Upvotes: 1

Views: 3535

Answers (2)

Will Kung
Will Kung

Reputation: 152

You need two animations - Fragment A will use exit_left.xml for its EXIT animation, and Fragment B will use enter_right.xml for its ENTER animation.

First, when we attach FragmentA to the activity, we set its EXIT animation:

FragmentA fragmentA = new FragmentA();

getSupportFragmentManager()
            .beginTransaction()
            .setCustomAnimations(R.anim.fragment_a_enter, R.anim.exit_left)
            .add(R.id.container, fragmentA, FRAGMENT_A_TAG)
            .commit();

Then, we want to replace FragmentA with FragmentB. So we need to set the ENTER animation for FragmentB. 

FragmentB fragmentB = new FragmentB();

getSupportFragmentManager()
            .beginTransaction()
            .setCustomAnimations(R.anim.enter_right, R.anim.fragment_b_exit)
            .replace(R.id.container, fragmentB, FRAGMENT_B_TAG)
            .commit();

NOTE: setCustomAnimations also accepts two optional parameters popEnter and popExit, which will animate fragment changes when the back button is pressed. If you want that, you need to add addToBackStack() to the method chain.

Place the follow animation files in the res/anim directory:

enter_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="100%" android:toXDelta="0%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:duration="@android:integer/config_mediumAnimTime"/>

Notice how we are translating the X value from 100% (all the way to the right), to 0%. This will slide in FragmentB from right to left.

Finally, we need a exit_left animation for FragmentA exit to left. We will move this view from 0% to -100%.

exit_left.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0%" android:toXDelta="-100%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:duration="@android:integer/config_mediumAnimTime"/>

Hope this helps! You can learn more about FragmentTransaction and setCustomAnimations method here: https://developer.android.com/reference/android/app/FragmentTransaction.html

Upvotes: 0

xxfast
xxfast

Reputation: 737

First define the animations you want, in res/anim like this

left_out.xml

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

left_in.xml will be the same, except with a + toXDelta

right_in.xml

<translate
    android:fromXDelta="-100%p"
    android:toXDelta="0"
    android:duration="@android:integer/config_longAnimTime"/>
</set>

And then, on onAttach of the fragment A to 'left-out'

overridePendingTransition(R.anim.left_in, R.anim.left_out);

and for fragment B, use

overridePendingTransition(R.anim.right_in, R.anim.right_out);`

Upvotes: 1

Related Questions