Open/Close Activity by slide animation

Hi readers,
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>
3. In 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);
    }

}
4. Now, we need define some animation files (xml). In res/anim folder, create them like these:
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
<?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>
5. Create an 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>
6. Create a destination activity to open (ChildActivity.java). In this, we also provide animation option when user press Back button:
ChildActiviy.java
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();
    }
}
7. Run program -  result screens (click for full size):

pic name pic name pic name

(sorry for having ads in download link)

Share


Previous post
« Prev Post
Next post
Next Post »