Activity Fade Transition

A - Introduction

Fade animations made the transition between 2 activities becomes smoothly and naturally. It will gradually fade out current activity while simultaneously fading in another.

Without fade animation, the transitions often feel abrupt or hurried.

In this post, I’ll show you how to implement Activity Fade Transition.

B - Create Fade 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:

fadein.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" >

</alpha>

 fadeout.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="0.0" >

</alpha>

As you cansee in each animation xml file, we have:

• duration: the length of animation time
• fromAlpha: init opacity
• toAlpha: final opacity
• interpolator: An interpolator defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rotate) to be accelerated, decelerated, repeated, etc. I will have a single post about interpolator in the future :)

C - Implement Activity Fade Transition

After having animation files, the implementation is very very simple!

Just put the below code into onCreate method after setContentView:

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

 D - Demo Activity Fade Transition

This is a small demo about activity fade 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:

It looks quite wierd - I know LOL. Cause I captured it at the middle of the transition :)

E - Download Source Code

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