Transition android fragment slide up

Question

I have a fragment that is to replace another fragment. I want to specify the animation. But the animation is ignored.

transaction.replace(R.id.my_fragment, newFrag);
transaction.addToBackStack(null);
transaction.setCustomAnimations(R.anim.slide_in_up, R.anim.slide_out_up);

slide_in_up

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

slide_out_up

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

All I am really trying to achieve is for the new fragment to slide in from the bottom. My animations are ignored. What is the code missing?

See this answer: https://stackoverflow.com/questions/21026409/fragment-transaction-animation-slide-in-and-slide-out/53202527#53202527 — live-love, Nov 08 '18 at 06:37

score 37 · Answer 1 · answered Jul 30 '14 at 20:05

37

transaction.setCustomAnimations(R.anim.slide_in_up, R.anim.slide_out_up);
transaction.addToBackStack(null);
transaction.replace(R.id.my_fragment, newFrag);

slide_in_up

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

slide_out_up

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

answered Jul 30 '14 at 20:05

Tyler Davis

2,420
2
23
19

1

It will work only with Support library. What about API >=11 without it? – Antoniossss Sep 14 '17 at 18:58
1

Dont forget to use transaction.Add(..) instead of replace when you want pop animation and the setter should be before add when you write the code – Ultimo_m May 30 '18 at 13:54

score 20 · Answer 2 · edited May 23 '17 at 12:10

It's been some time since this question was asked but here is an answer for other people coming here:

e1da is right insofar as that setCustomAnimation() call has to be called before replace(). Otherwise the animation will not show.
The second problem is that you probably are using native fragments that cannot be animated with the view animations.

Use the following files:

slide_in_up.xml

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

slide_out_up.xml

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

A little explanation:
You have to differentiate between view animation for support fragments on one hand and property animation for native fragments on the other hand.

View animation:
Is the pre-android 3.0 way to animate views. Sample code for this is the slide_in.xml and slide_up.xml by user3093402

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

It is worth mentioning you cannot animate fragments with view animation. The exception to this are fragments from the support library (android.support.v4.app.Fragment).

Property animation
This is the way to animate objects after android 3.0. It is also declared as .xml files but makes use of the "valueAnimator" tag (objectAnimator extends valueAnimator). Examples are in the answer to the question. This is the way how native fragments (android.app.Fragment) can be animated.

See also:

Hope this helps,
Kai

EDIT: As pointed out by Raphael Royer-Rivard the fixed screen size is bad practice. It would be better to use a constant from the OS like in getWindowManager().getDefaultDisplay().getMetrics(metrics).xdpi (see DisplayMetrics). But I haven't done any Android development for some time so I don't know which one.

using view animation for support fragments. when trying to slide_out_up the fragment doesn't move out of screen but shrinks from bottom to top. — Muhammad Babar, Nov 14 '14 at 05:45
I believe using an hardcoded height value of 1280 is a very bad thing. What if the screen is bigger than that? — Raphael Royer-Rivard, Jun 28 '15 at 18:06

score 17 · Answer 3 · edited Jan 13 '20 at 11:42

code for slide_in_up :

<?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="100%p"
            android:toYDelta="0%p" />
    </set>

code for slide_in_down:

<?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%p"
           android:toYDelta="100%p" />
    </set>

code for slide_out_up:

<?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:fromXDelta="0"
          android:toYDelta="100%" />
    </set>

code for slide_out_down:

<?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:fromXDelta="0"
          android:toYDelta="-100%" />
   </set>

and after that in your activity or fragment set animation like below:

    Fragment fragment = new Fragment();
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    transaction.setCustomAnimations(R.anim.slide_in_up, R.anim.slide_in_down, R.anim.slide_out_down, R.anim.slide_out_up);
    transaction.replace(container, fragment).commit();

It's work, but the clear answer should changes the "android:fromXDelta" to "android:fromYDelta" — Misagh, Aug 07 '18 at 07:19

score 7 · Answer 4 · answered Jun 29 '18 at 14:45

7

Currently with android.transition this is as simple as fragment.enterTransition = Slide() or fragment.enterTransition = Fade()

Note: Min version L.

answered Jun 29 '18 at 14:45

