Animate the transition between fragments

Question

I m trying to animate the transition between fragments  I got the answer from the following Android Fragments and animation    FragmentTransaction ft   getFragmentManager   beginTransaction    ft setCustomAnimations R anim slide in left  R anim slide out right    DetailsFragment newFragment   DetailsFragment newInstance     ft replace R id details fragment container  newFragment   detailFragment        Start the animated transition  ft commit      And my R anim slide in left    lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android  gt           lt translate android fromXDelta  50 p  android toXDelta  0              android duration   android integer config mediumAnimTime   gt          lt alpha android fromAlpha  0 0  android toAlpha  1 0              android duration   android integer config mediumAnimTime    gt   lt  set gt    But when I tried this it showed    02-08 16 27 37 961  ERROR AndroidRuntime 1717   FATAL EXCEPTION  main 02-08 16 27 37 961  ERROR AndroidRuntime 1717   java lang RuntimeException  Unknown animator name  translate 02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android animation AnimatorInflater createAnimatorFromXml AnimatorInflater java 129  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android animation AnimatorInflater createAnimatorFromXml AnimatorInflater java 126  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android animation AnimatorInflater createAnimatorFromXml AnimatorInflater java 93  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android animation AnimatorInflater loadAnimator AnimatorInflater java 72  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android app FragmentManagerImpl loadAnimator FragmentManager java 621  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android app FragmentManagerImpl moveToState FragmentManager java 733  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android app FragmentManagerImpl moveToState FragmentManager java 919  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android app BackStackRecord run BackStackRecord java 578  02-08 16 27 37 961  ERROR AndroidRuntime 1717       at android app FragmentManagerImpl execPendingActions FragmentManager java 1217    Any ideas  When I checked Honeycomb API reference translate is there  What did I miss  Is there any other way to animate the transition between fragments  Thank you

User · Accepted Answer

You need to use the new android animation framework  object animators  with FragmentTransaction setCustomAnimations as well as FragmentTransaction setTransition   Here s an example on using setCustomAnimations from ApiDemos  FragmentHideShow java   ft setCustomAnimations android R animator fade in  android R animator fade out     and here s the relevant animator XML from res animator fade in xml    lt objectAnimator xmlns android  http   schemas android com apk res android      android interpolator   android interpolator accelerate quad      android valueFrom  0      android valueTo  1      android propertyName  alpha      android duration   android integer config mediumAnimTime    gt    Note that you can combine multiple animators using  lt set gt   just as you could with the older animation framework     EDIT  Since folks are asking about slide-in slide-out  I ll comment on that here   Slide-in and slide-out  You can of course animate the translationX  translationY  x  and y properties  but generally slides involve animating content to and from off-screen  As far as I know there aren t any transition properties that use relative values  However  this doesn t prevent you from writing them yourself  Remember that property animations simply require getter and setter methods on the objects you re animating  in this case views   so you can just create your own getXFraction and setXFraction methods on your view subclass  like this   public class MyFrameLayout extends FrameLayout               public float getXFraction             return getX     getWidth       TODO  guard divide-by-zero            public void setXFraction float xFraction               TODO  cache width         final int width   getWidth            setX  width  gt  0     xFraction   width    -9999                     Now you can animate the  xFraction  property  like this   res animator slide in xml    lt objectAnimator xmlns android  http   schemas android com apk res android      android interpolator   android anim linear interpolator      android valueFrom  -1 0      android valueTo  0      android propertyName  xFraction      android duration   android integer config mediumAnimTime    gt    Note that if the object you re animating in isn t the same width as its parent  things won t look quite right  so you may need to tweak your property implementation to suit your use case

User · Answer

Nurik s answer was very helpful  but I couldn t get it to work until I found this  In short  if you re using the compatibility library  eg SupportFragmentManager instead of FragmentManager   the syntax of the XML animation files will be different

User · Answer

