Ndtyjky

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?

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)