Kyle Banks

Open Sourced: AnimatedListView Android Library

Written by @kylewbanks on Oct 12, 2013.

Previously I wrote about how to animate views into place using a ListView on Android, similar to how Google does it in their Google Plus app. I decided to publish an Android library that manages the animations for you, allowing you to easily integrate it into any project.

Download and Setup

First off, download the AnimatedListView library from GitHub, and add it to your project as a Library. If you are unsure of how to do this, do a quick Google search based on your IDE and you will find tutorials covering the subject. Alternatively, you could just copy the source packages (com.kylewbanks.animlv.*) into your project, as there are no resources required by this library.

Once you have the Library set up, you can define an AnimatedListView in your layout XML like so:

<com.kylewbanks.animlv.AnimatedListView
    android:id="@+id/my_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

And reference it from Java like any other XML layout:

AnimatedListView animatedListView = (AnimatedListView) findViewById(R.id.my_list);

Using the AnimatedListView

With a reference to the AnimatedListView, we can now supply it with data to present using an AnimatedListViewAdapter. Here is an example with a list of Post objects:

//Resource ID of the View for each item in your ListView
private int viewResourceId = R.layout.post_list_item;

//Display data in the AnimatedListView
private void displayListView(List<Post> postList) {
    //Create an AnimatedListViewAdapter that will manage the data and animations
    AnimatedListViewAdapter postListAdapter = new AnimatedListViewAdapter(getContext(), viewResourceId, postList, objectMapper);

    //Tell the AnimatedListView to use the adapter
    animatedListView.setAdapter(postListAdapter);
}

// Called to populate a View with the data of 'object'
private AnimatedListViewObjectMapper objectMapper = new AnimatedListViewObjectMapper() {
    @Override
    public void bindObjectToView(Object object, View view) {
        Post post = (Post) object;
        //Populate and stylize the view however you want...
    }
};

As you can see it works very similarly to a normal ArrayAdapter with one difference being that you supply an AnimatedListViewObjectMapper object that will be called with each item in your list, and a View to populate. For example, you could set the view to display the title of the Post object, or color it based on if the user has read the post, etc.

For now (Version 0.1), the animations are fixed. In future versions I will make it possible to modify the duration of the animation, which animations to do, when to animate, etc.

Get the source on GitHub!

Let me know if this post was helpful on Twitter @kylewbanks or down below, and follow me to keep up with future posts!