CODEWITHSUNDEEP
androidandroid-layoutandroid-animationandroid-view
Nick Badal
Nick Badal

Reputation: 671

How to animate individual views on Activity transition?

How can I trigger animations on individual views when switching activities? I.e. if the user clicks a button to go to the next page, I'd like some of my views to fly off screen, and have the background crossfade into the next screen, instead of having the whole screen be animated as one piece.

Is this possible? And if so, how should it be done? (I'm using the most recent API, 4.1, and it doesn't have to be backwards compatible)

EDIT: Currently, doing the transition-in animation is working fine by calling it in onResume(), but when I press back, the activity switches faster than any animations started in onPause() so that makes me think there's a better way/place to do this.

Upvotes: 3

Views: 2372

Answers (2)

bytebender
bytebender

Reputation: 7491

Overriding onResume() works fine, but onPause/onStop don't wait for the animation to complete before moving to the next screen.

What ever starts the event ex. button click would need to start the animations before start activity is called. 

button.setOnClickListener(new ViewOnClickListener() {

    @Override
    void onClick(... {

        // start animations
        // wait till they are finished
        // start activity
    }
});

Since every event that starts a new activity is going to have animation code I would also recommend moving it into some sort of helper class to avoid having duplicate code all over the place. ex.

button1.setOnClickListener(new ViewOnClickListener() {

    @Override
    void onClick(... {

        helper.AnimateViews(/* probably pass activity or context */); 

        // start activity
    }
});

button2.setOnClickListener(new ViewOnClickListener() {

    @Override
    void onClick(... {

        helper.animateViews(/* probably pass activity or context */); 

        // start activity
    }
});

public class ViewAnimiationHelper {

    public void animateViews(Activity activity) {

        // find all views if not found then don't animate them
        View view1 = activity.findViewById(R.id.view1);

        if(view1 != null) {

            // animate view
        }

        View view2 = activity.findViewById(R.id.view1);

        if(view2 != null) {

            // animate view
        }
    }
}

This is all sudo java code but hopefully enough for you to get the idea. Good luck!

Upvotes: 2

Alexis C.
Alexis C.

Reputation: 93842

You can set up animations (like slide) when you switch between activities like this :

  1. In the res folder, create an anim folder
  2. For example, put two xml files for slide.

slide_in.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:shareInterpolator="false">
        <translate android:fromXDelta="100%" android:toXDelta="0%"
          android:fromYDelta="0%" android:toYDelta="0%"
         android:duration="200"/>
  </set>

slie_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
         android:shareInterpolator="false">
      <translate
       android:fromXDelta="100%" android:toXDelta="0%"
       android:fromYDelta="0%" android:toYDelta="0%"
       android:duration="200" />
    </set>

  1. Then on your java code just write this : 

    Intent i = new Intent(YourActivity.this, OtherActivity.class);
    this.startActivity(i);
    overridePendingTransition(R.anim.slide_in, R.anim.slide_out);

If you are testing that on a real device, don't forget to allow it to play animations (Settings -> Display -> Animations -> All Animation)

Hope it helps !:)

Upvotes: 2

Related Questions