Android SDK implementation of FragmentTransaction wants an Animator while support library wants an Animation  don t ask me why but after strangeluk s comment I looked into android 4 0 3 code and support library  Android SDK uses loadAnimator   and support library uses loadAnimation

User · Answer

Try using this simple and fasted solution. Android provides some default animations.

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

FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
fragmentManager.addOnBackStackChangedListener(this);
fragmentTransaction.replace(R.id.frame, firstFragment, "h");
fragmentTransaction.addToBackStack("h");
fragmentTransaction.commit();

Output:

User · Answer

I have done this way   Add this method to replace fragments with Animations   public void replaceFragmentWithAnimation android support v4 app Fragment fragment  String tag       FragmentTransaction transaction   getSupportFragmentManager   beginTransaction        transaction setCustomAnimations R anim enter from left  R anim exit to right  R anim enter from right  R anim exit to left       transaction replace R id fragment container  fragment       transaction addToBackStack tag       transaction commit        You have to add four animations in anim folder which is associate with resource   enter from left xml    lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android      android shareInterpolator  false  gt       lt translate         android fromXDelta  -100   android toXDelta  0           android fromYDelta  0   android toYDelta  0           android duration  700   gt   lt  set gt    exit to right xml    lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android      android shareInterpolator  false  gt       lt translate         android fromXDelta  0   android toXDelta  100           android fromYDelta  0   android toYDelta  0           android duration  700    gt   lt  set gt    enter from right xml    lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android      android shareInterpolator  false  gt       lt translate         android fromXDelta  100   android toXDelta  0           android fromYDelta  0   android toYDelta  0           android duration  700    gt   lt  set gt    exit to left xml    lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android      android shareInterpolator  false  gt       lt translate         android fromXDelta  0   android toXDelta  -100           android fromYDelta  0   android toYDelta  0           android duration  700   gt   lt  set gt    Output     Its Done

User · Answer

For anyone else who gets caught  ensure setCustomAnimations is called before the call to replace add when building the transaction

User · Answer

Here s a slide in out animation between fragments   FragmentTransaction transaction   getFragmentManager   beginTransaction    transaction setCustomAnimations R animator enter anim  R animator exit anim   transaction replace R id listFragment  new YourFragment     transaction commit      We are using an objectAnimator   Here are the two xml files in the animator subfolder   enter anim xml   lt  xml version  1 0  encoding  utf-8   gt   lt set gt        lt objectAnimator          xmlns android  http   schemas android com apk res android           android duration  1000           android propertyName  x           android valueFrom  2000           android valueTo  0           android valueType  floatType    gt   lt  set gt    exit anim xml   lt  xml version  1 0  encoding  utf-8   gt   lt set gt       lt objectAnimator         xmlns android  http   schemas android com apk res android          android duration  1000          android propertyName  x          android valueFrom  0          android valueTo  -2000          android valueType  floatType    gt   lt  set gt    I hope that would help someone

User · Answer

If you can afford to tie yourself to just Lollipop and later, this seems to do the trick:

import android.transition.Slide;
import android.util.Log;
import android.view.Gravity;
.
.
.
f = new MyFragment();
f.setEnterTransition(new Slide(Gravity.END));
f.setExitTransition(new Slide(Gravity.START));
getFragmentManager()
    .beginTransaction()
    .replace(R.id.content, f, FRAG_TAG)  // FRAG_TAG is the tag for your fragment
    .commit();

Kotlin version:

f = MyFragment().apply {
    enterTransition = Slide(Gravity.END)
    exitTransition = Slide(Gravity.START)
}
fragmentManager
    .beginTransaction()
    .replace(R.id.content, f, FRAG_TAG)  // FRAG_TAG is the tag for your fragment
    .commit();

Hope this helps.

[android] Animate the transition between fragments

The answer is

Slide-in and slide-out

Examples related to android

Examples related to android-3.0-honeycomb

Tags