Scale a layout to match parent with animation

Question

In my sample project i have a linear layout, its height is set to wrap content in xml and there is also a fragment below it which takes all the remaining space. The fragment contains a button which when clicked will remove the fragment and the height of the linear layout is set to match parent. I tried adding android:animateLayoutChanges="true" but the transition from wrap_content to match_parent is not smooth. How can i animate from android:layout_height="wrap_content" to android:layout_height="match_parent"

Here is the layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/bg"
          android:orientation="vertical"
          android:id="@+id/layoutRoot"
          tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:id="@+id/cloudHolder"
    android:orientation="vertical"
    android:animateLayoutChanges="true"
    android:gravity="center"
    android:layout_height="wrap_content">
    <ImageButton
        android:layout_width="100dp"
        android:layout_gravity="center"
        android:layout_height="100dp"
        android:background="@drawable/play"/>
</LinearLayout>

if you post your xml it would be easier to give clear advice. — Christian, Aug 16 '15 at 17:10
Did you figure out the solution for this problem ? I want to animate a view group from match_parent to wrap_content. Can you please share the solution ? — K Pradeep Kumar Reddy, Nov 12 '22 at 14:33

score 1 · Answer 1 · answered Feb 23 '21 at 06:01

@tdjprog Answer with some edit

1 - Stritch

    private void animateViewTostritch_height(final View target) {
        int fromValue = 0;
        // int fromValue = target.getHeight();

        // int toValue = ((View) target.getParent()).getHeight();// matchparent
        int toValue = (int) getResources().getDimension(R.dimen.dialog_header_height);//spesific hight
        // int toValue = (int) (getResources().getDimension(R.dimen.dialog_header_height) / getResources().getDisplayMetrics().density);

        ValueAnimator animator = ValueAnimator.ofInt(fromValue, toValue);

        animator.setDuration(2000);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                target.getLayoutParams().height = (int) animation.getAnimatedValue();
                target.requestLayout();
            }
        });

        animator.start();
    }

Call animateViewTostritch_height(your_View);

2 - Scale %

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

Call scaleView(your_View,0f,10f); // 10f match parent

score 0 · Answer 2 · edited May 23 '17 at 12:29

You may need to try adding android:animateLayoutChanges="true" in the parent layout itself like for example:

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@drawable/bg"
      android:orientation="vertical"
      android:animateLayoutChanges="true"
      android:id="@+id/layoutRoot"
      tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:id="@+id/cloudHolder"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_height="wrap_content">

        <ImageButton
            android:layout_width="100dp"
            android:layout_gravity="center"
            android:layout_height="100dp"
            android:background="@drawable/play"/>

    </LinearLayout>

</LinearLayout>

If the above code doesn't work, you might need to take a look at:

Animation of height of LinearLayout container with ValueAnimator

Or

Animation in changing LayoutParams in LinearLayout

I've tried that and it didn't work. i've edited my question already — Sony, Aug 16 '15 at 17:18
android:animateLayoutChanges="true" will only animate the views within the parent layout in 2 cases only: 1. Adding or removing a view. 2. Setting visibility of a view. — Hussein El Feky, Aug 16 '15 at 17:24
But changing the layout_height attribute won't animate the view. You might need to animate it programmatically. — Hussein El Feky, Aug 16 '15 at 17:26

score 0 · Answer 3 · edited May 23 '17 at 12:06

I think relying on animateLayoutChanges isn't a good idea. Try below code instead.

import android.view.ViewPropertyAnimator;

// In your activity
private int parentHeight;
private int childHeight;
private float childScaleFactor;


//In onCreate()
mChildView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        parentHeight = mParentView.getMeasuredHeight();
        childHeight = mChildView.getMeasuredHeight();
        childScaleFactor = parentHeight/childHeight;
    }
});


mChildView.animate()
    .scaleY(childScaleFactor)
    .setDuration(500)
    .start();

If this doesn't work, refer to this answer on another post

score 0 · Answer 4 · edited Jun 06 '22 at 09:34

0

try this:

private void animateViewToMatchParent(final View target) {
    int fromValue = target.getHeight();
    int toValue = ((View) target.getParent()).getHeight();

    ValueAnimator animator = ValueAnimator.ofInt(fromValue, toValue);

    animator.setDuration(250);
    animator.setInterpolator(new DecelerateInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            target.getLayoutParams().height = (int) animation.getAnimatedValue();
            target.requestLayout();
        }
    });
    animator.start();
}

edited Jun 06 '22 at 09:34

Ankur NCS

3
1
1
3

answered Sep 17 '19 at 23:03

tdjprog

706
6
11

This animation is not smooth. I'm trying animation of view from match_parent to wrap_content. When we say requestLayout, view height first shrinks to 0 from match_parent and then expands to wrap content. Instead i want animation to be smooth from match_parent to wrap_content. – K Pradeep Kumar Reddy Nov 12 '22 at 14:32

Scale a layout to match parent with animation

4 Answers4