Tuesday, December 16, 2014

Swipe to Slide animated activity switching

Last post show how to detect Swipe to start another activity. In this post, animation of Slide-in/Slide-out are added in switching activity.


Create xml files of animation in /res/anim/ folder.

/res/anim/slide_left_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="100%p"
        android:toXDelta="0" />

</set>

/res/anim/slide_left_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />

</set>

/res/anim/slide_right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%p" />

</set>

/res/anim/slide_right_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />

</set>

Modify onFling() of MyGestureListener of MainActivity.java in last post, to call overridePendingTransition() after startActivity().
        @Override
        public boolean onFling(MotionEvent event1, MotionEvent event2, 
                float velocityX, float velocityY) {
            
         /*
         Toast.makeText(getBaseContext(), 
          event1.toString() + "\n\n" +event2.toString(), 
          Toast.LENGTH_SHORT).show();
         */
         
         if(event2.getX() < event1.getX()){
          Toast.makeText(getBaseContext(), 
           "Swipe left - startActivity()", 
           Toast.LENGTH_SHORT).show();
          
          //switch another activity
             Intent intent = new Intent(
               MainActivity.this, SecondActivity.class);
             startActivity(intent);
             overridePendingTransition(R.anim.slide_left_in, R.anim.slide_left_out);
         }

            return true;
        }

Modify onFling() of My2ndGestureListener of SecondActivity.java in last post, to call overridePendingTransition() after finish().
        @Override
        public boolean onFling(MotionEvent event1, MotionEvent event2, 
                float velocityX, float velocityY) {
            
         /*
         Toast.makeText(getBaseContext(), 
          event1.toString() + "\n\n" +event2.toString(), 
          Toast.LENGTH_SHORT).show();
         */
         
         if(event2.getX() > event1.getX()){
          Toast.makeText(getBaseContext(), 
           "Swipe right - finish()", 
           Toast.LENGTH_SHORT).show();
          
          finish();
          overridePendingTransition(R.anim.slide_right_in, R.anim.slide_right_out);
         }

            return true;
        }

For /res/layout/activity_main.xml and AndroidManifest.xml refer to last post.

download filesDownload the files.

3 comments:

Anonymous said...

I found this excellent tutorial and have started to put it to use.

I have a question about the slide transition.

When swiping to the left, the 2nd activity enters smoothly and everything is great.

When swiping right, the 2nd activity enters the screen and then flashes to the main activity.

How can I set it so that it previews the mainactivity content

Anonymous said...

I had the same problem
Help please ;(

aldomittwoch said...

I exchanged 'slide_right_in' for 'slide_right_out' and vice versa on SecondActivity and it now works correctly :)