Android ExapandListView Animation Example

I was playing around the functionality and made a custom list view with some efforts, i used the ExpandAnimation.java for this sliding animation functionality which i got from the github resources repository.

create a project with the name ExapandAnimationDemo and have a mainactivity with name ExpandAnimationDemo.java


1)ExpandAnimationDemo.java


package com.jitesh.expand_animation_example;

import com.jitesh.expand_animation_example.R;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.*;

public class ExpandAnimationDemo extends Activity {
private ListView listView1;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Weather weather_data[] = new Weather[] {
new Weather(R.drawable.weather_cloudy, "Cloudy"),
new Weather(R.drawable.weather_showers, "Showers"),
new Weather(R.drawable.weather_snow, "Snow"),
new Weather(R.drawable.weather_storm, "Storm"),
new Weather(R.drawable.weather_sunny, "Sunny") };

WeatherAdapter adapter = new WeatherAdapter(this,
R.layout.listview_item_row, weather_data);

listView1 = (ListView) findViewById(R.id.listView1);

listView1.setAdapter(adapter);
listView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, final View view,
int position, long id) {

View toolbar = view.findViewById(R.id.toolbar);

// Creating the expand animation for the item
ExpandAnimation expandAni = new ExpandAnimation(toolbar, 500);

// Start the animation on the toolbar
toolbar.startAnimation(expandAni);
}
});
}
}


2)ExpandAnimation.java


package com.jitesh.expand_animation_example;

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


public class ExpandAnimation 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 ExpandAnimation(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;
        }
    }
}

3)Weather .java

package com.jitesh.expand_animation_example;

public class Weather {

    public int icon;

    public String title;

    public Weather(){

        super();

    }

    

    public Weather(int icon, String title) {

        super();

        this.icon = icon;

        this.title = title;

    }

}

4) WeatherAdapter.java

package com.jitesh.expand_animation_example;

import com.jitesh.expand_animation_example.R;

import android.app.Activity;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

public class WeatherAdapter extends ArrayAdapter<Weather>{

    Context context; 

    int layoutResourceId;    

    Weather data[] = null;

    

    public WeatherAdapter(Context context, int layoutResourceId, Weather[] data) {

        super(context, layoutResourceId, data);

        this.layoutResourceId = layoutResourceId;

        this.context = context;

        this.data = data;

    }

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        View row = convertView;

        WeatherHolder holder = null;

        

        if(row == null)

        {

            LayoutInflater inflater = ((Activity)context).getLayoutInflater();

            row = inflater.inflate(layoutResourceId, parent, false);

            

            holder = new WeatherHolder();

            holder.imgIcon = (ImageView)row.findViewById(R.id.imgIcon);

            holder.txtTitle = (TextView)row.findViewById(R.id.txtTitle);

            

            row.setTag(holder);

        }

        else

        {

            holder = (WeatherHolder)row.getTag();

        }

        

        Weather weather = data[position];

        holder.txtTitle.setText(weather.title);

        holder.imgIcon.setImageResource(weather.icon);

        

        

        View toolbar = row.findViewById(R.id.toolbar);

        ((LinearLayout.LayoutParams) toolbar.getLayoutParams()).bottomMargin = -50;

        toolbar.setVisibility(View.GONE);

        

        return row;

    }

    

    static class WeatherHolder

    {

        ImageView imgIcon;

        TextView txtTitle;

    }

}

5) 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:background="#FFFFFF"

    android:orientation="vertical" >

    <include

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        layout="@layout/listview_header_row" />

    <ListView

        android:id="@+id/listView1"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:cacheColorHint="#00000000" />

</LinearLayout>

6) listview_item_row.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" >

    <LinearLayout

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

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="horizontal"

        android:padding="10dp" >

        <ImageView

            android:id="@+id/imgIcon"

            android:layout_width="70dip"

            android:layout_height="70dip"

            android:layout_marginBottom="5dp"

            android:layout_marginRight="15dp"

            android:layout_marginTop="5dp" />

        <TextView

            android:id="@+id/txtTitle"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:layout_marginBottom="5dp"

            android:layout_marginTop="5dp"

            android:gravity="center_vertical"

            android:textColor="#000000"

            android:textSize="22dp"

            android:textStyle="bold" />

    </LinearLayout>

    <!-- *********************** -->

    <!-- *** TOOLBAR LAYOUT **** -->

    <!-- *********************** -->

    <LinearLayout

        android:id="@+id/toolbar"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginBottom="-50dip"

        android:orientation="vertical"

        android:visibility="gone" >

        <TextView

            android:id="@+id/title"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:background="#336699"

            android:focusable="false"

            android:focusableInTouchMode="false"

            android:text="@string/data" >

        </TextView>

        <LinearLayout

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

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:background="#339988"

            android:orientation="horizontal"

            android:padding="10dp" >

            <Button

                android:id="@+id/doSomething1"

                android:layout_width="wrap_content"

                android:layout_height="50dip"

                android:focusable="false"

                android:focusableInTouchMode="false"

                android:text="Button1" />

            <Button

                android:id="@+id/doSomething2"

                android:layout_width="wrap_content"

                android:layout_height="50dip"

                android:focusable="false"

                android:focusableInTouchMode="false"

                android:text="Button2" />

            <Button

                android:id="@+id/doSomething3"

                android:layout_width="wrap_content"

                android:layout_height="50dip"

                android:focusable="false"

                android:focusableInTouchMode="false"

                android:text="Button3" />

            <Button

                android:id="@+id/doSomething4"

                android:layout_width="wrap_content"

                android:layout_height="50dip"

                android:focusable="false"

                android:focusableInTouchMode="false"

                android:text="Button4" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

7) listview_header_row.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="horizontal" >

    <TextView

        android:id="@+id/txtHeader"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="#336699"

        android:gravity="center_vertical"

        android:padding="10dp"

        android:text="Jitesh Demo Example"

        android:textColor="#FFFFFF"

        android:textSize="22dp"

        android:textStyle="bold" />

</LinearLayout>

8) res/values/strings.xml

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

<resources>

    <string name="app_name">ExpandAnimationExample</string>

    <string name="data">For this tutorial, I have downloaded some 50 x 50 pixels icons in PNG format.

         You can use your own icons if you want. Once your icons are ready, drag the icons from your

          folder to the project drawable-mdpi directory. Next create a new Java class in your

           project and named it Weather.java. This class will be used to create a custom ArrayAdapte

           r and to bind the objects with the ListView later in this tutorial. Following is the code of Weather.

           java class. It has two simple properties icon and title and a typical class constructor 

           to initialize the properties. </string>

</resources>

9) android manifest

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

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

    package="com.jitesh.expand_animation_example"

    android:versionCode="1"

    android:versionName="1.0" >

    <application

        android:icon="@drawable/icon"

        android:label="@string/app_name" >

        <activity

            android:name=".ExpandAnimationDemo"

            android:label="@string/app_name"

            android:theme="@android:style/Theme.Black.NoTitleBar" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

screen shots 

download the code from the link ExapnadListView