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));
Search within Codexpedia
Custom Search
Search the entire web
Custom Search
Related Posts