Doing a push fragment animation

Question

How can I do a animation that pushes the current fragment by the next fragment

Here is the Animation that I want:

Answer 1

Although this question is a duplicate, the answer that was provided on that question does not work for many viewers and requires them to make a few assumptions on their end.

This is an excellent question considering this functionality exists in many applications, however it requires a very elaborate answer. I will try to break the answer down into a series of compartmentalized steps to ensure that it is repeatable!

The Problem

The problem inhibiting most of us from doing this easily is one of a compound nature. To fully understand this problem, let me list the issues:

• We should not use typical animation frameworks as the FragmentManager and FragmentTransaction classes provide a convenience method, setCustomAnimations(int, int, int int), that require ObjectAnimators
• Further, we cannot use percentage markers in ObjectAnimators (the traditional approach)
• Finally, we can only determine the screen width at runtime, therefore must have custom functionality in our own layout

The Solution

In order to tackle this problem and provide the immersive experience desired, we must tackle the it from many angles. These next few steps explain exactly how to acquire this functionality!

1. We first need to define a custom layout for each Fragment as we must have runtime access to the width of the screen, and a self-contained method to manipulate the x-position of the View (the layout) based on this width.

   FractionTranslateLinearLayout.java

   public class FractionTranslateLinearLayout extends LinearLayout{
   
       private int screenWidth;
       private float fractionX;
   
       protected void onSizeChanged(int w, int h, int oldW, int oldh){
   
           // Assign the actual screen width to our class variable.
           screenWidth = w;            
   
           super.onSizeChanged(w, h, oldW, oldH);
       }
   
       public float getFractionX(){
   
           return fractionX;
       }
   
       public void setFractionX(float xFraction){
   
           this.fractionX = xFraction;
   
           // When we modify the xFraction, we want to adjust the x translation
           // accordingly.  Here, the scale is that if xFraction is -1, then
           // the layout is off screen to the left, if xFraction is 0, then the 
           // layout is exactly on the screen, and if xFraction is 1, then the 
           // layout is completely offscreen to the right.
           setX((screenWidth > 0) ? (xFraction * screenWidth) : 0);
       }
   }
   

2. Now, since we have a special layout that will allow us to translate based on the physical width of the screen, we can use it in the associated Fragment XML files.

   fragment_1.xml

   <com.[your_package_here].FractionTranslateLinearLayout
       // Omitted namespace.
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
   
       <TextView
           android:id="@+id/text_view_1"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="Fragment 1" />
   
   </com.[your_package_here].FractionTranslateLinearLayout>
   

   fragment_2.xml

   <com.[your_package_here].FractionTranslateLinearLayout
       // Omitted namespace.
       android:id="@+id/layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
   
       <TextView
           android:id="@+id/text_view_2"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="Fragment 2" />
   
   </com.[your_package_here].FractionTranslateLinearLayout>
   

3. Then, we must create the Fragment classes that will contain the logic to implement the transitions.

   Fragment1.java

   public class Fragment1 extends Fragment {
   
       public View onCreateView(LayoutInflater inf, ViewGroup vg, Bundle b){
   
           // Simply inflate the View from the .xml file.
           return inf.inflate(R.layout.fragment_1, vg, false);
       }
   }
   

   Fragment2.java

   public class Fragment2 extends Fragment {
   
       public View onCreateView(LayoutInflater inf, ViewGroup vg, Bundle b){
   
           // Simply inflate the View from the .xml file.
           return inf.inflate(R.layout.fragment_2, vg, false);
       }
   
       public void onActivityCreated (Bundle savedInstanceState){
   
           View v = getView();
   
           FractionTranslateLinearLayout layout;
           layout = (FractionTranslateLinearLayout) v.findViewById(R.id.layout);
   
           // Move the entire View off to the right of the screen for now.
           layout.setFractionX(1.0f);               
       }
   }
   

4. Let's now create the objectAnimator .xml files that we will use to translate the Views across the screen. Note that we will need four of these files because we need one for each process (out and in), and one for each side (left and right).

   slide_left_out.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="0"
       android:valueTo="-1"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

   slide_right_out.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="0"
       android:valueTo="1"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

   slide_left_in.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="-1"
       android:valueTo="0"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

   slide_right_in.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="1"
       android:valueTo="0"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

Note that these folders must be placed in the 'res/animator' directory in your project structure.

1. Create the container layout that will hold each Fragment as we transition between them.

   main.xml

   <com.android.FrameLayout
       // Omitted namespace.
       android:id="@+id/main_container"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   

2. Now, we must create the Activity that will wrap everything together!

   Main.java

   public class Main extends Activity {
   
       private boolean showingFirstFragment;            
   
       public void onCreate(Bundle savedInstanceState){
   
           setContentView(R.layout.main);
   
           FragmentManager manager = getFragmentManager();
   
           FragmentTransaction trans = manager.beginTransaction();
   
           // Keep track of which Fragment we are facing.
           showingFirstFragment = true;
   
           // Add the first Fragment to the container.
           trans.add(R.id.main_container, new Fragment1(), "fragment_1");
   
           trans.commit();
       }
   
       public void onBackPressed(){
   
           // Override the back button functionality to simply switch 
           // Fragments. Note that this would normally be done in a click
           // click listener.
           switchFragments();
       }
   
       private void switchFragments(){
   
           FragmentManager manager = getFragmentManager();
           FragmentTransaction trans = manager.beginTransaction();
   
           // Set the animations that will emulate the functionality you
           // requested.    
           int rightIn = R.animator.slide_right_in;
           int rightOut = R.animator.slide_right_out;
           int leftIn = R.animator.slide_left_in;
           int leftOut = R.animator.slide_left_out;
   
           // Note that we pass in 4 animations here.  Please see the 
           // documentation on this method as it is critical to the 
           // understanding of this solution.
           trans.setCustomAnimations(rightIn, leftOut, leftIn, rightOut);          
   
           if(showingFirstFragment){
   
               int container = R.id.main_container;                
   
               // Show the second Fragment.
               trans.replace(container, new Fragment2(), "fragment_2");
               trans.commit();
   
               showingFirstFragment = false;    
           }
           else{
   
               // Show the first Fragment by popping the back stack!
               manager.popBackStack(null);
   
               showingFirstFragment = true;
           }
       }
   }
   

In this code example, this class is used heavily. Its methods are crucial to the execution of the process!

Some Considerations

Note that I have made a few assumptions here, and that this code is quite unique:

• This example uses the original Fragment class, and thus will not work with the support package unless the necessary modifications are made.
• This example requires that you are using Android API 13.0 or above.
• The intent of this example was to be informative and to hopefully explain the issues involved here. Piecing the code together in your own editor is something that you should do at your own discretion!

---

Hopefully there is sufficient detail here to answer your question. Please let me know if you require any more.

At this point, there should be enough code to implement your own twist on the solution. I did type this up without the crutch of the Eclipse editor, so if there are any errors, please accept my apologies in advance!