Horizontal android:animateLayoutChanges="true" Animation not smooth

Question

I have a layout that animate as below

The txt_billion is shown dynamically, with android:animateLayoutChanges="true" (Layout code below).

Notice the Hundred is jumping (actually all are jumping, but the Hundred is just more obvious). How to prevent the text from jumping?

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:background="#9f9"
        android:text="Hundreds" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:background="#f9f"
        android:text="Thousands" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:background="#0ff"
        android:text="Millions" />
    <TextView
        android:id="@+id/txt_billion"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:visibility="gone"
        android:background="#ff0"
        android:text="Billions" />
</LinearLayout>

You could get the code from https://github.com/elye/issue_horizontal_layout_animate to test out

on which device? vhich Android version? is the hardware Acceleration enabled? — Vladyslav Matviienko, Jun 20 '17 at 12:41
Emulator is not a device. Try on the device first. It should differ a lot. — Vladyslav Matviienko, Jun 20 '17 at 12:45
It happens on actual device as well. So I created a small sample works to prove the issue. Do try create a horizontal layout with text gravity center, and animateLayouChange true. You should see this happen. — Elye, Jun 20 '17 at 12:46
Sorry, can't reproduce, works completely smooth on my OnePlus One — Vladyslav Matviienko, Jun 20 '17 at 12:56
Tested on Nexus 6 Mashmallow, issue replicated. I provide a git repository of the code https://github.com/elye/issue_horizontal_layout_animate. Do get it and run. — Elye, Jun 20 '17 at 13:07

score 1 · Answer 1 · answered Jun 20 '17 at 16:02

Try to use Support Transitions instead animateLayoutChanges

First, remove android:animateLayoutChanges="true" from your XML file

After, add compile 'com.android.support:transition:25.4.0' to your app dependencies.

Then, add this line before change visibility (TransitionManager from android.support.transition package)

TransitionManager.beginDelayedTransition(parentOfAnimatedView);

For your code

public void clickMe(View view) {
        TransitionManager.beginDelayedTransition((ViewGroup) billionText.getParent());
        if (billionText.getVisibility() == View.GONE) {
            billionText.setVisibility(View.VISIBLE);
        } else {
            billionText.setVisibility(View.GONE);
        }
    }

No, it doesn't solve the problem. The "Hundreds" still jump. Try on landscape mode, the jump is more obvious. — Elye, Jun 20 '17 at 23:02

score 0 · Answer 2 · answered Aug 02 '17 at 17:28

The problem is that animateLayoutChanges only affects subclasses of ViewGroup. TextView can't react to layout change animations, so the text jumps. There are two ways to fix it:

1) Wrap each TextView in a FrameLayout and put the weight on the FrameLayout. You'll also have to add android:animateLayoutChanges="true" to each, as well as calling getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING) on each FrameLayout. This is kind of gross layout-wise, but it will allow you to keep using the transition animations.

2) Use a ValueAnimator and animate the weight of the (dis)appearing item. The animation may be a little choppier since it needs to lay out the LinearLayout on each frame, but it should still be passable. You'd also have to solve for text reflowing on the disappearing item, maybe by animating it fading out first and then animating the weight change.

Horizontal android:animateLayoutChanges="true" Animation not smooth

2 Answers2