Android View Animation

Question

i've been scrounging the internet for a while now and have been unable to find s viable solution for my animation problem.

I have a list view where when you click on one of the items, more information animates from the bottom to give you a few lines of additional information. That is simply a linearlayout that i have inside the XML file im using for these list items, here:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >




<LinearLayout
    android:id="@+id/friendActivityList"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/friendInfo"
    android:background="@color/grey"
    android:orientation="vertical"
    android:visibility="gone" >

    <RelativeLayout
        android:id="@+id/RelativeLayout04"
        android:layout_width="match_parent"
        android:layout_height="@dimen/freind_activity_list_height" >

        <ImageView
            android:id="@+id/ImageView04"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_margin="5dp"
            android:src="@drawable/logo_d" />

        <TextView
            android:id="@+id/TextView04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/ImageView04"
            android:text="TextView"
            android:textColor="@color/black"
            android:textSize="17dp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/RelativeLayout03"
        android:layout_width="match_parent"
        android:layout_height="@dimen/freind_activity_list_height" >

        <ImageView
            android:id="@+id/ImageView03"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_margin="5dp"
            android:src="@drawable/logo_d" />

        <TextView
            android:id="@+id/TextView03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/ImageView03"
            android:text="TextView"
            android:textColor="@color/black"
            android:textSize="17dp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/RelativeLayout02"
        android:layout_width="match_parent"
        android:layout_height="@dimen/freind_activity_list_height" >

        <ImageView
            android:id="@+id/ImageView02"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_margin="5dp"
            android:src="@drawable/logo_d" />

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/ImageView02"
            android:text="TextView"
            android:textColor="@color/black"
            android:textSize="17dp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="@dimen/freind_activity_list_height" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_margin="5dp"
            android:src="@drawable/logo_d" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/imageView1"
            android:text="TextView"
            android:textColor="@color/black"
            android:textSize="17dp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/RelativeLayout01"
        android:layout_width="match_parent"
        android:layout_height="@dimen/freind_activity_list_height">

        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_margin="5dp"
            android:src="@drawable/logo_d" />

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/ImageView01"
            android:text="TextView"
            android:textColor="@color/black"
            android:textSize="17dp" />
            </RelativeLayout>
        </LinearLayout>






        <RelativeLayout
            android:id="@+id/friendInfo"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:background="@drawable/bg_list_item_n" >

    <ImageView android:id="@+id/imgCompany"
        android:layout_marginLeft="5dp" 
        android:layout_centerVertical="true"
        android:layout_width="60dp"
        android:src="@drawable/ic_launcher"
        android:scaleType="centerInside" 
        android:layout_alignParentLeft="true"
        android:layout_height="50dp">
    </ImageView>



    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_toRightOf="@id/imgCompany"
        android:background="@android:color/transparent"
        android:gravity="left|center"
        android:orientation="vertical"
        android:paddingLeft="5dp" >

            <TextView android:id="@+id/lblCompanyName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:textSize="13dp"
                android:text="Company Name">
            </TextView>

            <TextView android:id="@+id/lblReawrdDesc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/white"
                android:textSize="13dp"
                android:text="Reawrd Description">
            </TextView>

            <TextView android:id="@+id/lblScores"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/white"
                android:textSize="13dp"
                android:singleLine="true"
                android:text="My Score: 13434 | Top Score: 344425">
            </TextView>

        </LinearLayout>

    </RelativeLayout>

    </RelativeLayout>

Most of this is just place holder information so that i can get the animation to work correctly. Here is the code that im using for the animation:

    listviewFriends.setOnItemClickListener(new OnItemClickListener() {//this is the listView that im animating inside of

        public void onItemClick(AdapterView<?> parent, View view,final int pos, long id) {
            Log.v("ListItemClicked", "this position was clicked: "+pos);
            if(friendInfoList != null){
                friendInfoList.clearAnimation();//this is the new view that gets animated and is supposed to push everything below it out of the way
                friendInfoList.setVisibility(View.GONE);
            }
            friendInfoList = (LinearLayout) view.findViewById(R.id.friendActivityList);
            friendInfoList.setVisibility(View.VISIBLE);
            friendInfoList.startAnimation(infoAnim);

        }
    });

    infoAnim = new TranslateAnimation(0,0, -150, 0);//this is the animation im using
    infoAnim.setDuration(1000);
    infoAnim.setFillAfter(true);

No the result of this is that when i click on the list view item the entire space that the supposed-to-be-animated view takes up at the end is white while the view animates from the top down. The location is correct, but i want it to animate and push everything below it out of the way, instead it instantly pushes everything out of the way then animates to fill that space.

Any idea how i can get it to push everything out of the way during the animation instead of immediately? Is it even possible to achieve this effect? any help is greatly appreciated.

Also, I know how i can make it simply animate ontop of the other views, but i need it to actually push everything out of the way.

Answer 1

The trick with this is to create your own Animation subclass.

public class ExpandAnimation extends Animation
{
    private int _targetHeight;
    private View _view;
    private boolean _down;

    public ExpandAnimation(View view, int targetHeight)
    {
        _view = view;
        _targetHeight = targetHeight;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t)
    {
        int newHeight;
        if(_down)
        {
            newHeight = (int) (_targetHeight * interpolatedTime);
        }
        else
        {
            newHeight = (int) (_targetHeight * (1 - interpolatedTime));
        }

        _view.getLayoutParams().height = newHeight;
        _view.requestLayout();
    }

    public ExpandAnimation expand()
    {
        _down = true;
        return this;
    }

    public ExpandAnimation collapse()
    {
        _down = false;
        return this;
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight)
    {
        super.initialize(width, height, parentWidth, parentHeight);
    }

    @Override
    public boolean willChangeBounds()
    {
        return true;
    }
}

Then you can apply that to your view that should expand:

public void togglePreview()
{
    if(_expanded) _preview.startAnimation(_animation.collapse());
    else _preview.startAnimation(_animation.expand());

    _expanded = !_expanded;
    getParent().requestLayout();
}