Activity Slide Transition

A - Introduction

In previous post - Activity Fade Transition - I show you the pros of using transition animation in Android application.

Today, I’ll show you another type of animation - slide transition.

B - Create Slide Animation

First, check if the res/anim folder does exist or not. If not, create new one.

This folder will contain all your app animation xml files.

Next, create 2 new xml file with the content like below:

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="500" />
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="200" android:startOffset="200" />
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="500" />
    <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="200" android:startOffset="200" />
</set>

As you can see in each xml file, we have a set of two kind of animation: alpha and translate. These two animations will occur at the same time of the transition and combine to make the slide animation.

C - Implement Activity Slide Transition

To call the slide animation, you just need to write one line of code:

overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_left);

D - Demo Activity SlideTransition

This is a small demo about activity slide transition.

We have 2 activity with the UI described below:

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#EBEB99"
    >

    <TextView
        android:id="@+id/tvMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="When I was a student in University of Technical Education HCMC (UTE), me and my friends made up a team called Ice Tea 09."
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/btnSwitchView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/tvMessage"
        android:text="Switch View" />

</RelativeLayout>

activity_second_view.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#CC99FF" >

    <TextView
        android:id="@+id/tvMessage2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="We seek the opportunities in some competitions related to IT and achieved some awards. That’s the very first step for us to keep our head high, moving forward and chasing each other dreams."
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/btnSwitchView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/tvMessage2"
        android:text="Switch View" />

</RelativeLayout>

In the code behind, handle on click event for each button to switch between 2 activities:

MainActivity.java

Button btnSwitchView;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);

	// Override transition animation
	overridePendingTransition(R.anim.fadein, R.anim.fadeout);

	setContentView(R.layout.activity_main);

	btnSwitchView = (Button)findViewById(R.id.btnSwitchView);
	btnSwitchView.setOnClickListener(new OnClickListener() {

		@Override
		public void onClick(View arg0) {
			Intent intent = new Intent(getApplicationContext(), SecondViewActivity.class);
			startActivity(intent);
		}
	});
}

 SecondViewActivity.java

Button btnSwitchView;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);

	// Override transition animation
	overridePendingTransition(R.anim.fadein, R.anim.fadeout);

	setContentView(R.layout.activity_second_view);

	btnSwitchView = (Button)findViewById(R.id.btnSwitchView2);
	btnSwitchView.setOnClickListener(new OnClickListener() {

		@Override
		public void onClick(View arg0) {
			Intent intent = new Intent(getApplicationContext(), MainActivity.class);
			startActivity(intent);
		}
	});
}

Result:

E - Download Source Code

https://drive.google.com/file/d/0Bw3dwdSezn6fN0ZXTnJORUpXZm8/edit?usp=sharing