LayoutTransition height to 0 causes view to dissappear instantly without animating

Question

Given a view that is always aligned parent bottom, initially with a height of 0, I want to animate it so it slide up to it's height of WRAP_CONTENT. I'm using layout transition to achieve this:

viewGroup.layoutTransition.enableTransitionType(LayoutTransition.CHANGING)

Where viewGroup is a parent of viewToAnimate and has animateLayoutChange=true

And the logic is:

val params = viewToAnimate.layoutParams

if (expand && params.height == 0) {
   params.height = ViewGroup.LayoutParams.WRAP_CONTENT
   viewToAnimate.layoutParams = params
} else if (collapse && params.height != 0) {
   params.height = 0
   viewToAnimate.layoutParams = params
}

This works great when the view is expanded; the view slides up from the bottom to its height nicely. However, when the height is set to 0, the view simply disappears and doesn't slide in. viewToAnimate is a relative layout with some TextViews, nothing complicated. Any suggestions would be appreciated.

Video showing effect (notice the text not sliding down, just disappearing): https://www.dropbox.com/s/1pq7yh0bqx8ghif/2017_10_06_23_17_11.mp4?dl=0

View to animate:

<RelativeLayout>

    ..some other stuff...

    <RelativeLayout
            android:id="@+id/viewToAnimate"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:background="@color/white">

            <TextView
                android:id="@+id/sampleText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Sample Text"
                android:textSize="50sp"/>

    </RelativeLayout>

</RelativeLayout>

I can't reproduce this using either `ConstraintLayout` or `RelativeLayout` plus two buttons (show/hide) and a `TextView` at the bottom. Can you post all code necessary to reproduce (plus info like what api level you're testing on etc)? — Ben P., Oct 06 '17 at 20:35
@BenP. so both expand and collapse animation happen for you? let me post my layout — ono, Oct 06 '17 at 21:17
@Benjamin not sure what that is. can I use it instead of what I'm trying to do? — ono, Oct 09 '17 at 17:20
@ono see https://material.io/guidelines/components/bottom-sheets.html — Benjamin, Oct 09 '17 at 17:24
@Benjamin I know what a bottomsheet is but what's this animation? is it something that comes with android or a 3rd party lib? — ono, Oct 09 '17 at 17:26
@ono see the official documentation [here](https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior.html) — Benjamin, Oct 09 '17 at 17:27

score 2 · Answer 1 · answered Oct 13 '17 at 10:16

Keep viewToAnimate layout height as "wrap_content" and the textView height as "0dp".. see example below.

    <RelativeLayout
    android:animateLayoutChanges="true"
    android:id="@+id/viewToAnimate"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_alignParentBottom="true"
    android:background="@android:color/white">

    <TextView
        android:id="@+id/sampleText"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Sample Text"
        android:textSize="50sp"/>

</RelativeLayout>


final RelativeLayout viewToAnimate = (RelativeLayout) findViewById(R.id.viewToAnimate);
    viewToAnimate.getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);

            TextView sampleTV = (TextView)findViewById(R.id.sampleText);
            ViewGroup.LayoutParams params = sampleTV.getLayoutParams();
            if (params.height == 0) {
                params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
            }else {
                params.height = 0;
            }

            sampleTV.setLayoutParams(params);

Try and let me know.

user1 · Answer 2 · 2017-10-16T15:08:17.727

What I do to animate a view in and out of view is if the view is meant to be off screen i set the Visibility attribute to "Invisible" and then when it is to animate into view I set it to "Visible" when animation starts and when it is to animate off screen I set it to "Invisible" when the animation ends.

So instead of changing height set visibility.

if (expand) {
   viewToAnimate.setVisibility(View.VISIBLE);
} else if (collapse) {
   viewToAnimate.setVisibility(View.INVISIBLE);
}

to set visibility in xml use:

android:visibility="invisible"

Hope this helps.

CLARIFICATION:

I'm using custom animations and AnimationUtils.loadAnimation to get Animation than using setAnimationListener to set the visibility on the layout/view what is to be animated.

example:

 Animation animation = AnimationUtils.loadAnimation(this, R.anim.custom_animation_in_or_out_of_view);
 animation.setAnimationListener(new Animation.AnimationListener(){
            @Override public void onAnimationStart(Animation animation) {
                //should always be visible on animation starting
                viewToAnimate.setVisibility(View.INVISIBLE);
            }
            @Override public void onAnimationRepeat(Animation animation) {}
            @Override
            public void onAnimationEnd(Animation animation) {
                //set your viewToAnimate to the corresponding visibility...
            }
        });
 viewToAnimate.startAnimation(animation);

custom animation xml for sliding into view:

 <?xml version="1.0" encoding="utf-8"?>
 <translate
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromYDelta="0%p"
     android:toYDelta="100%p"
     android:duration="1000" />

and sliding out of view, just switch the values of 'fromYDelta' and 'toYDelta'.

score 0 · Answer 3 · answered Oct 16 '17 at 12:54

Try to use object animator like

        TextView sampleTV = (TextView) findViewById(R.id.sampleText);

    //initially translate the view to bottom
    sampleTV.setTranslationY(sampleTV.getHeight());

    // for sliding up
    sampleTV.animate().translationY(0).setDuration(100).setInterpolator(new AccelerateDecelerateInterpolator()).start();

    // for sliding down
    sampleTV.animate().translationY(sampleTV.getHeight()).setDuration(100).setInterpolator(new AccelerateDecelerateInterpolator()).start();

score 0 · Answer 4 · answered Oct 16 '17 at 13:53

Just add this into your XML and it will takes the work.

android:animateLayoutChanges="true"

like that

 <RelativeLayout>

        ..some other stuff...

        <RelativeLayout
                android:id="@+id/viewToAnimate"
                android:layout_width="match_parent"
                android:layout_height="0dp"
         *******android:animateLayoutChanges="true"********
                android:gravity="center"
                android:layout_alignParentBottom="true"
                android:background="@color/white">

                <TextView
                    android:id="@+id/sampleText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Sample Text"
                    android:textSize="50sp"/>

        </RelativeLayout>

    </RelativeLayout>

LayoutTransition height to 0 causes view to dissappear instantly without animating

4 Answers4