Fragment transaction animation: slide in and slide out Fragment transaction animation: slide in and slide out android android

Fragment transaction animation: slide in and slide out


UPDATE For Android v19+ see this link via @Sandra

You can create your own animations. Place animation 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%p" android:toXDelta="0%"      android:fromYDelta="0%" android:toYDelta="0%"      android:duration="@android:integer/config_mediumAnimTime"/></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%p" android:toXDelta="0%"     android:fromYDelta="0%" android:toYDelta="0%"     android:duration="@android:integer/config_mediumAnimTime" /></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%p"      android:fromYDelta="0%" android:toYDelta="0%"      android:duration="@android:integer/config_mediumAnimTime"/></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%p"     android:fromYDelta="0%" android:toYDelta="0%"     android:duration="@android:integer/config_mediumAnimTime" /></set>

you can change the duration to short animation time

android:duration="@android:integer/config_shortAnimTime"

or long animation time

android:duration="@android:integer/config_longAnimTime" 

USAGE (note that the order in which you call methods on the transaction matters. Add the animation before you call .replace, .commit):

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


There is three way to transaction animation in fragment.

Transitions

So need to 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 by 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"/>

Multiple Animations

Finally, It's also possible to kick-off multiple fragment animations in a single transaction. This allows for a pretty cool effect where one fragment is sliding up and the other slides down at the same time:

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()

To more detail you can visit URL

Note:- You can check animation according to your requirement because above may be have issue.


slide_in_down.xml

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

slide_in_up.xml

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

slide_out_down.xml

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

slide_out_up.xml

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

direction = down

            activity.getSupportFragmentManager()                    .beginTransaction()                    .setCustomAnimations(R.anim.slide_out_down, R.anim.slide_in_down)                    .replace(R.id.container, new CardFrontFragment())                    .commit();

direction = up

           activity.getSupportFragmentManager()                    .beginTransaction()                    .setCustomAnimations(R.anim.slide_in_up, R.anim.slide_out_up)                    .replace(R.id.container, new CardFrontFragment())                    .commit();