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);