In this tutorials, I show you how you can add an animation to your activities when they go from one activity to another. New activity slide from left to right, right to left, up to bottom or bottom to up.
For making this, we must use
overridePendingTransition(int enterAnim, int exitAnim)
method in Activity
class.
1. Start eclipse and create a new android project.
2. Design an
activity_main.xml
simple like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.blogspot.hongthaiit.activityanimation.MainActivity" >
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/text2"
android:layout_centerInParent="true"
android:textColor="@android:color/holo_blue_dark" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/text3"
android:layout_centerInParent="true"
android:textColor="@android:color/holo_green_dark" />
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="@android:color/holo_orange_dark" />
<TextView
android:id="@+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/text3"
android:layout_centerInParent="true"
android:textColor="@android:color/holo_red_dark" />
</RelativeLayout>
MainActivity.java
, providing some options to open new activity. For details, I show them in code:
public class MainActivity extends Activity implements OnClickListener {
private View textView;
private View textView2;
private View textView3;
private View textView4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
locateTextViews();
}
private void locateTextViews() {
textView = (TextView) findViewById(R.id.text);
textView2 = (TextView) findViewById(R.id.text2);
textView3 = (TextView) findViewById(R.id.text3);
textView4 = (TextView) findViewById(R.id.text4);
((TextView) textView).setText("Click to open activity from left!");
((TextView) textView2).setText("Click to open activity from right!");
((TextView) textView3).setText("Click to open activity from top!");
((TextView) textView4).setText("Click to open activity from bottom!");
textView.setOnClickListener(this);
textView2.setOnClickListener(this);
textView3.setOnClickListener(this);
textView4.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
//open new activity by animation options
case R.id.text:
createIntent();
openActivityFromLeft();
break;
case R.id.text2:
createIntent();
openActivityFromRight();
break;
case R.id.text3:
createIntent();
openActivityFromTop();
break;
case R.id.text4:
createIntent();
openActivityfromBottom();
break;
default:
break;
}
}
/**
* Create Intent to "jump" to new activity
*/
private void createIntent() {
Intent intent = new Intent(this, ChildActivity.class);
startActivity(intent);
}
/**
* slide new activity from right
*/
protected void openActivityFromRight() {
overridePendingTransition(R.anim.slide_left_in, R.anim.slide_left_out);
}
/**
* open new activity by slide from left
*/
protected void openActivityFromLeft() {
overridePendingTransition(R.anim.slide_right_in, R.anim.slide_right_out);
}
/**
*
*/
protected void openActivityfromBottom() {
overridePendingTransition(R.anim.slide_up, R.anim.slide_down);
}
protected void openActivityFromTop() {
overridePendingTransition(R.anim.slide_down, R.anim.slide_up);
}
}
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="@integer/open_activity_time"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
android:duration="@integer/open_activity_time"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
slide_right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="@integer/open_activity_time"
android:fromXDelta="-100%p"
android:toXDelta="0" />
</set>
slide_right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="@integer/open_activity_time"
android:fromXDelta="0"
android:toXDelta="100%p" />
</set>
slide_left_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate
android:duration="@integer/open_activity_time"
android:fromXDelta="100%"
android:toXDelta="0%" />
</set>
slide_left_out.xml
5. Create an <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="@integer/open_activity_time"
android:fromXDelta="0"
android:toXDelta="-100%p" />
</set>
integers.xml
in res/values
folder to define time for sliding processes (used it in above slide xml files):
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<!-- time for sliding process: 3 seconds -->
<integer name="open_activity_time">3000</integer>
<integer name="close_activity_time">3000</integer>
</resources>
ChildActivity.java
). In this, we also provide animation option when user press Back
button:
ChildActiviy.java
7. Run program - result screens (click for full size):public class ChildActivity extends MainActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView textView = new TextView(this);
textView.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
textView.setText("Came here from MainActivity \n click BACK to return!");
textView.setGravity(Gravity.CENTER);
setContentView(textView);
}
@Override
public void onBackPressed() {
finish();
openActivityFromLeft();
}
}
(sorry for having ads in download link)