Fragment transition appears from right to left, disappears from left to right (back to the point it starts from)

Question

I want to reach a specific fragment transition behaviour ,as I mention in the question, I want my fragment to appears from the right and disappears in the same direction back to the point it starts from.. These are my xml animations :

right_to_left.xml :

<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
    android:duration="1000"
    android:fromXDelta="100%"
    android:fromYDelta="0%"
    android:toXDelta="0%"
    android:toYDelta="0%" />

left_to_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:duration="1000"
    android:fromXDelta="0%"
    android:fromYDelta="0%"
    android:toXDelta="-100%"
    android:toYDelta="0%" />

and here are the different ways that I've tried to achieve the fragment animation :

When the fragment appears :

  productHolder.fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Bundle bundle = new Bundle();
                bundle.putSerializable(Utils.productDetailsKey, productPojo);
                ProductDetailsFragment productDetailsFragment = new ProductDetailsFragment();
                productDetailsFragment.setArguments(bundle);
                FragmentManager fragmentManager = activity.getSupportFragmentManager();
                FragmentTransaction transaction = fragmentManager.beginTransaction();
                transaction.setCustomAnimations(R.anim.product_animation_enter, R.anim.product_animation_enter);
                transaction.add(R.id.newContainer, productDetailsFragment);
                transaction.commit();
                MainActivity.transparent.setBackgroundColor(ContextCompat.getColor(context, R.color.blackTransparent));


            }
        });

When the fragment disappears method 1 :

 fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                transaction.setCustomAnimations(R.anim.product_animation_exit, R.anim.product_animation_exit);
                transaction.remove(ProductDetailsFragment.this);
                transaction.commitAllowingStateLoss();
                MainActivity.transparent.setBackgroundColor(0x00000000);


            }
        });

When the fragment disappears method 2 :

fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.product_animation_exit);
                    animation.setDuration(getResources().getInteger(android.R.integer.config_mediumAnimTime));
                    animation.setAnimationListener(new Animation.AnimationListener() {
                        @Override
                        public void onAnimationStart(Animation animation) {

                        }

                        @Override
                        public void onAnimationEnd(Animation animation) {
                            try {
                                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                                transaction.remove(ProductDetailsFragment.this);
                                transaction.commitAllowingStateLoss();
                                MainActivity.transparent.setBackgroundColor(0x00000000);

                            } catch (Exception e) {
                            }

                        }

                        @Override
                        public void onAnimationRepeat(Animation animation) {

                        }
                    });

                    getView().startAnimation(animation);
                }
            });

unfortunately none of those worked as I expect, May this image can explain more what I want : image Thank you in advance.

Answer 1

I would suggest, first you make a working solution the first part of your problem, that is switching between fragments, and then you add the second part, which is the animation.

1. Switching fragments

In your XML layout file you take out everything belonging to the fragments and add a Framelayout.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

In your code you get a reference to the FrameLayout like so:

int containerId = R.id.fragment_container;

Then you have two methods, one for adding the first fragment and one for switching back and forth between the two.

The add method goes like this:

void addFrag(int containerId, Fragment firstFragment){
        FragmentManager fragmentManager = activity.getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(containerId, firstFragment);
        transaction.commit();
}

The replace method goes like this:

void replaceFrag(int containerId, Fragment newFragment){
        FragmentManager fragmentManager = activity.getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(containerId, newFragment);
        transaction.commit();
}

As long as you pass the right fragment, you can use this method for replacing any of your fragments with the other one. Edit You can also use the replaceFrag method only, even for adding a fragment to the container for the first time. End of edit

2. Animation

That's really the easy part. You don't need to make your own XML, since sliding animations are built into Android (so use the exact IDs I am providing here). All you have to do is to add one line of code before you add or replace your fragments:

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

Edit Since these built-in animations start from 50%, however, they don't look too nice, in my opinion. You can simply use your XMLs:

transaction.setCustomAnimations(R.anim.left_to_right, R.anim.right_to_left);

End of Edit