Getting Started with MotionLayout in Android - Rebecca Franks

[Music] hi everyone and welcome to my talk today we're going to be speaking about getting started with motion layouts in Android studio so we're going to be diving into using the motion editor and just exactly how you can get started and the basics of motion layouts so don't worry if you haven't used motion out before because hopefully by the end of this session you'll have a good understanding of how to get started and how to make your apps have a great animations inside them so let's get started so for those that don't know me my name is Rebecca Franks and you can find me on the Internet a tricky room and I've been doing Android for quite some time now and I've taken a particular focus and excitement towards looking at things like constraint layouts and now obviously looking at motion layouts so you might have watched one of my videos before and one of them that's actually covering constraint layout quite in-depth which I recommend watching if you haven't dived into constraint clad at all because motion layout assumes a base knowledge sort of of constraint clouds so if you're just starting out maybe perhaps check out a constraint layout first and then come back to this motion bad video to learn a little bit more about how to animate with motion allowance so what exactly is motion layouts so motion that is a subclass of constraint layouts so everything that you can do in constraint layouts you can do in motion layouts so if you're using barriers or you're using chains or you're using just constraints that are part of constraint layout they will work and be used in motion layouts and motion that allows you to have additional ways to animate your views on screen so we're used to looking at different ways such as looking at our transition managers or looking at just simple view animations that we have been using before but motion layout aims to take and use complex and be used for complex view animations that are driven by interactions so things such as dragging on a recycler view or touching on a button and moving a whole bunch of views at once in different directions and different things happening at the same time so it's more for like a whole complete see that you're transitioning and not just like an individual item that you're transitioning with and my personal favorite is that motion allowed is actually really really nice to use whereas a lot of the other animation frameworks can be a little bit tricky and take a little bit more learning but from my from my experience with motion that it's a lot easier to work with and a lot nicer to work with as well and also one of the nice parts about motion layout is that it allows for Midway seeking of animations so if you have for instance an animation that at fifty percent of it has some like very useful state that it has you can sort of seek to that 50 percent mark and make sure that that is what you want to display on screen whereas with some other animations though what we call fire and for gates animations so that means that once you start it you can't stop it or seek to a certain position of the animation you kind of just have to wait for it to finish and wait for it to do its thing so that motion that has that advantage of allowing you to seek in that animation itself another nice thing is that motion out is back Porter to API level 14 which should cover most use cases if you're using anything lower than that I feel sorry for you and my condolences I hope things get better but anything other than API 14 and you should be good so this is some example usages of motion layers so the first one is a example of a really nice like filtering scenario that I believe was taken from dribble and this person has taken it and implemented it in motion out and actually written up a whole great article about how they used it so I would definitely recommend checking out that one and then the other one on the on the slide is from that that I work on every day over and you can see on the subscription screen we have this animation of that all these elements coming together and this sort of bounced up and down animation at the end of that little like like section so both of these were accomplished with motion layout and the different features within motion layouts some a little bit more complex than others but hopefully by the end of the session you can do like basic animations with motion dad and just like get to that part where you want to be able to make more and more different complex animation and use the different features of it so let's talk about how you would get started with motion layouts so the first thing that you want to do will make sure that you have is that you've included the latest version of constraint layouts so motion layout is packaged as parts of the constraint layout package and you include the latest version at the moment is version 2.0 - beta 4 you might want to check that this is still the latest version at the time of watching this video because it probably is a new release already available but yeah so it make sure that you've included this if you're already using constraint lat you might really have this but it's worth double-checking and then what you're going to want to do is where you're using constraint layout you can change this to use the new motion layout so in the editor there is actually an option in the design tool to just say right click convert to motion layouts but you can also like just edit the XML and change constraint layouts where where it says constraint layer to change it to say the words motion layout and use this fully-qualified widget name and then what you're going to want to do as well is create a motion seem XML file so this file is going to contain all the information that drives this animation that you're going to create between on your screen and you need to create this file inside your XML folder in your resources in your app so once you've created this file you are then gonna want to link this file to the motion layer that you've just changed in your scene or your your layout so in this example you can see that I have motion layer defined and the layout description tag so app layer description is pointing to an XML file for the specific motion scene so this is going to link the two together and actually this is what drives all the animations and puts them all together the other tool but a nice part about motion layout is a nice debug tool called the show paths so if you enable tools show paths and you set it to true when you're running your animation on screen you will see these nice little lines like sort of red dotted lines across your your layouts and that is the path that all your views will take during this Meishan so that's really useful for debugging and just really nice to use and helps rights emotional scenes a little bit better okay so we've got the sort of basics of what the files we have we need to have and like where things need to be located but let's talk a little bit about this motion scene XML class that we've just defined so this motion scene class or file is an XML file that defines all the animations for that particular scene or for that particular layout so we're going to be able to we can also define this programmatically but generally and all the examples are done with XML at the moment so at the moment it's just an XML file but you can also create this with cotton or Java if you wanted to and create it dynamically if you want and what a motion scene contains is a branch of things so I can get quite confusing if you look at like a really complicated motion scene from the start but I'd recommend just looking or starting out with your own basic sets and just using these maybe one or two things and get going with that and then slowly look at the different things that you can add on to it as well so the first thing is it contains constraint sets it also contains transitions and it can also contain keyframes so these are the ones that I'm going to be focusing on in this talk today they are like I mentioned a bit more that you can do with a motion scene but we weren't dive into too much detail about that because we just want to get started and get our feet feet a little bit dirty with what we can do with motion scene so this is typically what emotion scene XML file would look like we have the top-level motion scene tag we have a transition tag inside a transition we can have a keyframe set so we can also have an onclicklistener and an on swipe if we wanted to and then we also have the constraint sets so a motion scene can contain different constraint sets which I'll talk a little bit more about in a bit and each constraint set can have a constraint that is applied to a particular view and that constraints can have different things on it so things such as like a transformation a property setting a layout or custom attributes and we'll go a little bit deeper into that when we get into looking at how we use the motion editor in Android studio so the first thing or let's look constraint sets and what that actually means inside the motion scene so the constraint set is what I like to think of as a resting state that the motion scene will take so we are used to creating constraints when we are creating layouts with constraint layouts and a constraint set is basically just all those constraints defined within like assets and they are then being used to either be applied to your layout so in this example we have a start and an end constraint set so this is the different states that we'll have so at the start of our scene we are going to set a bunch of different constraints so maybe it means we are setting the visibility of something to invisible or maybe we're setting a progress bar to be shown or something like that and then our end constraint set we are going to be setting things such as like the visibility is now visible or the progress bar is now gone and now what will happen is we've got these two different sets and we can now transition between them so this introduces the transition concepts or the transition tag that we would use inside the motion scene so this defines the way in which two states will be transformed between so in this example we have a transition defined in the XML and we have the constraint set in set to the end States and the constraint set starts said to the start constraint set that we've created we can also set different things here such as the duration of this of this transition or we can even set the interpolator so if we wanted to do like a bounce interpolation or in this example we're just doing a plain linear interpolation we can set that on this transition object and this is the basics that you need in order to run a transition or run this animation in motion layout so we have our two constraint set so starts and in sets and then we have our transition that we're going to transition between these two sets one thing that we can do on a transition is we can define certain behaviors for a transition so in this example we are setting an onclicklistener and this automatically adds a transition or invokes the transition on click of a certain target button that we have here so we just apply that we'll add this on click into the transition objects we set the target to a certain button or view that we have inside our view inside our layout and then we say what we want the click action to perform so in this case we're saying okay this button when we click it it must toggle between these two states so it'll automatically transition between the end and start constraint sets and if we click it again it'll go backwards so it will go from the end to the start constraint sets and that's what the toggle action will do so this is pretty much a simple example of what we can do with constraint constraint layouts and motion layout and animating between the two another deeper kind of thing that we can look at and we'll show you an example in the motion editor is looking at keyframe sets so this is probably one of my favorite features of motion layouts is this allows you to define different key points of a transition and it basically assumes that like a timeline of events are happening so you can assume that at 0 we are starting out our transition and at points 100 is the end of our transition so that is the sort of frame positions that we have and now what I want to do is in my animation at 60% of my animation I want to define that my alpha of my button should be fully invisible by that time so I might have in my start and in constraints sits as the Alpha starts off as fully visible and at Z at a hundred or the resting state the end States it is set to fully invisible but my animation I actually want that that transition to finish a bit earlier so at 60% I want it to be fully invisible so this is kind of how this transition would go could go from 0 to 100 and at 60% of this animation that the button would really be fully invisible and then for the rest of that duration of the animation from 60 to 100 the button would be fully invisible but it has already happened between 0 and 60 so this is kind of builds up a really massive superpower that you get when you work with these views and the animations because now this allows you to sort of trigger certain things at different points in your animations so if you wanted to have a button that starts often that's not visible and then something else comes in a certain time and something else goes off the screen at a certain time using keyframe sets and key attributes and key positions you can do that quite easily with this sort of concept of the timeline and the frames that we have to work with so there's these are like the key sort of concepts of using motion labs so we have our constraint sets our transitions and maybe a little bit deeper keyframe sets so once we've got these sort of like blocks of information in our minds we can actually go and look at how we use the motion editor so in Android studio for beta there is now a new you our tool for editing and previewing motion scene files and this makes it extremely powerful and a lot easier to work with motion layouts and actually make and build these awesome scenes within Android studio like I mentioned this is however only for Android studio 4.0 beta so there are to be expected a couple of bugs but working with motion scene and motion layouts is a way we're easier than actually writing up all that XML that we just looked at but I believe it is important to understand and know that XML because at some point you're probably going to run into a bug maybe and you probably want to edit this XML and actually know what you're doing in the XML and merely just use the editor to create and like adjust things a little bit easier and preview your animations so it's still important to know exactly how the editor works I mean how the XML works but looking we can actually dive into let's look at how we can use this editor and make things really great within Android studio itself so let's dive in okay so let's have a look at how we go about creating a new motion scene in Android studio so the first thing we're going to want to do is create a new scene so we're gonna say accuracy erosion scene new just for my own sake and we can at this point we can just save the constraint out and we are going to now right-click on this constraint layout and say converts to motion layouts we are now going to say yes I do want to actually this new motion scene because it automatically creates this motion scene file we can now add that also obviously one that tickets and it's also now created this motion scene file for us so you can see now this motion scene already contains our constraint set so it contains a start and the end one and this transition that we already spoke about so let's have a look at this editor that we've been our gods so now when we enter into this mode in Android studio when we have a motion layouts you will see that now we get this new sort of like editor on the side that we can look at so this actually defines all the different states that we have so we have our start in in constraint sets and the transition so if you click on this this is the transition between the two and this is like the base motion layout state that we're going to be working with so in our layout we currently have nothing but I'm going to just add an image view so that we can work with it and we're going to just set it to image that we have ready and in my base motion layout state I'm gonna make sure that I've got that selected and select this imagery and I'm just going to give it a size of 50 DP and a height of 50 B P that's small it's actually make it a bit bigger 100 DP okay so now we have our image view it's not constrained at the moment in this space motion layout so we're going to actually add some constraints so I'm going to constrain it to the side and the top so now you can see we've got these two constraints set let's add a bit of padding so we can see it a bit better great so now we have these two constraints it's that we've got and the image view is constrained to the top at the top left corner of the screen so what we want to do in this animation is we want to actually animate this image view from the top to the bottom corner so what we're going to do is in our end constraint sets we're going to select this as in state we want to be making sure that we're editing this the constraints on this state and not on the motion adds or the start because this is applying the constraints to the certain states so what I'm going to do now is actually select this in state and select this image view and then I'm going to drag get these drag handles I think there's motion outsource it to let's just have a look it set the width of the whole thing so let's just set this to match appearance and match parents look at it again and this we wanted to set to 100 DP and 100 DP okay so let's go back to the design view that's exactly what I wanted now so now we have this in States and we once you actually remove these two constraints and we want to constrain the side and the side to the top and but at the top and side of it so let's make sure we've selected end States and then drag that to the side and drag it to the bottom and we're going to delete these two constraints so the top and the side constraints and now we've got these to sit on it we also just want to make sure that the width is still set at a hundred a hundred and we're gonna go back to the scene and see what's happened here with this a hundred that it was to be a hundred so now we can see inside our inside the design we have the start and the end sets and the start constraints basically if you don't specify any constraints it takes everything from this base constraint set that you've defined in your layouts so we didn't need to define any constraints because the start the start state is what we've defined in motion that but we could if we wanted to define the constraints here and then change them for the end state as well so now we have these two states and now we want to transition between these two and we want to actually see what happens when these two transition so this is where the real power of the motion layout editor comes in so you can now actually play this transition inside Android studio so now you can see when I press the player button it's actually animating between these between these two constraints sets and you can see this even in the slide animation on this arrow here and it shows you exactly at what point in this animation it's going through you can also speed it up if you wanted to make it a bit faster or slow it down if you actually wanted to see it happening a little bit slower so this is the basics of a motion scene so we actually have now an animation that is animating a view between the start in in states and you can see that it wasn't actually that much code that we had to write so we didn't actually write much code we just used XML so in our base emotion layout we have just an image view with some height and width and height and constraint sets on it and then in our motion scene XML file we have the start and end constraints and the end constraint that was generated is now - now constrain this view to the bottom and the end of this parents and we are also just sits in the heart we can also just make the heart smaller if we actually wanted to animate it to be a smaller size as well and that will automatically be handled for us and we can preview it here in the design view as well so if I make this a bit slower now you can see it's actually also making this view smaller as it goes and that's basically all we needed to do in order to get this motion scenes to trigger or to happen so if we wanted to actually have like an automatic maybe unclick of this image view we want to automatically do this transition we can do that by adding a click or swipe and let that we have so if we add this or click on this we can add a click handler we specify the transition that we wanted to run so the start in transition and the view that we want to click on is the image view and the action and we'll just be added on to this so now we can see if we've clicked on this transition we can see we have an unclick that's been added and the target ID is the image view and if we have a look at our motion scene we've now also got this onclicklistener that's added as well and we can obviously add a bit more things if we wanted to like their toggle if we wanted to go from in to starts but you can add these sort of click handlers or swipe listeners in the XML and or with this editor using that plus button and you will automatically get that transition so let's talk a little bit about the keyframe sets and that nice feature that we looked at a little bit in the in the presentation so if we wanted to maybe at some points of this animation we wanted to set this view to have a bigger scale so we wanted to like as transitions in the middle of this go a little bit bigger and then go smaller again towards the end we can do that by add something to this transition where we click on this little create keyframes button and we can set a key attributes we can set a key position like I mentioned there's a bunch of different things that you can add onto the sword like force pursuits and keyframe but at this point we'd probably just we just want to use an attribute because we want to change the scale of this of this item so we add a key attribute we say we want it to be on this image view and at position 50 so halfway through the animation we want to animate the scale X so we want to scale it bigger so now we've seen this item is in here we also want to just change this scale to be two times the size and now we can also add let's just add another one for the X&Y image view to scale x position 50 ad and now we've got this one as well and we want to make the scale 2 as well okay so now we can actually pull and drag this whole transition and see exactly what's happening as it goes along and you can see at that sort of midway point this view is like double the size that it was when it started right you can see now it's like quite a lot bigger and then it transitions it becomes a lot smaller again as well and we can play this animation and see this sort of cool effect that it's created so starting out small scaling up and then getting smaller and this is basically just done with a keyframe so let's have a look at what it creates it for us in XML so we have this keyframe set that's defined inside this transition object and we have set a key attribute so the key attribute is on that image view that we've created it is taking up at frame position 50 so halfway through the animation and we are setting the scale X to be double the size that it was and the same thing for the scale wire of this image view so you can do other things such as like alpha animations or if you're using positioning you can now like change its position to be a little bit off so it can go off the path that it was traveling on and you can do a bunch of really complicated thing using like key cycles and keyframe triggers which we won't go into in this presentation because there are a little bit deeper into what motion Lao can do and maybe not so necessary if you're just trying to get started with it so that's basically looking at the basics of motion layouts if you wanted to add a few more constraints it's so you could either just go into XML and creates a new constraint set by creating it there or you can use the motion editor and you can actually add and say it creates a new constraint set so if I wanted to say and this is gonna be the final image States I like to name them States you know so that's what I think they're kind of based on and at this point you can also base a constraint set on a certain previous constraint set that you've defined so by default it's defining it out on top of the base motion layouts constraints that we've defined but I can also base it on certain things so if I want to take all the constraint sets that are set in the start constraint sets and plus a few more I can base my constraint set on top of the start constraints if I wanted to but in this case I can just say I want the motion labs so now you'll see another state is added to this little editor that we have over here and if we wanted to define transitions between the two so say in the states I wanted to go maybe this is like an intermediate progress state or maybe it's just like a different end state for something I can also define in this editor a transition between these states so I can add by this clicking on this button I can give this a new name so I could transition starts final image States and we're gonna go from the start state is start and the instead is final image States and you can also automatically do certain things if you wanted to but for now we'll just add it like this and now we've got the start and final image fun - your final image States transition that we've defined so let's actually change some stuff in the final image States so in this state I actually wanted to go to the bottom nothing too complex for this example I wanted to go to the bottom and I want to remove this constraint at the top so that's just animating to the bottom so that's the final image states and the start stages at the at the top now if I'm going to transition between the two I can actually click on this transition and I can watch this animation happen in place so a really really easy way to add different animations you can obviously add a bunch of different things like image views takes cues you can animate pretty much anything and you can add and I mean these can get as complex as as you want to make them but the basics are that you have these sort of states that you have in your in your motion layout that are defined and you have transitions between these states so they can go back or forth or you can define multiple transitions if you want to you can have automatic clicks that transition between these two states so you can automatically go and do this animation and also what we learned is on these animations or on these transitions we can see it suits and key things that will happen during that transition so in this case it's a scale up and scale down at 50% of animation but we can do multitude of different things we can sort of like at the start of the animation make sure something is complete and then towards the end do something completely different with some other elements on screen and that's how you can build up those sort of complex animations that we saw at the start of this presentation where we have a bunch of views coming into the screen and then at the end one view pops up and like lands inside at a later point in the whole transition that's happening and that's pretty much the basics of using motion layout so I hope this video really helped you learn something and I look forward to seeing and hearing what you've built with motion layout so feel free to send me images or videos of what you've made and tag me on twitter a tree guru I really like seeing what people have made with their creations or with some of the videos that they've learned from me and that's it so thank you very much you

Channel: Rebecca Franks

Views: 27,374

Rating: 4.9391379 out of 5

Keywords: android, android development, motionlayout, asyncandroid, android studio, motion editor

Id: mR7TqG2gVJs

Length: 28min 45sec (1725 seconds)

Published: Wed Apr 29 2020