CODEWITHSUNDEEP
androidandroid-fragmentsandroid-animation
Casey Perkins
Casey Perkins

Reputation: 1942

android animation slide out left, reverse on back

I'm trying to achieve something similar to the push and pop animations on iOS. Fragments that the user are navigating away from should slide out left, and fragments that the user are navigating to should slide in from the right. When the user navigates back (by clicking the little arrow icon on the Toolbar or by pressing the back button on the device), the animation should reverse; the "popped" fragment should slide out right, and the previous fragment in the hierarchy should slide back in from the left. So it actually feels like you are going back, in the direction the arrow is pointing. Unfortunately I can only get the first part to happen; when the user goes back, the previous fragment also (counter-intuitively) slides in from the right, and the popped fragment slides to the left! (Completely reverse to the desired effect).

Here is my fragment transition code:

FragmentManager fManager = getSupportFragmentManager();
FragmentTransaction transaction = fManager.beginTransaction();
transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right, R.anim.slide_in_left, R.anim.slide_out_right);
transaction.replace(R.id.wholeview, itemChoiceFragment, ItemChoiceFragment.class.getName());
transaction.addToBackStack("itemChoice");
transaction.commit();

Here are my animation xmls: slide_in_left.xml:

<?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="400"/>
</set>

slide_out_right.xml:

<?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:startOffset="100"
   android:interpolator="@android:anim/decelerate_interpolator"
   android:duration="300"/>
</set>

Any help would be greatly appreciated.

Thanks.

Upvotes: 3

Views: 6152

Answers (2)

Nativ
Nativ

Reputation: 3150

You could use the Visibility classes(super class of Slide) like this:

Slide slideTransition = new Slide(fromRightToLeft ? Gravity.END : Gravity.START);
        slideTransition.setDuration(GlobalConstants.TRANSITION_ANIMATION_DURATION);
        fragment.setEnterTransition(slideTransition);

Here is the full guide

Upvotes: 1

Chris K.
Chris K.

Reputation: 987

Instead of 

transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right, R.anim.slide_in_left, R.anim.slide_out_right);

use

transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right, R.anim.slide_in_right, R.anim.slide_out_left);

Where R.anim.slide_in_right

<?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="400"/>
   </set>

and R.anim.slide_out_left

 <?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/decelerate_interpolator"
android:duration="300"/>
</set>

The arguments in this method are 

setCustomAnimations(int enter, int exit, int popEnter, int popExit)

So basically

-slide new fragment in from right to left on entering

-slide out to the left when leaving current fragment

-slide old fragment from the left to the right when clicking back

-slide current fragment to the right when clicking back

As per method description

FragmentTransaction setCustomAnimations (int enter, 
            int exit, 
            int popEnter, 
            int popExit)

Set specific animation resources to run for the fragments that are entering and exiting in this transaction. The popEnter and popExit animations will be played for enter/exit operations specifically when popping the back stack.

Upvotes: 13

Related Questions