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.
[code language=”java”]
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);
//…
}
[/code]

To apply the animation on Fragment transition, call setCustomAnimations on FragmentTransaction when you create the Fragment in an Activity.
[code language=”java”]
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
fragmentTransaction.setCustomAnimations(R.anim.in_from_right, R.anim.out_to_left);
//…
}
[/code]

To apply the animation on ViewFlipper transition, call setInAnimation and setOutAnimation on the ViewFlipper object.
[code language=”java”]
viewFlipper.setInAnimation(this, R.anim.in_from_right);
viewFlipper.setOutAnimation(this, R.anim.out_to_left);
[/code]

Slide in from right and slide out to the left.
in_from_right.xml
[code language=”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" />
[/code]
out_to_left.xml
[code language=”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"/>
[/code]

Slide in from left and slide out to the right.
in_from_left.xml
[code language=”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" />
[/code]
out_to_right.xml
[code language=”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"/>
[/code]

Slide in from top and slide out to the bottom.
in_from_top.xml
[code language=”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%" />
[/code]
out_to_bottom.xml
[code language=”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%" />
[/code]

Slide in from bottom and slide out to the top.
in_from_bottom.xml
[code language=”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%" />
[/code]
out_to_top.xml
[code language=”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%" />
[/code]

activity_slide.xml
[code language=”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>
[/code]

SlideActivity.java
[code language=”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;
}
}
[/code]

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

Slide animation from right to left
slide in from right animation object
[code language=”java”]
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;
}
[/code]
slide out to left animation object
[code language=”java”]
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;
}
[/code]

Slide animation from left to right
slide in from left animation object
[code language=”java”]
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;
}
[/code]
slide out to right animaton object
[code language=”java”]
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;
}
[/code]

Slide animation from top to bottom
slide in from top animation object
[code language=”java”]
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;
}
[/code]

slide out to bottom animation object
[code language=”java”]
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;
}
[/code]

Slide animation from bottom to top
slide in from bottom animation object
[code language=”java”]
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;
}
[/code]

slide out to top animation object
[code language=”java”]
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;
}
[/code]

Example of using the animation object on ViewFlipper, assume those static methods were in a class called AnimationFactory.java
[code language=”java”]
viewFlipper.setInAnimation(AnimationFactory.inFromTopAnimation(1000));
viewFlipper.setOutAnimation(AnimationFactory.outToBottomAnimation(1000));
[/code]

Complete example in Github