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 layout 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 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 at rigaroo 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 is actually covering constraint layout quite in depth which i recommend watching if you haven't dived into constraint cloud at all because motionlayout assumes a base knowledge sort of of constraint layouts so if you're just starting out maybe perhaps check out layout first and then come back to this motion layout video to learn a little bit more about how to animate with motion layouts so what exactly is motion layouts so motion layout is a subclass of constraint layouts so everything that you can do in constraint clouds 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 layouts 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 scene that you're transitioning and not just like an individual item that you're transitioning with and my personal favorite is that emotional out 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 layout 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 mark and make sure that that is what you want to display on screen whereas with some other animations they're what we call fire and forget 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 motionlad has that advantage of allowing you to seek in that animation itself another nice thing is that motionlayout is backported 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 layout so the first one is a example of a really nice like filtering scenario that i believe was taken from dribble and this this person has taken it and implemented it emotionally out and actually written up a whole great article about how they used it so i definitely recommend checking out that one and then the other one on the on the slide is from the app that i work on every day over and you can see on the subscription screen we have this animation of like all these elements coming together and this sort of bounce 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 layout and just like get to that part where you want to be able to make more and more different complex animations 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 or make sure that you have is that you've included the latest version of constraint layout so motion layout is packaged as part of the constraint layout package and you include the latest version at the moment is version 2.0 dash 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 make sure that you've included this if you're already using constraintlad you might already have this but it's worth double checking and then what you're going to want to do is where you're using constraintlayout 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 it says constraint layout 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 scene 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 going to want to link this file to the motion layout that you've just changed in your scene or your layout so in this example you can see that i have motion layout defined and the layout description tag so app layout description is pointing to an xml file for this 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 the other 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 layout and that is the path that all your views will take during this animation so that's really useful for debugging and just really nice to use and helps write emotions and 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 um with kotlin or java if you wanted to and create it dynamically if you want and what a motion scene contains is a bunch of things so it 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 onto 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 there are like i mentioned a bit more that you can do with a motion scene but we won't dive into too much detail about that because we just want to get started and get our feet um feet a little bit dirty with what we can do with motion scene so this is typically what a motion 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 key frame set we can also have an on click listener and an on swipe if we wanted to and then we also have the constraint sets so a motion scene can contain different constraints 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 constraint 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 at constraint sets and what that actually means inside the motion scene so a 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 a set 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 said we're going to be setting things such as like the visibility is now visible or the 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 concept 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 constrain set end set to the end state and the constraint set start set 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 plane 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 sets so start and end 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 on-click listener 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 or add this on click into the transition object 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 will 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 set 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 layout 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 key frame 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 zero we are starting out our transition and at point 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 end constraints set as the alpha starts off as fully visible and at 100 at the resting state the end state 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 it would go from zero to 100 and at 60 percent of this animation that the button would already 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 animations because now this allows you to sort of trigger certain things at different points in your animation so if you wanted to have a button that starts off and that's not visible and then something else comes in at a certain time and something else goes off the screen at a certain time using key frame 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 layout so we have our constraint sets our transitions and maybe a little bit deeper is key frame 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 4 beta there is now a new ui 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 they are um to be expected a couple of bugs but working with motion scene and motion layouts is way way 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 going to say activity motion scene new just for my own sake and we can at this point we can just say it's a constraint out and we are going to now right click on this constraint layout and say convert to motion layout 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 we want to add that to git 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 now got so now when we enter into this mode in android studio when we have a motion layout 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 uh in constraint sets and the transitions 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 going to make sure that i've got that selected and select this image view and i'm just going to give it a size of 50 dp and a height of 50 dp that's small let's actually make it a bit bigger where did it go 100 dp at 100 dp okay so now we have our image view it's not constrained at the moment in the 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 constraint sets that we've got and the image view is constrained to the top uh 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 our end state and we want to be making sure that we're editing the constraints on this state and not on the motion layout 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 end state and select this image view and then i'm going to drag and get these drag handles i think this motion layout is set to let's just have a look ah it set the width of the whole thing so let's just set this to match parent and match parent 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 end state and we want to actually remove these two constraints and we want to constrain this side and the side to the top and bot at the top and side of it so let's make sure we've selected end state 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 two set on it we also just want to make sure that the width is still set at 100 100 and we're going to go back to the scene and see what's happened here width is 100 that should also be a hundred so now we can see inside our um 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 out 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 play button it's actually animating between these between these two constraint 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 and end state 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 motion layout we have just an image view with some height width and height and constraints set 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 to now constrain this view to the bottom and the end of this parent and we are also just setting the height we can also just make the height 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 scene to trigger or to happen so if we wanted to actually have like an automatic maybe on click of this image view we want to automatically do this transition we can do that by adding a click or swipe handler that we have so if we add this or click on it we can add a click handler we specify the transition that we wanted to run so the start to end transition and the view that we want to click on is the image view and the action will just be added onto this so now we can see if we've clicked on this transition we can see we have an on click 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 on click listener that's added as well and we can obviously add a bit more things if we wanted to like that toggle if we wanted to go from in to start but you can add these sort of click handlers or swipe listeners in 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 uh the keem frame sets and that 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 um 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 adding um 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 on to this or like force but certain key frame 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 and y image view 2 scale x position 50 add and now we've got this one as well and we want to make the scale two 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 um 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 created 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 uh position to be a little bit off so it can go like off the path that it was traveling on and you can do a bunch of really complicated things using like key cycles and keyframe triggers which we won't go into in this presentation because they're a little bit deeper into what motion layer 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 constraint sets so you could either just go into xml and create a new constraint set by creating it there or you can use the motion editor and you can actually add and say create a new constraint set so if i wanted to say um this is going to be the final image states i like to name them states you know that's what i think they're kind of based on and at this point you can also base a constrained set on a certain previous constraint set that you've defined so by default it's defining it 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 set and plus a few more i can base my constraint set on top of the start constraint set if i wanted to but in this case i can just say i want the motion layout 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 this state 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 uh clicking on this button i can give this a new name so i could transition start final image states and we're going to go from the start state to start and the instead is final image state and you can also automatically do certain things if you wanted to but for now we'll just um add it like this and now we've got this start and final image final to in final image state transition that we've defined so let's actually change some stuff in the final image state 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 now it's just animating to the bottom so that's the final image states and the start state is 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 really really easy way to add different animations you can obviously add a bunch of different things like image views textviews 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 and 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 set certain key things that will happen during that transition so in this case it's a a scale up and a um scale down at 50 percent of the animation but we can do a 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 uh images or videos of what you've made and tag me on twitter at 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: AsyncAndroid

Views: 1,990

Keywords: android, motionlayout, asyncandroid, keyframeset, constraintlayout, motion editor android studio, android studio

Id: 9lp99ogC9a4

Length: 28min 45sec (1725 seconds)

Published: Fri Apr 24 2020