How to scale animate a layout diagonally from bottom to top in android?

Question

I am trying to use Scale Animation on a RelativeLayout. I want to scale the image from the left corner to the right corner i.e diagonally(left to right) from bottom to top. I have used the following line of code but I am not getting the desired outcome. And can anyone explain me in simple words what does pivotx and pivoty do?

ScaleAnimation scale = new ScaleAnimation(0, 1, 1, 0);

Answer 1

try this, place this in your anim folder and set that to your layout.

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

</set>

place this in java code:

Animation logoMoveAnimation = AnimationUtils.loadAnimation(this, R.anim.logoanimation); 
layout.startAnimation(logoMoveAnimation);

Answer 2

I am using the following to animate ImageView from left bottom to right top. i.e. diagonally from bottom to top.

img = (ImageView) findViewById(R.id.img);

ScaleAnimation scaleAnim = new ScaleAnimation(
             0f, 1f, 
             0f, 1f,
             Animation.ABSOLUTE, 0,
             Animation.RELATIVE_TO_SELF , 1);
scaleAnim.setDuration(10000);
scaleAnim.setRepeatCount(0);
scaleAnim.setInterpolator(new AccelerateDecelerateInterpolator());
scaleAnim.setFillAfter(true);
scaleAnim.setFillBefore(true);
scaleAnim.setFillEnabled(true);

img.startAnimation(scaleAnim);

You would need to give pivot and its value carefully.

In this case I will give a brief idea of how that works with documentation explanation:

fromX: Horizontal scaling factor to apply at the start of the animation

toX: Horizontal scaling factor to apply at the end of the animation

fromY: Vertical scaling factor to apply at the start of the animation

toY: Vertical scaling factor to apply at the end of the animation

We need to start the animation from small dot and want to scale it to its size. So fromX and fromY are taken as 0f, and toX and toY are 1f.

pivotXType: Specifies how pivotXValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.

pivotXValue: The X coordinate of the point about which the object is being scaled, specified as an absolute number where 0 is the left edge. (This point remains fixed while the object changes size.) This value can either be an absolute number if pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise.

We want the left bottom edge of ImageView to be there throughout animation. So we use pivotXType - ABSOLUTE. and 0 will be the point which should be there throughout animation.

pivotYType: Specifies how pivotYValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT.

pivotYValue: The Y coordinate of the point about which the object is being scaled, specified as an absolute number where 0 is the top edge. (This point remains fixed while the object changes size.) This value can either be an absolute number if pivotYType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise.

The ImageView Y axis needs to be animated relative to its current position. So pivotYType is RELATIVE_TO_SELF and 1 is its bottom corner. so the bottom won't be moved up along with scaling.

Hope this helps.