CODEWITHSUNDEEP
androidandroid-fragmentsandroid-animation
Martynas Jurkus
Martynas Jurkus

Reputation: 9301

Android Fragment transition exit animation played above enter animation

I'm implementing Fragment transition animations.

My exit animation is

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:ordering="together">
    <objectAnimator
        android:propertyName="scaleX"
        android:valueType="floatType"
        android:valueFrom="1.0"
        android:valueTo="0.95"
        android:duration="300"/>

    <objectAnimator
        android:propertyName="scaleY"
        android:valueType="floatType"
        android:valueFrom="1.0"
        android:valueTo="0.95"
        android:duration="300"/>

    <objectAnimator
        android:propertyName="x"
        android:valueType="floatType"
        android:valueFrom="0"
        android:valueTo="10dp"
        android:duration="300"/>
</set>

enter animation is:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="x"
    android:valueType="floatType"
    android:valueFrom="1280"
    android:valueTo="0"
    android:duration="400"/>

Transaction is created like this:

fragmentManager.beginTransaction()
            .setCustomAnimations(enter, exit, popEnter, popExit)
            .replace(CONTENT_CONTAINER_ID, newFragment)
            .addToBackStack(null)
            .commit();

At normal animation speed the unwanted effect is almost invisible due to short animation duration, but, when you slow them down you can clearly see, that z-order is wrong.

Entering fragment animation is below exit fragment animation. Is there a workaround to remedy that?

Upvotes: 11

Views: 4616

Answers (4)

aminhotob
aminhotob

Reputation: 1066

I know it is too old, but I have the same problem with android jetpack.

This answer for android jetpack and navigation graph

  1. Set animations in navigation.xml

    <fragment
android:id="@+id/specifyAmountFragment"
android:name="com.example.buybuddy.buybuddy.SpecifyAmountFragment"
android:label="fragment_specify_amount"
tools:layout="@layout/fragment_specify_amount">
<action
    android:id="@+id/confirmationAction"
    app:destination="@id/confirmationFragment"
    app:enterAnim="@anim/slide_in_right"
    app:exitAnim="@anim/slide_out_left"
    app:popEnterAnim="@anim/slide_in_left"
    app:popExitAnim="@anim/slide_out_right" />

  2. Add animation resources

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<setxmlns:android="http://schemas.android.com/apk/res/android">    
    <translate android:fromXDelta="-100%p" android:toXDelta="0" ndroid:duration="200"/>
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="200"/>
</set>

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="200"/>
</set>

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="200"/>
</set>

Other useful answer More details at android developer docs

Other example animations:

Upvotes: 0

Lukay
Lukay

Reputation: 25

It worked for me, to add this line to the Animation

android:interpolator="@android:anim/linear_interpolator"

Upvotes: -1

Flo
Flo

Reputation: 1499

This is probably already outdated, but I just faced the same problem. I solved it by defining two content areas in my XML, like:

<FrameLayout>
   <FrameLayout id="@+id/oldFragment" />
   <FrameLayout id="@+id/newFragment" />
</FrameLayout>

I would load the first fragment to oldFragment and my transaction looks like this:

getActivity().getSupportFragmentManager()
        .beginTransaction()
        .remove(old_frag)
        .add(R.id.newFragment, new_frag)
        .addToBackStack(null)
        .commit();

Hope that helps.

Upvotes: 2

TienDC
TienDC

Reputation: 301

I think you could try the following approach as a work around.

fragmentTr.setCustomAnimations(enter, exit);
fragmentTr.hide(currentFragment);
fragmentTr.add(containerId, newFragment, "aTag");
fragmentTr.show(newFragment);
fragmentTr.commit();

Do not use replace(). I tried the above approach, and it worked. Hope this helps.

Upvotes: 4

Related Questions