Transition animation between fragments

Question

I have two fragments (A, B), among which I can swap; what I wanted to achieve was a slide up / down animation between them every time I swapped them.

I tried using two object animator like this:

//slide up
<objectAnimator
    android:interpolator="@android:interpolator/linear"
    android:propertyName="translationY"
    android:valueType="intType"
    android:valueFrom="1920"
    android:valueTo="0"
    android:duration="1000" />

//Slide down  
<objectAnimator
    android:interpolator="@android:interpolator/linear"
    android:propertyName="translationY"
    android:valueType="intType"
    android:valueFrom="0"
    android:valueTo="1920"
    android:duration="1000" />

but it didn't work because the two fragment were overlapping. So how can I do that animation?

Fragment A:

class FragmentA : Fragment(){

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    buttonA.setOnClickListener {
        activity.supportFragmentManager.beginTransaction()
                .setCustomAnimations(R.animator.slide_dowm, R.animator.slide_up)
                .replace(R.id.container, FragmentB()).commit()
    }
}
}

Fragment B:

class FragmentB : Fragment(){

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    buttonB.setOnClickListener {
        activity.supportFragmentManager.beginTransaction()
                .setCustomAnimations(R.animator.slide_up, R.animator.slide_down)
                .replace(R.id.container, FragmentB()).commit()
    }
}
}

Maybe [this](http://www.androiddesignpatterns.com/2014/12/activity-fragment-transitions-in-android-lollipop-part1.html) is helpful — Bö macht Blau, May 18 '18 at 16:04

score 3 · Accepted Answer · answered May 18 '18 at 19:04

Google released the new Navigation UI library

So, now we can do the same fragment transitions from a your_named_navigation.xml resource (main > res > navigation > your_named_navigation.xml),

this an snippet code of my implementation:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@+id/first_fragment">

    <fragment
        android:id="@+id/first_fragment"
        android:name="com.yourpackage.FirstFragment"
        android:label="@string/title_first"
        tools:layout="@layout/fragment_first">

        <action
            android:id="@+id/second_fragment_action"
            app:destination="@id/second_fragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right" />

    </fragment>

    <fragment
        android:id="@+id/second_fragment"
        android:name="com.yourpackage.SecondFragment"
        android:label="@string/title_second"
        tools:layout="@layout/fragment_second">

        <action ...next fragment/>

    </fragment>

</navigation>

it also helps to handle clicks on back button and up button,

so, after have NavigationUi implementation in our proyect, we can call from our firstFragment instance the Navigation.findNavController method

myButton.setOnClickListener(View.OnClickListener {
    //This opens our second fragment creating a stack of fragments
    Navigation.findNavController(it).navigate(R.id.second_fragment_action)
})

The next Google's Codelab helped me, maybe can help you, greetings

Thank you very much, it seems very interesting and it worked! — Andrea, May 18 '18 at 20:03
Do you have to define a destination in the action? I'm looking into doing animation between a list of fragments not just between 2 fragments. So, the destination won't be static. Any way to make the destination dynamic? — tzg, Feb 28 '20 at 18:43
@tzg You are able to define all "dynamic" destinations you require using arrows on navigation ui that android studio provides, however, if you prefer do that using common fragment transactions, please take a look on Khemraj answer: https://stackoverflow.com/a/50417341/3542143 — Julio Lemus, Mar 04 '20 at 03:41

score 1 · Answer 2 · answered May 18 '18 at 18:32

animator/slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="1000"
        android:valueTo="0"
        android:valueType="floatType" />

</set>

animator/slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="0"
        android:valueTo="-1000"
        android:valueType="floatType" />

</set>

Class Subcategory

 public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            // return super.onCreateView(inflater, container, savedInstanceState);

            View view = (ViewGroup) inflater.inflate(R.layout.product_frame, null);
            getFragmentManager().beginTransaction()
                    .replace(R.id.sub_header, new Sub_Header()).commit();
            getFragmentManager()
                    .beginTransaction()
                    .setCustomAnimations(R.animator.slide_in_left,
                            R.animator.slide_out_right, 0, 0)
                    .replace(R.id.product_frame, new Sub_Catagory_Grid()).commit();

            view.getWidth();
            return view;

        }

Some links

Fragment transaction animation: slide in and slide out

How to apply a fade-in/fade-out animation when replacing a fragment

Transition animation between fragments

2 Answers2