CHET HAASE: So today let's talk about animation.
There was a lot of animation facilities added in Android 3,
the Honeycomb release.
There's a whole animation package and that package in
those classes have been enhanced over time in
subsequent releases.
So we're going to talk about some of the stuff that was
added in 3.0, as well as some stuff that was added in
Android 4.1 Jelly Bean.
In particular, we're going to talk about the layout
transition class.
It's a little known class.
It's actually used a lot internally in some of the
applications that we ship on Android.
And it's something that we created to make animation much
easier for you.
I like to think about animation all the time.
But I realize that maybe some other developers don't.
So if we can make it easier and easier for you to get
animated facilities within your application without
spending a great deal of time and thought on it, then that's
a good thing.
So let's talk about layout transition.
First of all, we'll start with the base application that
doesn't have animations in it.
And let's look at the code here.
So we have a simple class that I've created.
It's a custom view that I call colored view.
And it has two states.
It has an expanded and a compressed state.
And when it's first added into its container, it's in a
compressed.
And it's going to be 50 pixels high.
And when it's expanded, it's going to be 200 pixels high.
And we can simply change those layout params so that when we
click on this thing it can expand or it can contract.
And as we can see, we do something
really interesting here.
We basically randomize a color to make it a colored view so
that you can actually tell what the
bounds of the view are.
And then we allow you to click on the view
and expand or contract.
And we can take a look at the demo over on the screen to the
right and see how this works.
So we have two buttons up at the top, which add new views
of different randomized colors or remove
views in the container.
And if we click on one of these views, it will expand
and contract as we toggle the clicks back and forth.
And we can see the other activity logic up
here that does that.
We have an add button and a remove button.
We have the container.
And we start out with two views that
we add to the container.
And then when you click on the add button we add a view.
And when you click on the remove button
well we remove a view.
OK, not terribly interesting.
I don't think I'd be doing this video if
this was all it was.
But now let's actually add some animation.
You can notice that when we add an item it just blinks
into place.
When we remove it, it blinks out of place.
And when we click, it just
automatically expands or contracts.
That's not what I would call a nice transition.
It's certainly not a nice animation.
So what can we do about that?
Well the first thing we can do is add a facility that was
added in Android 3.0, as I said before, called layout
transition.
And there are a couple different ways to do this,
both of which are simple.
But the easiest way is just to tell the container where you
want animations to run automatically to animate the
layout changes.
So let's add an attribute here that is android
animate layout changes.
And we'll set it to true.
We'll go ahead and save this.
We'll run the application again.
And watch over on the demo screen as it comes up.
So it starts out the same.
But now when we add an item, you'll see we actually get
animated behavior, just from that one line of
code in the XML file.
Things slide out of place to make room and then
fade in or fade out.
So you can see as we add items everything around it moves out
of the way, and then we fade the new item in.
As we remove an item, we fade out the item, and then
everything moves around it to compress the space that was
freed up by the item going away.
But when we click on the items to expand and contract,
obviously those are not animating.
Those are just popping into their before and after state.
This was the behavior as it was in Honeycomb.
You could easily add this one line of code in XML.
You could add something very similar to set a layout
transition object on a container if you wanted to do
it in code instead of the XML file.
So now we go to Android 4.1 Jelly Bean release.
And we've got a new facility in there that allows you to
actually animate more.
So let's see how that works.
So if we come down to the end of our on create method, and
we actually get a reference to the layout transition object
that we created.
So you can say layout transition equals
container.getlayoutTransition.
OK, we know there's one on there.
Because we set it in the resource file.
And similarly, we could have set this in code instead of
the resource file.
Anyway, we know that there's a transition there.
And we can say transition.enabl
eTransitionType( LayoutTransition.CHANGING) So
there's a new type of transition that we're going to
take advantage of in this release.
Now if we run this file again, demo pops up on
the handy demo screen.
And now let's see what it's like.
So as before, when we add items, we get a
nice animated behavior.
Or when we remove them, we get a nice animated behavior.
And when we click them, we also get an animated behavior.
So what we've told the layout transition object is to
animate not only the default animations that it knows about
when items go away or come into being, but also when
anything in the container changes the layout.
So anything that happens that causes a layout on the
container, we'll make it look at all of its items and say,
OK, where are you now?
And how big are you?
And where are you and how big are you after the layout runs?
And then it sets up animations internally to animate those
changes, basically animating the bounds of the objects.
So kind of nifty, and the best part is, this was what, three
lines of code?
It's one line of code just to enable the layout transition
on a container.
And then it's another couple of lines of code, or even
effectively one line of code to say, I also want this
change in behavior.
Now we added this facility in 4.1 to allow this behavior,
but we did not change the default behavior.
Because it could have been unexpected if people were
using layout transition already.
So instead we added it as a facility that you could add
after the fact, saying OK enable a layout transition and
also enable the changing capability on that.
And one of the things to realize about layout
transition is that these could also be custom animations.
You can check this out on API demos if you'd like.
There's some demo showing custom animations as well as
the default animations.
But the default ones basically give you kind of what would be
expected, which is when an item comes into being we move
everything out of the way, and then we fade it in.
And when it goes away, we fade the thing out, and then we
move everything around it.
If you want something different, then you can
certainly create that.
So go ahead and check out layout transition and the 4.1
Jelly Bean release.
And please play with it and add cool animated effects to
your application.
Thanks.