Android Animation - Flip

Question

I need to create an animation - Flip a view and show another one.

The width of currently shown view is decreased slowly to zero and after that the width of the view-to-be-shown must be increased from zero.

During this time, the height goes from the currently-shown-height to slightly-decreased-height and back again.

How can I achieve this... using a ViewFlipper.

Answer 1

You can do that with ScaleAnimations set on a ViewFlipper. I do a similar thing without the second scale. I have two animations, one for the view going out and one for the view coming in. I'll post them here as a starting point for you.

shrink_to_middle.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">     <scale         android:interpolator="@android:anim/linear_interpolator"         android:fromXScale="1.0"         android:toXScale="1.0"         android:fromYScale="1.0"         android:toYScale="0.0"         android:fillAfter="false"         android:duration="200" />     <translate         android:fromYDelta="0"         android:toYDelta="50%"         android:duration="200"/> </set> 

grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android">     <scale         android:interpolator="@android:anim/linear_interpolator"         android:fromXScale="1.0"         android:toXScale="1.0"         android:fromYScale="0.0"         android:toYScale="1.0"         android:fillAfter="false"         android:startOffset="200"         android:duration="200" />     <translate         android:fromYDelta="50%"         android:toYDelta="0"         android:startOffset="200"         android:duration="200"/> </set> 

Then in the app I set them to the ViewFlipper like this:

mViewFlipper.setInAnimation(context, R.anim.grow_from_middle); mViewFlipper.setOutAnimation(context, R.anim.shrink_to_middle); 

Like I said, this is not exactly what you described, but it's pretty close and will get you started.

--EDIT--

Here is the code using the pivotX and pivotY (well, just pivotY in my case):

shrink_to_middle.xml

<?xml version="1.0" encoding="utf-8"?> <scale     xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/linear_interpolator"     android:fromXScale="1.0"     android:toXScale="1.0"     android:fromYScale="1.0"     android:toYScale="0.0"     android:pivotY="50%"     android:fillAfter="false"     android:duration="200" /> 

grow_from_middle.xml

<?xml version="1.0" encoding="utf-8"?> <scale     xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/linear_interpolator"     android:fromXScale="1.0"     android:toXScale="1.0"     android:fromYScale="0.0"     android:toYScale="1.0"     android:pivotY="50%"     android:fillAfter="false"     android:startOffset="200"     android:duration="200" />