Fragmentation Animation: Slide and Slide

Question

I checked some tutorials for animating transactions between fragments. I used this method for animation:

fragmentTransaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right); 

and it works. But I want the animation to be inverted: the old fragment slides to the left, and the new fragment moves to the right, but no R.anim file value seems to be useful for my area. How can i do this?

Answer 1

UPDATE For Android v19 + see this link via @Sandra

You can create your own animations. Place animated xml files in res > anim

enter_from_left.xml

 <?xml version="1.0" encoding="utf-8"?> <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:duration="700"/> </set> 

enter_from_right.xml

 <?xml version="1.0" encoding="utf-8"?> <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:duration="700" /> </set> 

exit_to_left.xml

 <?xml version="1.0" encoding="utf-8"?> <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:duration="700"/> </set> 

exit_to_right.xml

 <?xml version="1.0" encoding="utf-8"?> <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:duration="700" /> </set> 

USE (note that the order in which you call the transaction methods adds animation before you call .replace, .commit):

 FragmentTransaction transaction = supportFragmentManager.beginTransaction(); transaction.setCustomAnimations(R.anim.enter_from_right, R.anim.exit_to_left); transaction.replace(R.id.content_frame, fragment); transaction.addToBackStack(null); transaction.commit(); 

Answer 2

There are three ways to animate transactions in a fragment.

Transitions

Therefore, you must use one of the built-in transitions, use the setTranstion () method:

 getSupportFragmentManager() .beginTransaction() .setTransition( FragmentTransaction.TRANSIT_FRAGMENT_OPEN ) .show( m_topFragment ) .commit() 

Custom animations

You can also customize the animation using the setCustomAnimations () method:

 getSupportFragmentManager() .beginTransaction() .setCustomAnimations( R.anim.slide_up, 0, 0, R.anim.slide_down) .show( m_topFragment ) .commit() 

slide_up.xml

 <?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="translationY" android:valueType="floatType" android:valueFrom="1280" android:valueTo="0" android:duration="@android:integer/config_mediumAnimTime"/> 

slide_down.xml

 <?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="translationY" android:valueType="floatType" android:valueFrom="0" android:valueTo="1280" android:duration="@android:integer/config_mediumAnimTime"/> 

Several animations

Finally, you can also start animating multiple fragments in a single transaction. This allows you to get a pretty cool effect when one fragment slides up and the other moves simultaneously:

 getSupportFragmentManager() .beginTransaction() .setCustomAnimations( R.anim.abc_slide_in_top, R.anim.abc_slide_out_top ) // Top Fragment Animation .show( m_topFragment ) .setCustomAnimations( R.anim.abc_slide_in_bottom, R.anim.abc_slide_out_bottom ) // Bottom Fragment Animation .show( m_bottomFragment ) .commit() 

In more detail you can visit the URL

Note. - You can check the animation according to your requirement, because there may be a problem above.

Answer 3

This is another solution I'm using:

 public class CustomAnimator { private static final String TAG = "com.example.CustomAnimator"; private static Stack<AnimationEntry> animation_stack = new Stack<>(); public static final int DIRECTION_LEFT = 1; public static final int DIRECTION_RIGHT = -1; public static final int DIRECTION_UP = 2; public static final int DIRECTION_DOWN = -2; static class AnimationEntry { View in; View out; int direction; long duration; } public static boolean hasHistory() { return !animation_stack.empty(); } public static void reversePrevious() { if (!animation_stack.empty()) { AnimationEntry entry = animation_stack.pop(); slide(entry.out, entry.in, -entry.direction, entry.duration, false); } } public static void clearHistory() { animation_stack.clear(); } public static void slide(final View in, View out, final int direction, long duration) { slide(in, out, direction, duration, true); } private static void slide(final View in, final View out, final int direction, final long duration, final boolean save) { ViewGroup in_parent = (ViewGroup) in.getParent(); ViewGroup out_parent = (ViewGroup) out.getParent(); if (!in_parent.equals(out_parent)) { return; } int parent_width = in_parent.getWidth(); int parent_height = in_parent.getHeight(); ObjectAnimator slide_out; ObjectAnimator slide_in; switch (direction) { case DIRECTION_LEFT: default: slide_in = ObjectAnimator.ofFloat(in, "translationX", parent_width, 0); slide_out = ObjectAnimator.ofFloat(out, "translationX", 0, -out.getWidth()); break; case DIRECTION_RIGHT: slide_in = ObjectAnimator.ofFloat(in, "translationX", -out.getWidth(), 0); slide_out = ObjectAnimator.ofFloat(out, "translationX", 0, parent_width); break; case DIRECTION_UP: slide_in = ObjectAnimator.ofFloat(in, "translationY", parent_height, 0); slide_out = ObjectAnimator.ofFloat(out, "translationY", 0, -out.getHeight()); break; case DIRECTION_DOWN: slide_in = ObjectAnimator.ofFloat(in, "translationY", -out.getHeight(), 0); slide_out = ObjectAnimator.ofFloat(out, "translationY", 0, parent_height); break; } AnimatorSet animations = new AnimatorSet(); animations.setDuration(duration); animations.playTogether(slide_in, slide_out); animations.addListener(new Animator.AnimatorListener() { @Override public void onAnimationCancel(Animator arg0) { } @Override public void onAnimationEnd(Animator arg0) { out.setVisibility(View.INVISIBLE); if (save) { AnimationEntry ae = new AnimationEntry(); ae.in = in; ae.out = out; ae.direction = direction; ae.duration = duration; animation_stack.push(ae); } } @Override public void onAnimationRepeat(Animator arg0) { } @Override public void onAnimationStart(Animator arg0) { in.setVisibility(View.VISIBLE); } }); animations.start(); } } 

Using a class. Let's say you have two fragments (fragments of a list and details), as shown below.

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ui_container" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:id="@+id/list_container" android:layout_width="match_parent" android:layout_height="match_parent" /> <FrameLayout android:id="@+id/details_container" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" /> </FrameLayout> 

Using

 View details_container = findViewById(R.id.details_container); View list_container = findViewById(R.id.list_container); // You can select the direction left/right/up/down and the duration CustomAnimator.slide(list_container, details_container,CustomAnimator.DIRECTION_LEFT, 400); 

You can use the CustomAnimator.reversePrevious(); function CustomAnimator.reversePrevious(); to get the previous view when the user clicked back.

Answer 4

I have the same problem, I used a simple solution

1) create slide_out_right.xml in the animation folder

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

2) create slide_in_left.xml in the animation folder

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

3) just using the transaction fragment setCustomeAnimations () with two custom xml and two standard xml for animation as follows:

  fragmentTransaction.setCustomAnimations(R.anim.sliding_in_left, R.anim.sliding_out_right, android.R.anim.slide_in_left, android.R.anim.slide_out_right );