[music playing] daniel olshansky: hi, my nameis daniel olshansky. i'm an intern on the androidteam at google. and today i'll be talking aboutsome of the various methods you can use toanimate fragments.
Android fragment, so today i'm going to discussa few different things, including how you can animatethe switch between one frame and another using fragmenttransaction. i'll talk about how you cancreate animations via code
using object animators toanimate those fragments, as well as a couple of veryuseful call backs and fragments that you can use tocreate very custom animations for your fragment transitions. so jumping straight to the demo,you can see here we have just an image. and this is a fragment thatonly contains an image. tapping on it, it slides intothe background and pops up another fragment.
so this here is just anotherfragment containing text about the golden gate bridge, whichis our original image. tapping once again slidesthat back out. so looking at it once again,tapping once slides it back in into the background. it has this dimming effect whereit darkens it and brings up the text fragment. and tapping once again slidesout the text fragment, dims out that dark hover view,and animates the image
fragment back out. so jumping straight into thecode, there's a few different things to note here today. firstly, there's someboilerplate code. we set up a click list in thereto switch the fragments every single time we clickon the screen. and in switch fragments, thefirst thing you want to look at is here. so i create a listener, at theend of which we're going to do
the actual fragmenttransition. so i start a new transaction. and i call this method calledset custom animations. what set custom animations doesis take in four animator resource files that you can useto animate one fragment in, animate it out, as well aswhen you're popping the stack for the fragment transaction,you can also pass the resource files for animating the otherfragment in and out. what you have to note here,though, is that i am passing
in resource files for the textfragment sliding up and down, but i'm passing in 0s for theimage fragment that i'm animating, because that'sa little more custom. then i add my text fragment ontomy stack, i set that to null, and i commitmy animation. so what this lets me do is latersimply pop my fragment enter stack, and then my imageframe will come back up after a text fragment isanimated out. so all of this is done at theend of an animation listener.
and if you go here to slideback, that's where it's actually going toget executed. so i set up a few animationsfor the image fragment. i'm going to rotateabout the x-axis. i'm going to scale it so itactually rotates in the background and scales and itcomes a little bit smaller. and what i'm actually goingto do as well is this mdarkhoverview, which is justa view with an opacity less than 1 and a black backgroundcolor, it's going to fade in
over my image fragment. so one of the things that youcan do with [? set cost ?] animations is add animationsto other widgets or other items that you haveon the screen. using this method, you canactually add animations at the same time as the fragment isanimated, except to things that may be completelyseparate from the fragment itself. once i've set up all myanimations, i add a start
delay, such that what's actuallyhappening is after i animate the image into thebackground, only then will the text fragment come back up. and then at the end of thatanimation, that's when the fragment popping and transactionactually happens. so if you keep sliding backdown, there's a method called slide forward. and slide forward actuallygets called right here. so what happens is, when youclick on the screen when the
text fragment is in focus, whatwe're going to do is pop the stack in order tobring the image fragment back in focus. and when the back stack ischanged, we're going to call and in slide forward, we'redoing almost the exact same thing as what we didin slide back. we're rotating about the x-axisback out, we're scaling our image frame back up, andwe're fading out the dark hover view insteadof fading it in.
all of this is then put togetherusing an animator set, and that's how theanimation takes place. so this is what you can do ifyou want to have a custom object animator and setcustom animations. but the other important thingthat i really wanted to know it was, in any fragment, there'sa callback method you can override called oncreate animator. and the thing about on createanimator is it's a method that gets called when you want to getthe animation object for a
fragment transaction. it has a few usual parametersyou can use, but the key behind this is that you canessentially create any custom animation you want here andnever be limited just to doing things in an animatedresource file. and then if we actually justtake a quick look at the resource file that we passedinto set custom animations, they're right here. we set up an object animatorwith a from value, a to value,
a property name,and a duration. but one of things i did here isi created a custom property called y fraction. and the reason i did this isbecause unlike in older view and twin animations, propertyanimations are independent of what the containeractually is. so if, for example, in twinanimations, you could tell a view to animate from 0 to 100%of its parent's width, we cant' do this with propertyanimation.
and i found a workaround forthis by using y fraction. so in text fragment, there'sa custom property-- sorry. in fractional liner layout,there's a custom property and so what happens when youcreate an object animator that animates the property yfraction, it's going to look for a setter calledset y fraction. and given the setter right here,set y fraction, what i'm doing is animating a floatvalue between 0 and 1.
but since in runtime i candetermine what the width and height of my screen is, i canactually just do some simple arithmetic and animate it from0 to some certain percentage of its parent's container. so those are some different waysof animating fragments,
as well as a way to work aroundnot having percent animations with objectanimators, unlike you did in older view animations. so i hope you enjoyed thevideo, and thanks.