User

31,811
40
131
232

Can you add a link to this API? – jesses.co.tt Jun 10 '19 at 21:44

score 2 · Answer 5 · answered Apr 18 '17 at 11:35

2

R.anim will not work there but R.animator wil do. for example

transaction.setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out);

answered Apr 18 '17 at 11:35

Rahul Singh

41
1
5

1

but not given xml files – Antoniossss Sep 14 '17 at 18:56

score 1 · Answer 6 · answered Jan 18 '21 at 21:57

This answer is written in Kotlin. For sake of the example, I'm just hiding or showing it based on it's current isHidden attribute. I'm using androidx.transition.Slide

Link: https://developer.android.com/reference/androidx/transition/Slide

val frag = supportFragmentManager.findFragmentById(R.id.frag_id_from_xml_layout)
frag?.let {
    val ft = supportFragmentManager.beginTransaction()
    frag.enterTransition = Slide()
    frag.exitTransition = Slide()
    if (frag.isHidden) ft.show(frag) else ft.hide(frag)
    ft.commit()
}

score -1 · Answer 7 · answered Jan 13 '15 at 15:07

here is complete working example

Pressing the button toggles between 2 fragments A and B (by slide animation right to left). The fragments are just stupid text (AAAAAA and BBBBB) with different backgrounds.

MainActivity.java

package com.example.slidetrans;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;


public class MainActivity extends Activity {

    boolean showingA = true;
    Button button;

    A a;
    B b;

    private void incarnate(FragmentManager fm){
        int layoutId = R.id.frame;
        boolean fragmentWasNull = false;
        Fragment f = fm.findFragmentById(layoutId);
        if (f == null){
            if (showingA){
                f = a = new A();
            } else {
                f = b = new B();
            }
            fragmentWasNull = true;
        }
        if (fragmentWasNull){
            FragmentTransaction ft = fm.beginTransaction();
            ft.add(layoutId, showingA ? a : b,  "main").commit(); 
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        FragmentManager fm = getFragmentManager();
        incarnate(fm);
        button = (Button)findViewById(R.id.button);
        OnClickListener listener = new OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentManager fm = getFragmentManager();
                FragmentTransaction transaction = fm.beginTransaction();
                transaction.setCustomAnimations(R.anim.in, R.anim.out);
                transaction.replace(R.id.frame, showingA ? new B() : new A()).commit();
                showingA = !showingA;
                button.setText(showingA ? "slide in B" : "slide in A");
            }
        };
        button.setOnClickListener(listener);
    }
}

LL.java

package com.example.slidetrans;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class LL extends LinearLayout {

    public LL(Context context) {
        super(context);
    }

    public LL(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public float getXFraction() {
        final int width = getWidth();
        if (width != 0) return getX() / getWidth();
        else return getX();
    }

    public void setXFraction(float xFraction) {
        final int width = getWidth();
        float newWidth = (width > 0) ? (xFraction * width) : -9999;
        setX(newWidth);
    }
}

main.xml (layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="slide in B" />

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    </FrameLayout>

</LinearLayout>

a.xml (layout)

<?xml version="1.0" encoding="utf-8"?>
<com.example.slidetrans.LL xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#00FF00"
>

    <TextView
        android:id="@+id/aText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AAAAAAAAAAAAAAAAAA"
        android:textSize="30sp"
        android:textStyle="bold"
    />

</com.example.slidetrans.LL>

b.xml (layout)

<?xml version="1.0" encoding="utf-8"?>
<com.example.slidetrans.LL xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFF00"
>

    <TextView
        android:id="@+id/bText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textStyle="bold"
        android:text="BBBBBBBBBB"
    />

</com.example.slidetrans.LL>

in.xml (anim)

<?xml version="1.0" encoding="utf-8"?>
<set  xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
    android:duration="500"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="xFraction"
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:valueType="floatType" />

</set>

out.xml (anim)

<?xml version="1.0" encoding="utf-8"?>
<set  xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
    android:duration="500"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="xFraction"
    android:valueFrom="0.0"
    android:valueTo="-1.0"
    android:valueType="floatType" />

</set>

Transition android fragment slide up

7 Answers7