Android scale animation on view

Question

I want to use ScaleAnimation (programmatically not in xml) to change height to view from 0 to 60% of parent height. Width of view is constant and is 50px. View is empty only background color is set.

Can someone give me code for scaleAnim using ScaleAnimation from code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:id="@+id/layContainer     > <View       android:layout_width="50px"      android:layout_height="fill_parent"      android:id="@+id/viewContainer"      android:background:"#00f00"     />  </LinearLayout>   ScaleAnimation scaleAnim = new ScaleAnimation(...); 

view before and after animation .Thanks

Answer 1

Here is a code snip to do exactly that.

public void scaleView(View v, float startScale, float endScale) {     Animation anim = new ScaleAnimation(             1f, 1f, // Start and end values for the X axis scaling             startScale, endScale, // Start and end values for the Y axis scaling             Animation.RELATIVE_TO_SELF, 0f, // Pivot point of X scaling             Animation.RELATIVE_TO_SELF, 1f); // Pivot point of Y scaling     anim.setFillAfter(true); // Needed to keep the result of the animation     anim.setDuration(1000);     v.startAnimation(anim); } 

The ScaleAnimation constructor used here takes 8 args, 4 related to handling the X-scale which we don't care about (1f, 1f, ... Animation.RELATIVE_TO_SELF, 0f, ...).

The other 4 args are for the Y-scaling we do care about.

startScale, endScale - In your case, you'd use 0f, 0.6f.

Animation.RELATIVE_TO_SELF, 1f - This specifies where the shrinking of the view collapses to (referred to as the pivot in the documentation). Here, we set the float value to 1f because we want the animation to start growing the bar from the bottom. If we wanted it to grow downward from the top, we'd use 0f.

Finally, and equally important, is the call to anim.setFillAfter(true). If you want the result of the animation to stick around after the animation completes, you must run this on the animator before executing the animation.

So in your case, you can do something like this:

View v = findViewById(R.id.viewContainer); scaleView(v, 0f, .6f); 

Answer 2

In XML, this what I use for achieving the same result. May be this is more intuitive.

scale_up.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >  <scale     android:duration="200"     android:fromXScale="1.0"     android:fromYScale="0.0"     android:pivotX="50%"     android:pivotY="100%"     android:toXScale="1.0"     android:toYScale="1.0" />  </set> 

scale_down.xml

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >  <scale     android:duration="200"     android:fromXScale="1.0"     android:fromYScale="1.0"     android:pivotX="50%"     android:pivotY="100%"     android:toXScale="1.0"     android:toYScale="0.0" />  </set> 

See the animation on the X axis is from 1.0 -> 1.0 which means you don't have any scaling up in that direction and stays at the full width while, on the Y axis you get 0.0 -> 1.0 scaling, as shown in the graphic in the question. Hope this helps someone.

Some might want to know the java code as we see one requested.

Place the animation files in anim folder and then load and set animation files something like.

Animation scaleDown = AnimationUtils.loadAnimation(youContext, R.anim.scale_down); ImagView v = findViewById(R.id.your_image_view); v.startAnimation(scaleDown);