Android ListView with Animation.

ListView is a very useful widget. Through animation we can show a ListView as ExpandibleListView.

Screenshots:- When you will click any list item item i view will open like sliding. if you click other list item then it will close the previous one and open the current item.
So it will behave like ExpandibleList.

Download Full source code click ListViewWithAnimation

Screenshots:2)

Steps are as follows:-

Step1) ExpandListItem.java


package com.list.animation;

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

public class ExpandListItem extends Animation {
    private View mAnimatedView;
    private LayoutParams mViewLayoutParams;
    private int mMarginStart, mMarginEnd;
    private boolean mIsVisibleAfter = false;
    private boolean mWasEndedAlready = false;

    /**
     * Initialize the animation
     * @param view The layout we want to animate
     * @param duration The duration of the animation, in ms
     */
    public ExpandListItem(View view, int duration) {

        setDuration(duration);
        mAnimatedView = view;
        mViewLayoutParams = (LayoutParams) view.getLayoutParams();

        // decide to show or hide the view
        mIsVisibleAfter = (view.getVisibility() == View.VISIBLE);

        mMarginStart = mViewLayoutParams.bottomMargin;
        mMarginEnd = (mMarginStart == 0 ? (0- view.getHeight()) : 0);

        view.setVisibility(View.VISIBLE);
    }

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

        if (interpolatedTime < 1.0f) {

            // Calculating the new bottom margin, and setting it
            mViewLayoutParams.bottomMargin = mMarginStart
                    + (int) ((mMarginEnd - mMarginStart) * interpolatedTime);

            // Invalidating the layout, making us seeing the changes we made
            mAnimatedView.requestLayout();

        // Making sure we didn't run the ending before (it happens!)
        } else if (!mWasEndedAlready) {
            mViewLayoutParams.bottomMargin = mMarginEnd;
            mAnimatedView.requestLayout();

            if (mIsVisibleAfter) {
                mAnimatedView.setVisibility(View.GONE);
            }
            mWasEndedAlready = true;
        }
    }
}

Step2) MainActivity .java

package com.list.animation;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ListView;

public class MainActivity extends Activity implements OnItemClickListener{

private List<String> data;

    ListAdapter adapter;

    int selected = -1;

    boolean firsttime = false;

    View bottomview1 = null, bottomview2 = null;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        data = new ArrayList<String>();

        fillData();

        adapter = new ListAdapter(this, data);

        ListView lvMain = (ListView) findViewById(R.id.list);

        lvMain.setAdapter(adapter);

        lvMain.setOnItemClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

    void fillData() {

        for (int i = 1; i <= 5; i++) {

            data.add("Heading" + i);

        }

    }

@Override

public void onItemClick(AdapterView<?> arg0, View view, int position, long arg3) {

if (position == selected) {

if (firsttime) {

ExpandListItem expandAnim = new ExpandListItem(

bottomview2, 1000);

bottomview2.startAnimation(expandAnim);

} else {

ExpandListItem expandAni = new ExpandListItem(

bottomview1, 1000);

bottomview1.startAnimation(expandAni);

}

selected = -1;

} else if (selected >= 0) {

ExpandListItem expandAni = new ExpandListItem(bottomview1,

1000);

bottomview1.startAnimation(expandAni);

bottomview2 = view.findViewById(R.id.hidden);

ExpandListItem expandAnim = new ExpandListItem(bottomview2,

1000);

bottomview2.startAnimation(expandAnim);

selected = position;

bottomview1 = bottomview2;

firsttime = true;

}else

{

bottomview1 = view.findViewById(R.id.hidden);

ExpandListItem expandAni = new ExpandListItem(bottomview1,

1000);

bottomview1.startAnimation(expandAni);

selected = position;

}

}

}

Step3) layout/main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <ListView

        android:id="@+id/list"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" />

</LinearLayout>

Step4) list_item.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/title"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:focusable="false"

        android:focusableInTouchMode="false"

        android:padding="20dip" />

    <LinearLayout

        android:id="@+id/hidden"

        android:layout_width="fill_parent"

        android:layout_height="50dip"

        android:layout_marginBottom="-50dip"

        android:visibility="gone" >

        <Button

            android:id="@+id/doSomething1"

            android:layout_width="wrap_content"

            android:layout_height="50dip"

            android:focusable="false"

            android:layout_marginLeft="50dp"

            android:focusableInTouchMode="false"

            android:text="@string/menu_item1" />

        <Button

            android:id="@+id/doSomething2"

            android:layout_width="wrap_content"

            android:layout_height="50dip"

            android:focusable="false"

            android:focusableInTouchMode="false"

            android:text="@string/menu_item2" />

    </LinearLayout>

</LinearLayout>

Step5) ListAdapter .java


package com.list.animation;

import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ListAdapter extends BaseAdapter {
Context ctx;
    LayoutInflater lInflater;
    List<String> data;

    ListAdapter(Context context, List<String> data) {
        ctx = context;
        this.data = data;
        lInflater = (LayoutInflater) ctx
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int position) {
        return data.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = convertView;
        if (view == null) {
            view = lInflater.inflate(R.layout.list_item, parent, false);
        }
        ((TextView) view.findViewById(R.id.title)).setText(data.get(position));
       
        return view;
    }
}

Thanks,
feel free to ask any thing and post your comments.