How to animate height change of views inside a LinearLayout?

Question

I am working on an Android 4+ app which uses a quite simply layout: Multiple views are stacked using a LinearLayout within a ScrollView

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText,UseCompoundDrawables,UselessParent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusableInTouchMode="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 

        <!-- Top Container -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" 

            <Button... />
        </LinearLayout>

        <!-- Hidden Container -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" 

            ... Some Content ...

        </LinearLayout>

        <!-- Bottom Container -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" 

            ... Some Content ...

        </LinearLayout>
    </LinearLayout>
</ScrollView>

The HiddenContainer should not be visible when the layout it created. Thus in the beginning the BottomContainer is directly beneath the TopContainer. A click on the Button within the TopContainer toggles the visibility of the HiddenContainer.

Doing this with hiddenContainer.setVisibility(hiddenContainer.getVisibility() == View.VISIBLE ? View.GONE : View.VISIBLE) works find and without any problem. However it does not look good when the view suddenly appears or disappears. Instead I would like to animate the change.

I was surprised that I was not able to find an easy solution for this:

• Using android:animateLayoutChanges="true" does work, however I am not able to control the animation.
• While using a ValueAnimator to change hiddenContainer.setScaleY(...) gives me control over the animation setScaleY(0) makes the container invisible without reducing the space it occupies within the layout.
• Using the ValueAnimator to change hiddenContainer.setHeight(...) might work, however I don't want to use a fixed height value when showing the container (e.g. hiddenContainer.setHeight(300)) but the height which is determined by the containers content.

So, how to solve this?

Answer 1

For animate your changes of layout (alpha, visibility, height, etc) you can use TransitionManager. For example: I have three static methods and use them when I want to animate layout changes:

public static final int DURATION = 200;

public static void beginAuto(ViewGroup viewGroup) {
    AutoTransition transition = new AutoTransition();
    transition.setDuration(DURATION);
    transition.setOrdering(TransitionSet.ORDERING_TOGETHER);
    TransitionManager.beginDelayedTransition(viewGroup, transition);
}

public static void beginFade(ViewGroup viewGroup) {
    Fade transition = new Fade();
    transition.setDuration(DURATION);
    TransitionManager.beginDelayedTransition(viewGroup, transition);
}

public static void beginChangeBounds(ViewGroup viewGroup) {
    ChangeBounds transition = new ChangeBounds();
    transition.setDuration(DURATION);
    TransitionManager.beginDelayedTransition(viewGroup, transition);
}

And when you want to animate layout changes you can just call one of this methods before layout changings:

beginAuto(hiddenContainerParentLayout);
hiddenContainer.setVisibility(hiddenContainer.getVisibility() == View.VISIBLE ? View.GONE : View.VISIBLE)