layout animation in android XML

I am currently working on an app that lists issues for projects hosted at code.google.com. I really should get to grips with the google-api-java-client since the 'old' gdata client does not support Android but that is for another blog entry.

Instead of actually communicating with the server I have been spending time on 9-patch images, styles and animations. See the thing is I installed this cool app from Android Market that lists gigs at local club Debaser. It had a really fine ListView where the entries flies in from the right. Really nifty and I already knew there is a tween animation package in Android (I mean they have Romain Guy working there).

So I wrote a small translation animation like this


This file goes into res/anim/rowanimation.xml

So then I added the following to my ListView in the layout XML file android:layoutAnimation="@anim/rowanimation" which of course didn't work. Now the sad thing is that the android documentation has a lot of information on how to define animations in XML and lots of code samples for how to use it from java but I couldn't find how to use animations from XML-declarations.

The error I found in log cat said Unknown layout animation name: translate so I dug into the android source for AnimationUtils and sure enough I could find that it is actually looking for something called layoutAnimation.

I'll spare you the suspense of searching the internets for a solution and just tell you that what you need to do. You need to define two animation files. You should do something like this:

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"

This file goes into res/anim/listanimation.xml and as you can see it references the previous animation file. The ListView should point to the android:layoutAnimation="@anim/listanimation"

Then things look cool when the list shows. The ListView will apply the rowanimation for each row, it will wait 10% of the total animation time before applying it to the next row so the effect is staggered down the rows. It looks really neat.

No comments:

Post a Comment