Android slide animations

Android slide animation xml files, those animation xml file goes to res/anim/ directory. Those sliding animation effects can be applied to activity transition, ViewFlipper transition or other views that you want to have a slide in slide out animation when they appear or disappear from the screen.

To apply the animation on Activity transition, call overridePendingTransition at the beginning in the onCreate method.

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);
 //...
}

To apply the animation on Fragment transition, call setCustomAnimations on FragmentTransaction when you create the Fragment in an Activity.

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 fragmentTransaction.setCustomAnimations(R.anim.in_from_right, R.anim.out_to_left);
 //...
}

To apply the animation on ViewFlipper transition, call setInAnimation and setOutAnimation on the ViewFlipper object.

viewFlipper.setInAnimation(this, R.anim.in_from_right);
viewFlipper.setOutAnimation(this, R.anim.out_to_left);

Slide in from right and slide out to the left.
in_from_right.xml

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

out_to_left.xml

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

Slide in from left and slide out to the right.
in_from_left.xml

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

out_to_right.xml

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

Slide in from top and slide out to the bottom.
in_from_top.xml

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

out_to_bottom.xml

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

Slide in from bottom and slide out to the top.
in_from_bottom.xml

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

out_to_top.xml

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

activity_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/ll_view1"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:layout_alignParentTop="true"
            android:orientation="vertical"
            android:gravity="center">
            <TextView
                android:id="@+id/tv_wheel_title_welcome_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="30sp"
                android:text="Welcome" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/ll_view2"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:layout_alignParentTop="true"
            android:orientation="vertical"
            android:gravity="center"
            android:visibility="gone">
            <TextView
                android:id="@+id/tv_wheel_title_congrat_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="30sp"
                android:text="Bye, see ya!" />
        </LinearLayout>
    </ViewFlipper>

    <Button
        android:id="@+id/btn_slide_from_right_to_left"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Slide from right to left"
        android:onClick="slideRightToLeft"/>

    <Button
        android:id="@+id/btn_slide_from_left_to_right"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Slide from left to right"
        android:onClick="slideLeftToRight"/>

    <Button
        android:id="@+id/btn_slide_from_top_to_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Slide from top to bottom"
        android:onClick="slideTopToBottom"/>

    <Button
        android:id="@+id/btn_slide_from_bottom_to_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Slide from bottom to top"
        android:onClick="slideBottomToTop"/>
</LinearLayout>

SlideActivity.java

public class SlideActivity extends AppCompatActivity {
    Button btnSlide;
    ViewFlipper viewFlipper;
    LinearLayout llOne;
    LinearLayout llTwo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slide);

        btnSlide = (Button) findViewById(R.id.btn_slide_from_right_to_left);
        viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
        llOne = (LinearLayout) findViewById(R.id.ll_view1);
        llTwo = (LinearLayout) findViewById(R.id.ll_view2);
    }

    public void slideRightToLeft(View v) {
        viewFlipper.setInAnimation(this, R.anim.in_from_right);
        viewFlipper.setOutAnimation(this, R.anim.out_to_left);
        viewFlipper.showNext();
    }

    public void slideLeftToRight(View v) {
        viewFlipper.setInAnimation(this, R.anim.in_from_left);
        viewFlipper.setOutAnimation(this, R.anim.out_to_right);
        viewFlipper.showNext();
    }

    public void slideTopToBottom(View v) {
        viewFlipper.setInAnimation(inFromTopAnimation(1000));
        viewFlipper.setOutAnimation(outToBottomAnimation(1000));
        viewFlipper.showNext();
    }

    public void slideBottomToTop(View v) {
        viewFlipper.setInAnimation(this, R.anim.in_from_bottom);
        viewFlipper.setOutAnimation(this, R.anim.out_to_top);
        viewFlipper.showNext();
    }

	public Animation inFromTopAnimation(long durationMillis) {
	    Animation inFromTop = new TranslateAnimation(
	            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
	            Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,   0.0f
	    );
	    inFromTop.setDuration(durationMillis);
	    return inFromTop;
	}

	public Animation outToBottomAnimation(long durationMillis) {
	    Animation outToBottom = new TranslateAnimation(
	            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
	            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   +1.0f
	    );
	    outToBottom.setDuration(durationMillis);
	    return outToBottom;
	}
}

Besides defining animation in xml file, you can also create it programmatically

Slide animation from right to left
slide in from right animation object

public static Animation inFromRightAnimation(long durationMillis) {
    Animation inFromRight = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    inFromRight.setDuration(durationMillis);
    return inFromRight;
}

slide out to left animation object

public static Animation outToLeftAnimation(long durationMillis) {
    Animation outtoLeft = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  -1.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    outtoLeft.setDuration(durationMillis);
    return outtoLeft;
}

Slide animation from left to right
slide in from left animation object

public static Animation inFromLeftAnimation(long durationMillis) {
    Animation inFromLeft = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    inFromLeft.setDuration(durationMillis);
    return inFromLeft;
}

slide out to right animaton object

public static Animation outToRightAnimation(long durationMillis) {
    Animation outtoRight = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  +1.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    outtoRight.setDuration(durationMillis);
    return outtoRight;
}

Slide animation from top to bottom
slide in from top animation object

public static Animation inFromTopAnimation(long durationMillis) {
    Animation inFromTop = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    inFromTop.setDuration(durationMillis);
    return inFromTop;
}

slide out to bottom animation object

public static Animation outToBottomAnimation(long durationMillis) {
    Animation outToBottom = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   +1.0f
    );
    outToBottom.setDuration(durationMillis);
    return outToBottom;
}

Slide animation from bottom to top
slide in from bottom animation object

public static Animation inFromBottomAnimation(long durationMillis) {

    Animation inFromBottom = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    );
    inFromBottom.setDuration(durationMillis);
    return inFromBottom;
}

slide out to top animation object

public static Animation outToTopAnimation(long durationMillis) {
    Animation outToTop = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
            Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   -1.0f
    );
    outToTop.setDuration(durationMillis);
    return outToTop;
}

Example of using the animation object on ViewFlipper, assume those static methods were in a class called AnimationFactory.java

viewFlipper.setInAnimation(AnimationFactory.inFromTopAnimation(1000));
viewFlipper.setOutAnimation(AnimationFactory.outToBottomAnimation(1000));

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search