9

how to change a height layout programatically as animation?

first :

enter image description here

after :

enter image description here

S.M_Emamian
  • 17,005
  • 37
  • 135
  • 254

1 Answers1

28

Heey Amigo,

After testing my code, i saw a small issue. Because i used "scaleY" it just "stretches" the view. That means if there is some text or something in the view, it will just stretch it and won't look nice. Try with the ValueAnimator instead, its works more smooth

public void onClick(View v)
{
    if(!isBig){
        ValueAnimator va = ValueAnimator.ofInt(100, 200);
        va.setDuration(400);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                v.getLayoutParams().height = value.intValue();
                v.requestLayout();
            }
        });
        va.start();
        isBig = true;
    }
    else{
        ValueAnimator va = ValueAnimator.ofInt(200, 100);
        va.setDuration(400);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                v.getLayoutParams().height = value.intValue();
                v.requestLayout();
            }
        });
        va.start();
        isBig = false;
    }
}

The XML:

<RelativeLayout
    android:layout_width="150dp"
    android:layout_height="100dp"
    android:layout_centerHorizontal="true"
    android:background="@android:color/holo_red_dark"
    android:onClick="onButtonClick"
    android:clickable="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="My Layout"/>
</RelativeLayout>

Old Answer You can use the ObjectAnimator, just remeber to set the pivotY(0) so it only moves on the bottom. Play with it yourself to match it your needs :)

private boolean isBig = false;

...

public void onClick(View v)
{
    v.setPivotY(0f);
    if(!isBig){
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(v, "scaleY", 2f);
        scaleY.setInterpolator(new DecelerateInterpolator());
        scaleY.start();
        isBig = true;
    }
    else{
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(v, "scaleY", 1f);
        scaleY.setInterpolator(new DecelerateInterpolator());
        scaleY.start();
        isBig = false;
    }
}
Ibrahim Yildirim
  • 2,731
  • 2
  • 19
  • 31
  • I have updated the answer. Use the `ValueAnimator` instead, it will work better if you have some text or something else inside the view/layout – Ibrahim Yildirim Jul 25 '14 at 16:08