LayoutTransition: Animate View next to an expanding View

Question

I've recreated my problem to a very simple representation. I have 3 TextViews. 2 of them are in a seperate LinearLayout, the third is on the same level as the LinearLayout. I'm toggling the visibility of test1 and test2, and I'd like to see them fade away (which works). Furthermore, I want test3 to slide into his new place (taking place of test1 and test2). I can't make this happen. test3 just snaps to it's new point.

How can I achive this?

My code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click" />

    <LinearLayout android:animateLayoutChanges="true"
        android:id="@+id/child1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/test1"
            android:layout_width="match_parent" android:visibility="gone"
            android:layout_height="wrap_content"
            android:text="TEST1" />

        <TextView
            android:id="@+id/test2"
            android:layout_width="match_parent" android:visibility="gone"
            android:layout_height="wrap_content"
            android:text="TEST2" />
    </LinearLayout>

    <TextView
        android:id="@+id/test3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TEST3" />

</LinearLayout>

And in my Activity:

public class LayoutAnimations extends Activity {
    private boolean toggle = true;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_animations);

        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (toggle) {
                    findViewById(R.id.test1).setVisibility(View.VISIBLE);
                    findViewById(R.id.test2).setVisibility(View.VISIBLE);
                } else {
                    findViewById(R.id.test1).setVisibility(View.GONE);
                    findViewById(R.id.test2).setVisibility(View.GONE);
                }
                toggle = !toggle;
            }
        });

    }

}

Edit: I actually have another TextView next to test1 and test2 which should be visible at all times, so I can't just hide the LinearLayout itself.

Answer 1

I've solved it using an other question. See this answer

Quoting:

I believe the simplest approach is to extend Animation class and override applyTransformation() to change the view's height as follows:

import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout;

public class MyCustomAnimation extends Animation {

    public final static int COLLAPSE = 1;
    public final static int EXPAND = 0;

    private View mView;
    private int mEndHeight;
    private int mType;
    private LinearLayout.LayoutParams mLayoutParams;

    public MyCustomAnimation(View view, int duration, int type) {

        setDuration(duration);
        mView = view;
        mEndHeight = mView.getHeight();
        mLayoutParams = ((LinearLayout.LayoutParams) view.getLayoutParams());
        mType = type;
        if(mType == EXPAND) {
            mLayoutParams.height = 0;
        } else {
            mLayoutParams.height = LayoutParams.WRAP_CONTENT;
        }
        view.setVisibility(View.VISIBLE);
    }

    public int getHeight(){
        return mView.getHeight();
    }

    public void setHeight(int height){
        mEndHeight = height;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {

        super.applyTransformation(interpolatedTime, t);
        if (interpolatedTime < 1.0f) {
            if(mType == EXPAND) {
                mLayoutParams.height =  (int)(mEndHeight * interpolatedTime);
            } else {
                mLayoutParams.height = (int) (mEndHeight * (1 - interpolatedTime));
            }
            mView.requestLayout();
        } else {
            if(mType == EXPAND) {
                mLayoutParams.height = LayoutParams.WRAP_CONTENT;
                mView.requestLayout();
            }else{
                mView.setVisibility(View.GONE);
            }
        }
    }
}

To use it, set your onclick() as follows:

int height;

@Override
public void onClick(View v) {
    if(view2.getVisibility() == View.VISIBLE){
        MyCustomAnimation a = new MyCustomAnimation(view2, 1000, MyAnimation.COLLAPSE);
        height = a.getHeight();
        view2.startAnimation(a);
    }else{
        MyCustomAnimation a = new MyCustomAnimation(view2, 1000, MyAnimation.EXPAND);
        a.setHeight(height);
        view2.startAnimation(a);
    }
}

Regards.

Answer 2

I wanted the same thing to happen in my app. To achieve this:

1. Create a suitable animation in Res/anim. I've used a slide out from left kind of animation. You can google other if you aren't satisfied with this one.

   slide_out_left.xml

   <translate
       android:duration="@android:integer/config_mediumAnimTime"
       android:fromXDelta="0"
       android:toXDelta="-50%p" />
   
   <alpha
       android:duration="@android:integer/config_mediumAnimTime"
       android:fromAlpha="1.0"
       android:toAlpha="0.0" />
   

2. Attach animation defined above with view you want to animate, (in your case child1 containing text1 and text2)

   Animation outAnimation;
   LinearLayout a1 = (LinearLayout)findViewById(R.id.child1); 
   
   outAnimation = (Animation) AnimationUtils.loadAnimation (getApplicationContext(), R.anim.slide_out_left);
   
   a1.setAnimation(outAnimation);
   outAnimation.setAnimationListener(new  AnimationListener() {
   
       @Override
       public void onAnimationEnd(Animation arg0) {
       a1.setVisibility(View.GONE);                            
       }
       @Override
       public void onAnimationRepeat(Animation animation) {
           // TODO Auto-generated method stub                          
       }
   
       @Override
       public void onAnimationStart(Animation animation) {
           // TODO Auto-generated method stub
       }                 
   });
   a1.startAnimation(outAnimation);
   

NOTE: I've attached animation with child1 instead of text3 because when child1 will slide out slowly it will automatically give an illusion that text3 is sliding in.