Friday, March 22, 2013

DevBytes: Layout Transitions

The LayoutTransition class (added in Android 3.0) enables easy fade/move/resize animations when items are added to or removed from a ViewGroup, usually with just one line of code. This video shows how this works and also shows the new ability added in JellyBean (Android 4.1) to animate other changes to the layout as well, not limited to items being added or removed.




hazam said...

Hi Chet,

how does this work internally? Does it trigger repeatedly onLayout()? I remember back in 2.x animating these stuff would require requestLayout() every frame.

hazam said...

And how does LayoutTransition relate to LayoutAnimationController?
Is the latter going to be deprecated or they serve different purposes?

Chet Haase said...

@hazam: No, it doesn't run layout on every frame. In fact, that's generally a Bad Thing to do in an animation; layout can be very expensive, in terms of both performance and garbage creation, and it contributes to stuttery and generally bad animations.

What LayoutTransition does instead is to figure out where things are before the change, where things are after the change, and to then run animations (fading as well as moving/resizing) on all affected views between those values. For the layout-related changes, it animates the left/top/right/bottom properties of the views (using those property setters added in 3.0, at the same time as LayoutTransition was added to the API). Check out the source for LayoutTransition if you want to know more details on that.

And no, it's not related to LayoutAnimationController; that's a much older facility based on the pre-3.0 animations that simply staggers animations as objects are added/removed from a layout.

Anonymous said...

why does LayoutTransition not work with ListView? Is there an easy way to animate ListView additions?

Arun Gupta said...

i want to reuse the view which is already created and run the LayoutTransition on it. And i am getting child already has a parent error.Can you please help me in this

Dean said...

Could you help me understand why the z-order of the children seems become inverted on removal of an item?

To clarify the question (using your sample code) assume that you have three elements (A, B & C) and that the the middle element, B, has been expanded. If you then remove the B the DISAPPEARING fade-out animation starts on B whilst the CHANGE_DISAPPEARING translation animation starts on C. The B is however drawn with a higher z-order than C causing C to appear to slide beneath the fading out B. This behaviour/ordering is irrespective of the actual view z-ordering.

Any thoughts or comments would be appreciated.

Peter Jakkel said...

Hi Chet,

I'm currently working on a screen which would do these kinds of animations frequently. Since I have to support even 2.2 I started doing it manually using OnPredrawListeners, but this ends up with large amount of lines. Do you think it is possible to backport the LayoutTransition class using the nineoldandroids library?