chet haase: so today let'stalk about animation. there was a lot of animationfacilities added in android 3, the honeycomb release. there's a whole animationpackage and that package in those classes have beenenhanced over time in
Android layout, subsequent releases. so we're going to talk aboutsome of the stuff that was added in 3.0, as well as somestuff that was added in android 4.1 jelly bean.
in particular, we're goingto talk about the layout transition class. it's a little known class. it's actually used a lotinternally in some of the applications that weship on android. and it's something that wecreated to make animation much easier for you. i like to think about animationall the time. but i realize that maybe someother developers don't.
so if we can make it easierand easier for you to get animated facilities withinyour application without spending a great deal of timeand thought on it, then that's a good thing. so let's talk aboutlayout transition. first of all, we'll start withthe base application that doesn't have animations in it. and let's look atthe code here. so we have a simple classthat i've created.
it's a custom view thati call colored view. and it has two states. it has an expanded anda compressed state. and when it's first added intoits container, it's in a compressed. and it's going to be50 pixels high. and when it's expanded, it'sgoing to be 200 pixels high. and we can simply change thoselayout params so that when we click on this thing it canexpand or it can contract.
and as we can see,we do something really interesting here. we basically randomize a colorto make it a colored view so that you can actuallytell what the bounds of the view are. and then we allow youto click on the view and expand or contract. and we can take a look at thedemo over on the screen to the right and see how this works.
so we have two buttons up at thetop, which add new views of different randomizedcolors or remove views in the container. and if we click on one of theseviews, it will expand and contract as we toggle theclicks back and forth. and we can see the otheractivity logic up here that does that. we have an add buttonand a remove button. we have the container.
and we start out withtwo views that we add to the container. and then when you click on theadd button we add a view. and when you click onthe remove button well we remove a view. ok, not terribly interesting. i don't think i'd bedoing this video if this was all it was. but now let's actuallyadd some animation.
you can notice that when weadd an item it just blinks into place. when we remove it, itblinks out of place. and when we click, it just automatically expands or contracts. that's not what i would calla nice transition. it's certainly nota nice animation. so what can we do about that? well the first thing we can dois add a facility that was
added in android 3.0, as i saidbefore, called layout transition. and there are a couple differentways to do this, both of which are simple. but the easiest way is just totell the container where you want animations to runautomatically to animate the layout changes. so let's add an attributehere that is android animate layout changes.
and we'll set it to true. we'll go ahead and save this. we'll run the applicationagain. and watch over on the demoscreen 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, justfrom that one line of code in the xml file. things slide out of placeto make room and then
fade in or fade out. so you can see as we add itemseverything around it moves out of the way, and then wefade the new item in. as we remove an item, we fadeout the item, and then everything moves around it tocompress the space that was freed up by the itemgoing away. but when we click on the itemsto expand and contract, obviously those arenot animating. those are just popping intotheir before and after state.
this was the behavior asit was in honeycomb. you could easily add thisone line of code in xml. you could add something verysimilar to set a layout transition object on a containerif you wanted to do it in code insteadof the xml file. so now we go to android 4.1jelly bean release. and we've got a new facilityin there that allows you to actually animate more. so let's see how that works.
so if we come down to the endof our on create method, and we actually get a reference tothe layout transition object that we created. so you can say layouttransition equals container.getlayouttransition. ok, we know there'sone on there. because we set it inthe resource file. and similarly, we could haveset this in code instead of the resource file.
anyway, we know that there'sa transition there. and we can say transition.enabl etransitiontype(layouttransition.changing) so there's a new type of transitionthat we're going to take advantage ofin this release. now if we run this fileagain, demo pops up on the handy demo screen. and now let's seewhat it's like. so as before, when weadd items, we get a
nice animated behavior. or when we remove them, we geta nice animated behavior. and when we click them, we alsoget an animated behavior. so what we've told the layouttransition object is to animate not only the defaultanimations that it knows about when items go away or comeinto being, but also when anything in the containerchanges the layout. so anything that happens thatcauses a layout on the container, we'll make it lookat all of its items and say,
ok, where are you now? and how big are you? and where are you and how bigare you after the layout runs? and then it sets up animationsinternally to animate those changes, basically animatingthe bounds of the objects. so kind of nifty, and the bestpart is, this was what, three lines of code? it's one line of code just toenable the layout transition on a container.
and then it's another coupleof lines of code, or even effectively one line of codeto say, i also want this change in behavior. now we added this facility in4.1 to allow this behavior, but we did not change thedefault behavior. because it could have beenunexpected if people were using layout transitionalready. so instead we added it as afacility that you could add after the fact, saying ok enablea layout transition and
also enable the changingcapability on that. and one of the things torealize about layout transition is that these couldalso be custom animations. you can check this out onapi demos if you'd like. there's some demo showing customanimations as well as the default animations. but the default ones basicallygive you kind of what would be expected, which is when an itemcomes into being we move everything out of the way,and then we fade it in.
and when it goes away, we fadethe 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 layouttransition and the 4.1
jelly bean release. and please play with it and addcool animated effects to your application. thanks.
