0 --> Material Motions: Creating animations and transitions
Wolf, Jossi
Implementing animations and transitions can be tricky - but that shouldn't hold you back! Animations and transitions can help the user keep track of what is going on on the screen and determine context. As a developer, looking at the Material Design Guidelines, a mockup by your designer or other inspirations can sometimes leave you wondering how to actually implement an animation or transition and "making it material". In this session, you will learn how to get from a recording or a rough sketch of animation or transition to implementing it using the Android SDK, and finally some tips about tweaking animations and transitions.
 Thank you. Alright, so welcome everybody. Thank you for joining me here during the Germany game. Today I will tell you about animations and transitions, what they actually are, why you should use them, how they can help you in your app and you know how you can actually use them and implement them. And finally also I will briefly touch motion layout which just came out today so that's very new. My name is Josie Wolf. I'm not a high school student anymore which is really nice. I just graduated a few days ago and I'm a, thank you. So yeah, I'm finally free until October when I will start uni and I'm a freelance Android developer from Hamburg, Germany and by now I also do some organization with the GDG Android Hamburg so if you ever want to speak in Hamburg just ping me. All the slides will be available later like in a few hours on speaker deck.com slash Josie Wolf. I'll put up the link later too. First of all, a bit of you know, pre-context. The stock is API 21 plus, I'm so sorry for everybody who has to support lower but it's really just way easier, API 121 plus and you know this Twitter account said it's the min SDK is 21 so I guess that's fine. Also you know, it's the Germany game so well the video doesn't play but you know I will get really really sad if I don't know when a goal is happening so maybe if you like are watching a live ticker I just ask you to either be really really quiet and don't tell anybody about it or scream real loud so I know and I can celebrate. But with that let's actually get started. There's the GIF so yeah, I will get really sad. I searched for ASAD, Angela Merkel GIF but there wasn't any. So let's start with you know the actual content. We all know material design and not by no material theming and we know all the cool stuff and how nice it looks and we know the pains of actually implementing it in our apps. So this is a video I took from the material documentation and it's about material motion and there are several things about material motion which we'll learn today. So a while back I was working on a side project of mine for a service that our school used and it had a website which wasn't really responsive, there was no app whatsoever either so you couldn't really use it on mobile which to refer just sucked. And so I went out and tried at least I tried to create an Android app and at one point I thought alright now I show the data and it looks fairly nice. Now I want to make it more smooth, I want to add some animations and transitions and I want to do this awesome stuff that the material design documentation shows. And just I don't know how but I stumbled upon this animation or transition on the Google Play Store which to be fair looks really, really sweet. And I tried to implement it and I tried it over the course of two weeks and I failed. It was so fucking hard. I mean come on, you all know the pains of animating things and transitioning things otherwise you wouldn't be here I guess. But I just couldn't find any resource to do it. So after three additional extra weeks I finally managed at 4am in the night to be able to let a scream of just joy let loose. And my mom came into my room and she was like what are you doing? Look I just made this transition, I just made this animation. She's like she actually had the same reaction as my now manager or project manager when I told him that we should actually add animations and transitions to our app. He was like what? I mean you know it costs time, it costs money, time is money, you know it. So no we won't edit, we have to add core features. It was like what if I told you it is a core feature? It was like what? Animations and transitions are actually important. I'm not a UX designer and there are good reasons for that but I can tell you as far as animations and transitions help to provide context for the users. So just you know looking back at our transition from before we immediately know what will happen when we click on an element. We know alright this is Game of Thrones, this is Walking Dead and it just helps us understand the app more easily. Of course you could do it without the animation and transition but first of all it would look as nice and second of all it would just be way harder to understand. And then you know I told you about the story and the problem but yeah how do I actually do it? There are two parts to that and first of all I'm going to look into how you can like mentally approach this problem. First of all is to break it down into small pieces. I mean maybe you would have hoped for some kind of magic thing but I can tell you there isn't but breaking it down into small pieces cannot actually help you and feel like small magic. So let's do that, let's look at the animation transition. We see there's some stuff going on and you know the easiest thing is like to just slow it down. So what we can see is there's a circular unreveal which we'll wait for and then this element moves and then there's a circular reel starting from it. Alright so let's write it down real quick so we keep it in mind. We'll look at what that actually means on Android later. And of course when we hit the back button we want such a nice animation in transition too so looking at that, that's really nice. Props to Google Play Team by the way and we also will slow that down. So we'll see, well it's not slowed down but we see that there's like a circular unreveal and then the element moves back to the first screen and then there's a circular reveal. So actually it's just like before just the other way around. To you know do something you've got to know how to do it and the first step to do that is I believe someone populist once said that but I don't know who so you've got to know your tools to create things. And let's look at our tools for animating things. So first of all I think most of you know animated vector drawables. So when you have vector drawables for example in your music player app you maybe want to animate the play and pause button or we have shared element transitions which we just saw which can be hard to work with. Let's put it that way. And we have physics based animations which were added with the upcoming of material design which we'll look at later. We have newly constrained set when you use constraint layout and we have view property animations which we can animate properties of the view surprisingly. So you could for example animate the height or the width of the color, the background color or whatever you want it actually of a view. And then marked in red there's motion layout. So at Google I.O. how many of you have heard of motion layout yet? Well that's a good percentage. So motion layout is basically a version of constraint layout or a subversion of constraint layout that helps you add animations and transitions more easily and Google announced it at Google I.O. and actually just this morning they posted the first alpha version of this layout online. So we will briefly touch that later. But basically motion layout helps you to create animations and transitions in such a new way which has not been there yet and is really, really awesome. And it's backward compatible to API 18. So that's good for the first all of you who are not API 21 yet. So let's actually get to the coding part because I could talk about UX and UI. First of all we start out with like a simple recycle view. This by the way is why I'm not a UI designer. So we just have like items and just like in Google play we have this circular reveal or we have this circle view. And we wanted to transition to our not so fancy detail page. And it should look like this once it's transitioned. So let's start out with our detail page because we can all create a recycle view. We have a collapsing tool bar layout in that we'll add a constraint layout and in that we'll add an image view and a rounded color view. So you may ask what rounded color view and why do we actually need that stuff? But we actually do need it. We want to create like a custom title and custom background for our collapsing tool bar layout. Turns out collapsing tool bar layout isn't too well customizable at all. So this is what we just got to do. This image view serves as our background which will be revealed. And the rounded color view is the shared element which we'll look at in a second from which this circular reveal will start. And of course, you know, we got to have a tool bar. And now in our UI layout editor looks like this. So fairly weird. And we'll see why it's cool in a second. So starting from our, you know, recycle view and our items, we can just simply, you know, start certain intent and we'll make it to the second activity, you know, plain old stuff. And then what we will do to create a shared element transition is to create those transition activity options. We'll tell it to make a scene transition animation, all right, from this context on this view, which is in this case this rounded color view, which is so. And we'll give it the transition name of this view. This transition name, if you haven't worked with shared element transitions before, is for the Android framework to know, all right, this view is this view in the other screen. Last but not least, we'll of course just sort the activity just as usual and we'll pass the transition activity options. So now when we click on an item, it looks like this. Yeah, that's, I mean, it's all right. That's first part, so now we want the circular reveal, right? I mean, that's the cool thing about it. So luckily, the Android framework provides several methods for animating things and also a circular reveal method. So it takes some parameters, the view, the center, the start radius and end radius of course, and returns and animators so we could even customize it if we wanted to. Sometimes we don't really need to customize it. So important thing to know about like start radius and end radius is if you want to reveal something, you start with a radius of zero and with a bigger radius and if you want to unreveal something, it's just the other way around. So now we only need to like, yeah, call this method from there. So let's do that. We keep in mind that we have like an hidden image view there which is our background to be revealed. So first of all, of course, you want to like set the background color to the color of this circle view we just had. So this one and next up, we're going to get the center of this rounded image view and we are going to create this animator instance. So create circular reveal, our collapsing toolbar background, this image view which is hidden is to be revealed and we just take the center, we just go and we start with a radius of zero and we want to end with radius of the width of this collapsing toolbar background. So actually really easy and after that we'll just say all right, duration is 400. Now we only got to make this hidden view visible of course and start the animation and that's actually it, almost, because it's a shared element transition. We could say all right, we know or we could like take stopwatch and measure the time it takes for this shared element transition to complete but you shouldn't do that. I saw some examples of that but in the real world I found that your animation may work fine in the newest pixel but if you've got like a Moto G6 like I do, animations can take say longer and then you're off by 50 milliseconds which makes the animation just look weird and jarring. So you want to set a listener for the shared element entry transition and just when the transition has actually ended then call the reveal function and you know that's it. Now we have our really, really nice, almost really nice circular reveal. All right, so that works. But you know what about like the material part because we want our animation to not be like, we want it to be like, shoo. That's what's there for material to be awesome. Making the transition material. So material design does say several things about animating things and material motion and one of the things is called easing. So this is the difference from the material design guidelines between easing and no easing and what you can see is that just this blue element which has easing is a lot smoother, moves a lot smoother and this is a lot more natural. That's because in the real world you never will see like linear motion. A bus doesn't like go from here to here with a constant speed but it starts slowly and then it has some speed and it loses that again. And there are different types of easing actually implemented already for us on Android which we can use. So there are lots of types. I will just show you some. Standard easing which is like, you know, it starts rather slow then gets a constant speed and then slows down. There is decelerate easing. So it will maybe work. It will start faster and then actually decelerate and slow down or the opposite which is accelerate easing. So the element moves faster towards the end of the animation. Those easing differences of easing can be used as much as you want and mostly I do recommend standard easing because you rarely use accelerate or decelerate easing. So the other thing the material design documentation says about material motion is real world forces like gravity inspire an element's movement along an arc rather than in a straight line. And maybe you've like seen that in this Google Play animation transition we just had. The element goes like this and not like this. And that's actually important because it's the same thing of nothing in real world being proper linear and it just gives the user something that is known to him and makes him feel more welcome. So it's actually pretty, pretty important to actually add that to your animation because otherwise it's not worth as much as with material motion. So let's do that in code or XML. We can define a transition set which is basically just a collection of transitions. We can tell the Android framework to have a transition ordering so either together or we can execute those in non-parallel after each other. And in our case we only have like this one transition which is change bounce. So when the bounds of view are changed we tell it to use an arc motion. And that's just really simple. So our element moves along an arc. We define this maximum angle or actually the angle of 90 degrees to achieve a natural feeling. You wouldn't want to have more than 90 degrees in the most cases so stick with that. And then we can just like with later inflator there's a transition inflator and we can just like create an empty transition set, inflate this transition and then we can add it to our transition set. So this is the Kotlin way for those of you who haven't done much Kotlin yet. And after that we'll set the duration. Again this is something you may want to play around with with the duration. Maybe you want to lower this to 350 milliseconds. Maybe you want to up this to 500 milliseconds although something more than 500 milliseconds most likely feels way too slow. But definitely I can do recommend to do some testing on your users. Maybe do some A B testing with those values because some people tell me, all right, yeah, this animation looks nice and other ones were confused because it was too fast for them. Other ones just found it way too slow. So that's up to you. But something between 350 milliseconds and 500 milliseconds mostly works best. And last but not least looking at the easing we want to add an interpellator. So as I said before we have different kind of easings and different kinds of interpellators so we want to add an accelerate, decelerate interpellator. And now our animation transition actually looks like this. So you know it's in PowerPoint so. But it looks really, really much better than before without any material motion and much more natural. It helps the user understand, all right, there's something happening and there's another stream coming up and this is its meaning. So I briefly mentioned motion layout before and I want to touch it very quickly. So I gave this talk last week already and when I mentioned motion layout I was like, yeah, we know that it will come sometime in the future. And then this morning I woke up to this tweet and was like, well, all right, looks like I'm going to have to mention it. So motion layout as I mentioned before is a small subset of constraint layout. It also works with constraints but provides even more possibilities. So while you could animate with constraint sets before, there were some limitations. And motion layout basically works with many different things but it has a motion scene and in that there are different sets, constraint sets, state sets and the actual transition. As you can see there are many new things like on click and on swipe which are things for the user to manipulate the action. While with constraint layout you couldn't just stop or pause the animation, this is what you can do with motion layout. And with that you can also modify the animation or transition by the user's input. So the user could maybe drag something or swipe something and you can interpolate your values based on that. There's also new stuff like key frames set, key position, key attributes, custom attributes and those all hint at what will come next into Android Studio which is the key frame editor. So you'll be basically able to make animations and transitions through a UI editor. And this other thing, we won't touch it yet, it will be covered more thoroughly later. So let's actually look at this use case for motion layout. This is a simple constraint layout and we have this view which is on left side and the constraints are there holding it in place and this is our start view. And we want our element to end up on the right side so the constraints are set accordingly. And then we can just use a motion scene. We do simple stuff actually, we also add a transition that we knew before and we'll tell it with motion namespace that we have this start constraint set so our view, so our layout where the view is on the left side and then we have this end constraint set where the view is on the right side. And of course we can also set the duration, we could do that programmatically whatever you want and what we see here is on swipe which is basically a user modification from swiping a button. So that's what you can do, it's really cool and just play around with it. And to make it material, we can do that here too because right now it would be just like linear and that's not too nice. We can also add an interpolator, there are many interpolators so I would recommend the accelerate, decelerate interpolator but just so you know like how many there are, a lot. Those are all in the Android documentation and I can definitely recommend you to like check it out and try it. Next keyframes for the UI editor which is not available in Android Studio yet but obviously will be in the coming weeks. We can define actually like a keyframe set so we have a transition and we tell the Android framework that at frame position 50 on a scale from 0 to 100 so actually at the half of the animation or transition, we want the Y percentage to be raised by 25%. And the target is our button and we don't care about the type for now. And then it actually looks like this and that's how easy keyframes work and how you can use them. So as a conclusion, implementing animations and transitions can be tricky especially if you've got your manager, project manager breathing down your neck and telling you complete that feature today and you're like, ehhhhh. And you should definitely pay some attention to it because even if your PM tells you that animations and transitions are not worth it, ask you X designer, they definitely are. They help you users understand your app much better. They're not a must have feature but they can definitely improve your app in so many ways. So it's really worth it. And motion layout makes things a lot easier. This is just alpha one of motion layout which was released today. It will come with constraint layout 2.0 which will be hopefully available as soon as possible. But I can only recommend you to play around with motion layout and constraint layout 2.0 and go create some awesome animations and transitions. Reading on, I've still got like four links. The obviously the Android documentation or training about animations is comprehensive. You need some time to read through it but there are if you have absolutely no idea where you should start with animations and transitions, you should definitely take a look at that. It provides some techniques and overview of the APIs. Then of course the material design documentation on motion. There is even more on not only motion of elements but also on motion in navigation. How do elements behave? How do screens behave? And recommended transitions. And with motion layout and constraint layout because you can really create awesome stuff with it. There is as of like nine hours ago the constraint layout examples which also feature motion layout and the new speeder. And there is this medium post which gives a introduction to motion layout. You can find me on medium.com slash at your wolf where there's also a written version of the making of this animation which is created. And you can find me on Twitter on GitHub and you can find the slides for this and for other talks on speakadec.com. Also tweet a link later and it will be up with droid com as soon as the recording is up. Thank you for listening. Thank you.
 Thank you.  Alright, so welcome everybody.  Thank you for joining me here during the Germany game.  Today I will tell you about animations and transitions, what they actually are, why you  should use them, how they can help you in your app and you know how you can actually use  them and implement them.  And finally also I will briefly touch motion layout which just came out today so that's  very new.  My name is Josie Wolf.  I'm not a high school student anymore which is really nice.  I just graduated a few days ago and I'm a, thank you.  So yeah, I'm finally free until October when I will start uni and I'm a freelance Android  developer from Hamburg, Germany and by now I also do some organization with the GDG  Android Hamburg so if you ever want to speak in Hamburg just ping me.  All the slides will be available later like in a few hours on speaker deck.com slash Josie  Wolf.  I'll put up the link later too.  First of all, a bit of you know, pre-context.  The stock is API 21 plus, I'm so sorry for everybody who has to support lower but it's  really just way easier, API 121 plus and you know this Twitter account said it's the min  SDK is 21 so I guess that's fine.  Also you know, it's the Germany game so well the video doesn't play but you know I will  get really really sad if I don't know when a goal is happening so maybe if you like are  watching a live ticker I just ask you to either be really really quiet and don't tell anybody  about it or scream real loud so I know and I can celebrate.  But with that let's actually get started.  There's the GIF so yeah, I will get really sad.  I searched for ASAD, Angela Merkel GIF but there wasn't any.  So let's start with you know the actual content.  We all know material design and not by no material theming and we know all the cool  stuff and how nice it looks and we know the pains of actually implementing it in our apps.  So this is a video I took from the material documentation and it's about material motion  and there are several things about material motion which we'll learn today.  So a while back I was working on a side project of mine for a service that our school used  and it had a website which wasn't really responsive, there was no app whatsoever either so you  couldn't really use it on mobile which to refer just sucked.  And so I went out and tried at least I tried to create an Android app and at one point  I thought alright now I show the data and it looks fairly nice.  Now I want to make it more smooth, I want to add some animations and transitions and  I want to do this awesome stuff that the material design documentation shows.  And just I don't know how but I stumbled upon this animation or transition on the Google  Play Store which to be fair looks really, really sweet.  And I tried to implement it and I tried it over the course of two weeks and I failed.  It was so fucking hard.  I mean come on, you all know the pains of animating things and transitioning things  otherwise you wouldn't be here I guess.  But I just couldn't find any resource to do it.  So after three additional extra weeks I finally managed at 4am in the night to be able to  let a scream of just joy let loose.  And my mom came into my room and she was like what are you doing?  Look I just made this transition, I just made this animation.  She's like she actually had the same reaction as my now manager or project manager when I  told him that we should actually add animations and transitions to our app.  He was like what?  I mean you know it costs time, it costs money, time is money, you know it.  So no we won't edit, we have to add core features.  It was like what if I told you it is a core feature?  It was like what?  Animations and transitions are actually important.  I'm not a UX designer and there are good reasons for that but I can tell you as far as animations  and transitions help to provide context for the users.  So just you know looking back at our transition from before we immediately know what will  happen when we click on an element.  We know alright this is Game of Thrones, this is Walking Dead and it just helps us understand  the app more easily.  Of course you could do it without the animation and transition but first of all it would look  as nice and second of all it would just be way harder to understand.  And then you know I told you about the story and the problem but yeah how do I actually  do it?  There are two parts to that and first of all I'm going to look into how you can like  mentally approach this problem.  First of all is to break it down into small pieces.  I mean maybe you would have hoped for some kind of magic thing but I can tell you there  isn't but breaking it down into small pieces cannot actually help you and feel like small  magic.  So let's do that, let's look at the animation transition.  We see there's some stuff going on and you know the easiest thing is like to just slow  it down.  So what we can see is there's a circular unreveal which we'll wait for and then this element  moves and then there's a circular reel starting from it.  Alright so let's write it down real quick so we keep it in mind.  We'll look at what that actually means on Android later.  And of course when we hit the back button we want such a nice animation in transition  too so looking at that, that's really nice.  Props to Google Play Team by the way and we also will slow that down.  So we'll see, well it's not slowed down but we see that there's like a circular unreveal  and then the element moves back to the first screen and then there's a circular reveal.  So actually it's just like before just the other way around.  To you know do something you've got to know how to do it and the first step to do that  is I believe someone populist once said that but I don't know who so you've got to know  your tools to create things.  And let's look at our tools for animating things.  So first of all I think most of you know animated vector drawables.  So when you have vector drawables for example in your music player app you maybe want to  animate the play and pause button or we have shared element transitions which we just saw  which can be hard to work with.  Let's put it that way.  And we have physics based animations which were added with the upcoming of material design  which we'll look at later.  We have newly constrained set when you use constraint layout and we have view property  animations which we can animate properties of the view surprisingly.  So you could for example animate the height or the width of the color, the background  color or whatever you want it actually of a view.  And then marked in red there's motion layout.  So at Google I.O. how many of you have heard of motion layout yet?  Well that's a good percentage.  So motion layout is basically a version of constraint layout or a subversion of constraint  layout that helps you add animations and transitions more easily and Google announced  it at Google I.O. and actually just this morning they posted the first alpha version of this  layout online.  So we will briefly touch that later.  But basically motion layout helps you to create animations and transitions in such a new way  which has not been there yet and is really, really awesome.  And it's backward compatible to API 18.  So that's good for the first all of you who are not API 21 yet.  So let's actually get to the coding part because I could talk about UX and UI.  First of all we start out with like a simple recycle view.  This by the way is why I'm not a UI designer.  So we just have like items and just like in Google play we have this circular reveal or  we have this circle view.  And we wanted to transition to our not so fancy detail page.  And it should look like this once it's transitioned.  So let's start out with our detail page because we can all create a recycle view.  We have a collapsing tool bar layout in that we'll add a constraint layout and in that  we'll add an image view and a rounded color view.  So you may ask what rounded color view and why do we actually need that stuff?  But we actually do need it.  We want to create like a custom title and custom background for our collapsing tool bar layout.  Turns out collapsing tool bar layout isn't too well customizable at all.  So this is what we just got to do.  This image view serves as our background which will be revealed.  And the rounded color view is the shared element which we'll look at in a second from which  this circular reveal will start.  And of course, you know, we got to have a tool bar.  And now in our UI layout editor looks like this.  So fairly weird.  And we'll see why it's cool in a second.  So starting from our, you know, recycle view and our items, we can just simply, you know,  start certain intent and we'll make it to the second activity, you know, plain old stuff.  And then what we will do to create a shared element transition is to create those transition  activity options.  We'll tell it to make a scene transition animation, all right, from this context on this view,  which is in this case this rounded color view, which is so.  And we'll give it the transition name of this view.  This transition name, if you haven't worked with shared element transitions before, is  for the Android framework to know, all right, this view is this view in the other screen.  Last but not least, we'll of course just sort the activity just as usual and we'll pass  the transition activity options.  So now when we click on an item, it looks like this.  Yeah, that's, I mean, it's all right.  That's first part, so now we want the circular reveal, right?  I mean, that's the cool thing about it.  So luckily, the Android framework provides several methods for animating things and also  a circular reveal method.  So it takes some parameters, the view, the center, the start radius and end radius of  course, and returns and animators so we could even customize it if we wanted to.  Sometimes we don't really need to customize it.  So important thing to know about like start radius and end radius is if you want to reveal  something, you start with a radius of zero and with a bigger radius and if you want to  unreveal something, it's just the other way around.  So now we only need to like, yeah, call this method from there.  So let's do that.  We keep in mind that we have like an hidden image view there which is our background to  be revealed.  So first of all, of course, you want to like set the background color to the color of this  circle view we just had.  So this one and next up, we're going to get the center of this rounded image view and  we are going to create this animator instance.  So create circular reveal, our collapsing toolbar background, this image view which is  hidden is to be revealed and we just take the center, we just go and we start with a  radius of zero and we want to end with radius of the width of this collapsing toolbar background.  So actually really easy and after that we'll just say all right, duration is 400.  Now we only got to make this hidden view visible of course and start the animation and that's  actually it, almost, because it's a shared element transition.  We could say all right, we know or we could like take stopwatch and measure the time it  takes for this shared element transition to complete but you shouldn't do that.  I saw some examples of that but in the real world I found that your animation may work  fine in the newest pixel but if you've got like a Moto G6 like I do, animations can take  say longer and then you're off by 50 milliseconds which makes the animation just look weird and  jarring.  So you want to set a listener for the shared element entry transition and just when the  transition has actually ended then call the reveal function and you know that's it.  Now we have our really, really nice, almost really nice circular reveal.  All right, so that works.  But you know what about like the material part because we want our animation to not  be like, we want it to be like, shoo.  That's what's there for material to be awesome.  Making the transition material.  So material design does say several things about animating things and material motion  and one of the things is called easing.  So this is the difference from the material design guidelines between easing and no easing  and what you can see is that just this blue element which has easing is a lot smoother,  moves a lot smoother and this is a lot more natural.  That's because in the real world you never will see like linear motion.  A bus doesn't like go from here to here with a constant speed but it starts slowly and  then it has some speed and it loses that again.  And there are different types of easing actually implemented already for us on Android which  we can use.  So there are lots of types.  I will just show you some.  Standard easing which is like, you know, it starts rather slow then gets a constant speed  and then slows down.  There is decelerate easing.  So it will maybe work.  It will start faster and then actually decelerate and slow down or the opposite which is accelerate  easing.  So the element moves faster towards the end of the animation.  Those easing differences of easing can be used as much as you want and mostly I do recommend  standard easing because you rarely use accelerate or decelerate easing.  So the other thing the material design documentation says about material motion is real world forces  like gravity inspire an element's movement along an arc rather than in a straight line.  And maybe you've like seen that in this Google Play animation transition we just had.  The element goes like this and not like this.  And that's actually important because it's the same thing of nothing in real world being  proper linear and it just gives the user something that is known to him and makes him feel more  welcome.  So it's actually pretty, pretty important to actually add that to your animation because  otherwise it's not worth as much as with material motion.  So let's do that in code or XML.  We can define a transition set which is basically just a collection of transitions.  We can tell the Android framework to have a transition ordering so either together or  we can execute those in non-parallel after each other.  And in our case we only have like this one transition which is change bounce.  So when the bounds of view are changed we tell it to use an arc motion.  And that's just really simple.  So our element moves along an arc.  We define this maximum angle or actually the angle of 90 degrees to achieve a natural  feeling.  You wouldn't want to have more than 90 degrees in the most cases so stick with that.  And then we can just like with later inflator there's a transition inflator and we can  just like create an empty transition set, inflate this transition and then we can add  it to our transition set.  So this is the Kotlin way for those of you who haven't done much Kotlin yet.  And after that we'll set the duration.  Again this is something you may want to play around with with the duration.  Maybe you want to lower this to 350 milliseconds.  Maybe you want to up this to 500 milliseconds although something more than 500 milliseconds  most likely feels way too slow.  But definitely I can do recommend to do some testing on your users.  Maybe do some A B testing with those values because some people tell me, all right, yeah,  this animation looks nice and other ones were confused because it was too fast for them.  Other ones just found it way too slow.  So that's up to you.  But something between 350 milliseconds and 500 milliseconds mostly works best.  And last but not least looking at the easing we want to add an interpellator.  So as I said before we have different kind of easings and different kinds of interpellators  so we want to add an accelerate, decelerate interpellator.  And now our animation transition actually looks like this.  So you know it's in PowerPoint so.  But it looks really, really much better than before without any material motion and much  more natural.  It helps the user understand, all right, there's something happening and there's another stream  coming up and this is its meaning.  So I briefly mentioned motion layout before and I want to touch it very quickly.  So I gave this talk last week already and when I mentioned motion layout I was like,  yeah, we know that it will come sometime in the future.  And then this morning I woke up to this tweet and was like, well, all right, looks like  I'm going to have to mention it.  So motion layout as I mentioned before is a small subset of constraint layout.  It also works with constraints but provides even more possibilities.  So while you could animate with constraint sets before, there were some limitations.  And motion layout basically works with many different things but it has a motion scene  and in that there are different sets, constraint sets, state sets and the actual transition.  As you can see there are many new things like on click and on swipe which are things for  the user to manipulate the action.  While with constraint layout you couldn't just stop or pause the animation, this is  what you can do with motion layout.  And with that you can also modify the animation or transition by the user's input.  So the user could maybe drag something or swipe something and you can interpolate your  values based on that.  There's also new stuff like key frames set, key position, key attributes, custom attributes  and those all hint at what will come next into Android Studio which is the key frame  editor.  So you'll be basically able to make animations and transitions through a UI editor.  And this other thing, we won't touch it yet, it will be covered more thoroughly later.  So let's actually look at this use case for motion layout.  This is a simple constraint layout and we have this view which is on left side and the  constraints are there holding it in place and this is our start view.  And we want our element to end up on the right side so the constraints are set accordingly.  And then we can just use a motion scene.  We do simple stuff actually, we also add a transition that we knew before and we'll tell  it with motion namespace that we have this start constraint set so our view, so our layout  where the view is on the left side and then we have this end constraint set where the  view is on the right side.  And of course we can also set the duration, we could do that programmatically whatever  you want and what we see here is on swipe which is basically a user modification from  swiping a button.  So that's what you can do, it's really cool and just play around with it.  And to make it material, we can do that here too because right now it would be just like  linear and that's not too nice.  We can also add an interpolator, there are many interpolators so I would recommend the  accelerate, decelerate interpolator but just so you know like how many there are, a lot.  Those are all in the Android documentation and I can definitely recommend you to like  check it out and try it.  Next keyframes for the UI editor which is not available in Android Studio yet but obviously  will be in the coming weeks.  We can define actually like a keyframe set so we have a transition and we tell the Android  framework that at frame position 50 on a scale from 0 to 100 so actually at the half of the  animation or transition, we want the Y percentage to be raised by 25%.  And the target is our button and we don't care about the type for now.  And then it actually looks like this and that's how easy keyframes work and how you can use  them.  So as a conclusion, implementing animations and transitions can be tricky especially if  you've got your manager, project manager breathing down your neck and telling you complete that  feature today and you're like, ehhhhh.  And you should definitely pay some attention to it because even if your PM tells you that  animations and transitions are not worth it, ask you X designer, they definitely are.  They help you users understand your app much better.  They're not a must have feature but they can definitely improve your app in so many ways.  So it's really worth it.  And motion layout makes things a lot easier.  This is just alpha one of motion layout which was released today.  It will come with constraint layout 2.0 which will be hopefully available as soon as possible.  But I can only recommend you to play around with motion layout and constraint layout 2.0  and go create some awesome animations and transitions.  Reading on, I've still got like four links.  The obviously the Android documentation or training about animations is comprehensive.  You need some time to read through it but there are if you have absolutely no idea where  you should start with animations and transitions, you should definitely take a look at that.  It provides some techniques and overview of the APIs.  Then of course the material design documentation on motion.  There is even more on not only motion of elements but also on motion in navigation.  How do elements behave?  How do screens behave?  And recommended transitions.  And with motion layout and constraint layout because you can really create awesome stuff  with it.  There is as of like nine hours ago the constraint layout examples which also feature motion  layout and the new speeder.  And there is this medium post which gives a introduction to motion layout.  You can find me on medium.com slash at your wolf where there's also a written version  of the making of this animation which is created.  And you can find me on Twitter on GitHub and you can find the slides for this and for other  talks on speakadec.com.  Also tweet a link later and it will be up with droid com as soon as the recording is  up.  Thank you for listening.  Thank you.
_DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_0_143.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_144_2327.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_2328_3455.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_3456_3611.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_3612_3683.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_3684_3947.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_3948_4415.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_4416_4463.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_4464_4559.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_4560_4787.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_4788_4871.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_4872_5039.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_5040_5147.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_5148_5747.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_5748_6035.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_6036_6155.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_6156_6215.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_6216_6587.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_6588_9611.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_9612_10235.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_10236_16739.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_16740_27683.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_27684_37175.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_37176_37511.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_37512_38591.png _DCBerlin18_410_Wolf_FROM_0_TO_MATERIAL_MOTION_CRE_CEvqY91AGcI_38592_42976.png
Thank you. Alright, so welcome everybody. Thank you for joining me here during the Germany game. Today I will tell you about animations and transitions, what they actually are, why you should use them, how they can help you in your app and you know how you can actually use them and implement them. And finally also I will briefly touch motion layout which just came out today so that's very new. My name is Josie Wolf. I'm not a high school student anymore which is really nice. I just graduated a few days ago and I'm a, thank you. So yeah, I'm finally free until October when I will start uni and I'm a freelance Android developer from Hamburg, Germany and by now I also do some organization with the GDG Android Hamburg so if you ever want to speak in Hamburg just ping me. All the slides will be available later like in a few hours on speaker deck.com slash Josie Wolf. I'll put up the link later too. First of all, a bit of you know, pre-context. The stock is API 21 plus, I'm so sorry for everybody who has to support lower but it's really just way easier, API 121 plus and you know this Twitter account said it's the min SDK is 21 so I guess that's fine. Also you know, it's the Germany game so well the video doesn't play but you know I will get really really sad if I don't know when a goal is happening so maybe if you like are watching a live ticker I just ask you to either be really really quiet and don't tell anybody about it or scream real loud so I know and I can celebrate. But with that let's actually get started. There's the GIF so yeah, I will get really sad. I searched for ASAD, Angela Merkel GIF but there wasn't any. So let's start with you know the actual content. We all know material design and not by no material theming and we know all the cool stuff and how nice it looks and we know the pains of actually implementing it in our apps. So this is a video I took from the material documentation and it's about material motion and there are several things about material motion which we'll learn today. So a while back I was working on a side project of mine for a service that our school used and it had a website which wasn't really responsive, there was no app whatsoever either so you couldn't really use it on mobile which to refer just sucked. And so I went out and tried at least I tried to create an Android app and at one point I thought alright now I show the data and it looks fairly nice. Now I want to make it more smooth, I want to add some animations and transitions and I want to do this awesome stuff that the material design documentation shows. And just I don't know how but I stumbled upon this animation or transition on the Google Play Store which to be fair looks really, really sweet. And I tried to implement it and I tried it over the course of two weeks and I failed. It was so fucking hard. I mean come on, you all know the pains of animating things and transitioning things otherwise you wouldn't be here I guess. But I just couldn't find any resource to do it. So after three additional extra weeks I finally managed at 4am in the night to be able to let a scream of just joy let loose. And my mom came into my room and she was like what are you doing? Look I just made this transition, I just made this animation. She's like she actually had the same reaction as my now manager or project manager when I told him that we should actually add animations and transitions to our app. He was like what? I mean you know it costs time, it costs money, time is money, you know it. So no we won't edit, we have to add core features. It was like what if I told you it is a core feature? It was like what? Animations and transitions are actually important. I'm not a UX designer and there are good reasons for that but I can tell you as far as animations and transitions help to provide context for the users. So just you know looking back at our transition from before we immediately know what will happen when we click on an element. We know alright this is Game of Thrones, this is Walking Dead and it just helps us understand the app more easily. Of course you could do it without the animation and transition but first of all it would look as nice and second of all it would just be way harder to understand. And then you know I told you about the story and the problem but yeah how do I actually do it? There are two parts to that and first of all I'm going to look into how you can like mentally approach this problem. First of all is to break it down into small pieces. I mean maybe you would have hoped for some kind of magic thing but I can tell you there isn't but breaking it down into small pieces cannot actually help you and feel like small magic. So let's do that, let's look at the animation transition. We see there's some stuff going on and you know the easiest thing is like to just slow it down. So what we can see is there's a circular unreveal which we'll wait for and then this element moves and then there's a circular reel starting from it. Alright so let's write it down real quick so we keep it in mind. We'll look at what that actually means on Android later. And of course when we hit the back button we want such a nice animation in transition too so looking at that, that's really nice. Props to Google Play Team by the way and we also will slow that down. So we'll see, well it's not slowed down but we see that there's like a circular unreveal and then the element moves back to the first screen and then there's a circular reveal. So actually it's just like before just the other way around. To you know do something you've got to know how to do it and the first step to do that is I believe someone populist once said that but I don't know who so you've got to know your tools to create things. And let's look at our tools for animating things. So first of all I think most of you know animated vector drawables. So when you have vector drawables for example in your music player app you maybe want to animate the play and pause button or we have shared element transitions which we just saw which can be hard to work with. Let's put it that way. And we have physics based animations which were added with the upcoming of material design which we'll look at later. We have newly constrained set when you use constraint layout and we have view property animations which we can animate properties of the view surprisingly. So you could for example animate the height or the width of the color, the background color or whatever you want it actually of a view. And then marked in red there's motion layout. So at Google I.O. how many of you have heard of motion layout yet? Well that's a good percentage. So motion layout is basically a version of constraint layout or a subversion of constraint layout that helps you add animations and transitions more easily and Google announced it at Google I.O. and actually just this morning they posted the first alpha version of this layout online. So we will briefly touch that later. But basically motion layout helps you to create animations and transitions in such a new way which has not been there yet and is really, really awesome. And it's backward compatible to API 18. So that's good for the first all of you who are not API 21 yet. So let's actually get to the coding part because I could talk about UX and UI. First of all we start out with like a simple recycle view. This by the way is why I'm not a UI designer. So we just have like items and just like in Google play we have this circular reveal or we have this circle view. And we wanted to transition to our not so fancy detail page. And it should look like this once it's transitioned. So let's start out with our detail page because we can all create a recycle view. We have a collapsing tool bar layout in that we'll add a constraint layout and in that we'll add an image view and a rounded color view. So you may ask what rounded color view and why do we actually need that stuff? But we actually do need it. We want to create like a custom title and custom background for our collapsing tool bar layout. Turns out collapsing tool bar layout isn't too well customizable at all. So this is what we just got to do. This image view serves as our background which will be revealed. And the rounded color view is the shared element which we'll look at in a second from which this circular reveal will start. And of course, you know, we got to have a tool bar. And now in our UI layout editor looks like this. So fairly weird. And we'll see why it's cool in a second. So starting from our, you know, recycle view and our items, we can just simply, you know, start certain intent and we'll make it to the second activity, you know, plain old stuff. And then what we will do to create a shared element transition is to create those transition activity options. We'll tell it to make a scene transition animation, all right, from this context on this view, which is in this case this rounded color view, which is so. And we'll give it the transition name of this view. This transition name, if you haven't worked with shared element transitions before, is for the Android framework to know, all right, this view is this view in the other screen. Last but not least, we'll of course just sort the activity just as usual and we'll pass the transition activity options. So now when we click on an item, it looks like this. Yeah, that's, I mean, it's all right. That's first part, so now we want the circular reveal, right? I mean, that's the cool thing about it. So luckily, the Android framework provides several methods for animating things and also a circular reveal method. So it takes some parameters, the view, the center, the start radius and end radius of course, and returns and animators so we could even customize it if we wanted to. Sometimes we don't really need to customize it. So important thing to know about like start radius and end radius is if you want to reveal something, you start with a radius of zero and with a bigger radius and if you want to unreveal something, it's just the other way around. So now we only need to like, yeah, call this method from there. So let's do that. We keep in mind that we have like an hidden image view there which is our background to be revealed. So first of all, of course, you want to like set the background color to the color of this circle view we just had. So this one and next up, we're going to get the center of this rounded image view and we are going to create this animator instance. So create circular reveal, our collapsing toolbar background, this image view which is hidden is to be revealed and we just take the center, we just go and we start with a radius of zero and we want to end with radius of the width of this collapsing toolbar background. So actually really easy and after that we'll just say all right, duration is 400. Now we only got to make this hidden view visible of course and start the animation and that's actually it, almost, because it's a shared element transition. We could say all right, we know or we could like take stopwatch and measure the time it takes for this shared element transition to complete but you shouldn't do that. I saw some examples of that but in the real world I found that your animation may work fine in the newest pixel but if you've got like a Moto G6 like I do, animations can take say longer and then you're off by 50 milliseconds which makes the animation just look weird and jarring. So you want to set a listener for the shared element entry transition and just when the transition has actually ended then call the reveal function and you know that's it. Now we have our really, really nice, almost really nice circular reveal. All right, so that works. But you know what about like the material part because we want our animation to not be like, we want it to be like, shoo. That's what's there for material to be awesome. Making the transition material. So material design does say several things about animating things and material motion and one of the things is called easing. So this is the difference from the material design guidelines between easing and no easing and what you can see is that just this blue element which has easing is a lot smoother, moves a lot smoother and this is a lot more natural. That's because in the real world you never will see like linear motion. A bus doesn't like go from here to here with a constant speed but it starts slowly and then it has some speed and it loses that again. And there are different types of easing actually implemented already for us on Android which we can use. So there are lots of types. I will just show you some. Standard easing which is like, you know, it starts rather slow then gets a constant speed and then slows down. There is decelerate easing. So it will maybe work. It will start faster and then actually decelerate and slow down or the opposite which is accelerate easing. So the element moves faster towards the end of the animation. Those easing differences of easing can be used as much as you want and mostly I do recommend standard easing because you rarely use accelerate or decelerate easing. So the other thing the material design documentation says about material motion is real world forces like gravity inspire an element's movement along an arc rather than in a straight line. And maybe you've like seen that in this Google Play animation transition we just had. The element goes like this and not like this. And that's actually important because it's the same thing of nothing in real world being proper linear and it just gives the user something that is known to him and makes him feel more welcome. So it's actually pretty, pretty important to actually add that to your animation because otherwise it's not worth as much as with material motion. So let's do that in code or XML. We can define a transition set which is basically just a collection of transitions. We can tell the Android framework to have a transition ordering so either together or we can execute those in non-parallel after each other. And in our case we only have like this one transition which is change bounce. So when the bounds of view are changed we tell it to use an arc motion. And that's just really simple. So our element moves along an arc. We define this maximum angle or actually the angle of 90 degrees to achieve a natural feeling. You wouldn't want to have more than 90 degrees in the most cases so stick with that. And then we can just like with later inflator there's a transition inflator and we can just like create an empty transition set, inflate this transition and then we can add it to our transition set. So this is the Kotlin way for those of you who haven't done much Kotlin yet. And after that we'll set the duration. Again this is something you may want to play around with with the duration. Maybe you want to lower this to 350 milliseconds. Maybe you want to up this to 500 milliseconds although something more than 500 milliseconds most likely feels way too slow. But definitely I can do recommend to do some testing on your users. Maybe do some A B testing with those values because some people tell me, all right, yeah, this animation looks nice and other ones were confused because it was too fast for them. Other ones just found it way too slow. So that's up to you. But something between 350 milliseconds and 500 milliseconds mostly works best. And last but not least looking at the easing we want to add an interpellator. So as I said before we have different kind of easings and different kinds of interpellators so we want to add an accelerate, decelerate interpellator. And now our animation transition actually looks like this. So you know it's in PowerPoint so. But it looks really, really much better than before without any material motion and much more natural. It helps the user understand, all right, there's something happening and there's another stream coming up and this is its meaning. So I briefly mentioned motion layout before and I want to touch it very quickly. So I gave this talk last week already and when I mentioned motion layout I was like, yeah, we know that it will come sometime in the future. And then this morning I woke up to this tweet and was like, well, all right, looks like I'm going to have to mention it. So motion layout as I mentioned before is a small subset of constraint layout. It also works with constraints but provides even more possibilities. So while you could animate with constraint sets before, there were some limitations. And motion layout basically works with many different things but it has a motion scene and in that there are different sets, constraint sets, state sets and the actual transition. As you can see there are many new things like on click and on swipe which are things for the user to manipulate the action. While with constraint layout you couldn't just stop or pause the animation, this is what you can do with motion layout. And with that you can also modify the animation or transition by the user's input. So the user could maybe drag something or swipe something and you can interpolate your values based on that. There's also new stuff like key frames set, key position, key attributes, custom attributes and those all hint at what will come next into Android Studio which is the key frame editor. So you'll be basically able to make animations and transitions through a UI editor. And this other thing, we won't touch it yet, it will be covered more thoroughly later. So let's actually look at this use case for motion layout. This is a simple constraint layout and we have this view which is on left side and the constraints are there holding it in place and this is our start view. And we want our element to end up on the right side so the constraints are set accordingly. And then we can just use a motion scene. We do simple stuff actually, we also add a transition that we knew before and we'll tell it with motion namespace that we have this start constraint set so our view, so our layout where the view is on the left side and then we have this end constraint set where the view is on the right side. And of course we can also set the duration, we could do that programmatically whatever you want and what we see here is on swipe which is basically a user modification from swiping a button. So that's what you can do, it's really cool and just play around with it. And to make it material, we can do that here too because right now it would be just like linear and that's not too nice. We can also add an interpolator, there are many interpolators so I would recommend the accelerate, decelerate interpolator but just so you know like how many there are, a lot. Those are all in the Android documentation and I can definitely recommend you to like check it out and try it. Next keyframes for the UI editor which is not available in Android Studio yet but obviously will be in the coming weeks. We can define actually like a keyframe set so we have a transition and we tell the Android framework that at frame position 50 on a scale from 0 to 100 so actually at the half of the animation or transition, we want the Y percentage to be raised by 25%. And the target is our button and we don't care about the type for now. And then it actually looks like this and that's how easy keyframes work and how you can use them. So as a conclusion, implementing animations and transitions can be tricky especially if you've got your manager, project manager breathing down your neck and telling you complete that feature today and you're like, ehhhhh. And you should definitely pay some attention to it because even if your PM tells you that animations and transitions are not worth it, ask you X designer, they definitely are. They help you users understand your app much better. They're not a must have feature but they can definitely improve your app in so many ways. So it's really worth it. And motion layout makes things a lot easier. This is just alpha one of motion layout which was released today. It will come with constraint layout 2.0 which will be hopefully available as soon as possible. But I can only recommend you to play around with motion layout and constraint layout 2.0 and go create some awesome animations and transitions. Reading on, I've still got like four links. The obviously the Android documentation or training about animations is comprehensive. You need some time to read through it but there are if you have absolutely no idea where you should start with animations and transitions, you should definitely take a look at that. It provides some techniques and overview of the APIs. Then of course the material design documentation on motion. There is even more on not only motion of elements but also on motion in navigation. How do elements behave? How do screens behave? And recommended transitions. And with motion layout and constraint layout because you can really create awesome stuff with it. There is as of like nine hours ago the constraint layout examples which also feature motion layout and the new speeder. And there is this medium post which gives a introduction to motion layout. You can find me on medium.com slash at your wolf where there's also a written version of the making of this animation which is created. And you can find me on Twitter on GitHub and you can find the slides for this and for other talks on speakadec.com. Also tweet a link later and it will be up with droid com as soon as the recording is up. Thank you for listening. Thank you.
Today I will tell you about animations and should use them, how they can help you in your and implement them. And finally also I will Android developer from Hamburg, Germany and by implementing it in our apps. So this is a video I things about material motion which we'll learn animation or transition on the Google Play Store was like what? Animations and transitions are looking back at our transition from before we other screen. Last but not least, we'll of course this one and next up, we're going to get the transition and we tell the Android framework that actually at the half of the animation or transitions can be tricky especially if you've