Search code examples
androidandroid-fragmentsandroid-animationandroid-transitions

How to create a transition where a fragment is slid upwards over another fragment?


I have two fragments named MainFragment and PlaybackFragment respectively. I use the Navigation Architecture Component to implement navigation between the two.

What I want to do is create a transition where PlaybackFragment would be slid over MainFragment, and when the user closes PlaybackFragment, it would slide down, revealing MainFragment again.

To do this, I created two translation animations. One for sliding up:

anim_nav_slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="250"
    android:fromYDelta="100%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toYDelta="0%" />

And one for sliding down:

anim_nav_slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="250"
    android:fromYDelta="0%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toYDelta="100%" />

The problem is that instead of MainFragment remaining stationary while the transition occurs, MainFragment insteadd slides downwards as PlaybackFragment is shown, with it sliding upwards when PlaybackFragment is closed. Ive attached an example below.

Notice how MainFragment slides downwards as PlaybackFragment slides upwards

Is there a way to make PlaybackFragment slide over MainFragment without MainFragment moving? I don't want to use Bottom Sheets, as I don't think that's their intended purpose in this situation.


Solution

  • Use an animation that does nothing.

    hold.xml

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

    and in navigation component xml file assign it as popEnterAnim

    app:popEnterAnim="@anim/hold"
    app:popExitAnim="@anim/slide_out_down"