[MUSIC PLAYING]
DANIEL OLSHANSKY: Hi, my name is Daniel Olshansky.
I'm an Intern on the Android team at Google.
And today I'll be talking about some of the various
methods you can use to animate fragments.
So today I'm going to discuss a few different things,
including how you can animate the switch between one frame
and another using fragment transaction.
I'll talk about how you can create animations via code
using object animators to animate those fragments, as
well as a couple of very useful call backs and
fragments that you can use to create 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 that only contains an image.
Tapping on it, it slides into the background and pops up
another fragment.
So this here is just another fragment containing text about
the Golden Gate Bridge, which is our original image.
Tapping once again slides that back out.
So looking at it once again, tapping once slides it back in
into the background.
It has this dimming effect where it darkens it and brings
up the text fragment.
And tapping once again slides out the text fragment, dims
out that dark hover view, and animates the image
fragment back out.
So jumping straight into the code, there's a few different
things to note here today.
Firstly, there's some boilerplate code.
We set up a click list in there to switch the fragments
every single time we click on the screen.
And in Switch Fragments, the first thing you want to look
at is here.
So I create a listener, at the end of which we're going to do
the actual fragment transition.
So I start a new transaction.
And I call this method called Set Custom Animations.
What Set Custom Animations does is take in four animator
resource files that you can use to animate one fragment
in, animate it out, as well as when you're popping the stack
for the fragment transaction, you can also pass the resource
files for animating the other fragment in and out.
What you have to note here, though, is that I am passing
in resource files for the text fragment sliding up and down,
but I'm passing in 0s for the image fragment that I'm
animating, because that's a little more custom.
Then I add my text fragment onto my stack, I set that to
null, and I commit my animation.
So what this lets me do is later simply pop my fragment
enter stack, and then my image frame will come back up after
a text fragment is animated out.
So all of this is done at the end of an animation listener.
And if you go here to slide back, that's where it's
actually going to get executed.
So I set up a few animations for the image fragment.
I'm going to rotate about the x-axis.
I'm going to scale it so it actually rotates in the
background and scales and it comes a little bit smaller.
And what I'm actually going to do as well is this
mDarkHoverView, which is just a view with an opacity less
than 1 and a black background color, it's going to fade in
over my image fragment.
So one of the things that you can do with [? set cost ?]
animations is add animations to other widgets or other
items that you have on the screen.
Using this method, you can actually add animations at the
same time as the fragment is animated, except to things
that may be completely separate from
the fragment itself.
Once I've set up all my animations, I add a start
delay, such that what's actually happening is after I
animate the image into the background, only then will the
text fragment come back up.
And then at the end of that animation, that's when the
fragment popping and transaction actually happens.
So if you keep sliding back down, there's a method called
Slide Forward.
And Slide Forward actually gets called right here.
So what happens is, when you click on the screen when the
text fragment is in focus, what we're going to do is pop
the stack in order to bring the image
fragment back in focus.
And when the back stack is changed, we're going to call
Slide Forward.
And in Slide Forward, we're doing almost the exact same
thing as what we did in Slide Back.
We're rotating about the x-axis back out, we're scaling
our image frame back up, and we're fading out the dark
hover view instead of fading it in.
All of this is then put together using an animator
set, and that's how the animation takes place.
So this is what you can do if you want to have a custom
object animator and set custom animations.
But the other important thing that I really wanted to know
it was, in any fragment, there's a callback method you
can override called On Create Animator.
And the thing about On Create Animator is it's a method that
gets called when you want to get the animation object for a
fragment transaction.
It has a few usual parameters you can use, but the key
behind this is that you can essentially create any custom
animation you want here and never be limited just to doing
things in an animated resource file.
And then if we actually just take a quick look at the
resource file that we passed into Set Custom Animations,
they're right here.
We set up an object animator with a From value, a To value,
a property name, and a duration.
But one of things I did here is I created a custom property
called Y Fraction.
And the reason I did this is because unlike in older view
and twin animations, property animations are independent of
what the container actually is.
So if, for example, in twin animations, you could tell a
view to animate from 0 to 100% of its parent's width, we
cant' do this with property animation.
And I found a workaround for this by using Y Fraction.
So in text fragment, there's a custom property--
sorry.
In Fractional Liner Layout, there's a custom property
called Y Fraction.
And so what happens when you create an Object Animator that
animates the property Y Fraction, it's going to look
for a setter called Set Y Fraction.
And given the setter right here, Set Y Fraction, what I'm
doing is animating a float value between 0 and 1.
But since in runtime I can determine what the width and
height of my screen is, I can actually just do some simple
arithmetic and animate it from 0 to some certain percentage
of its parent's container.
So those are some different ways of animating fragments,
as well as a way to work around not having percent
animations with Object Animators, unlike you did in
older View Animations.
So I hope you enjoyed the video, and thanks.