Motion Layout in Action | Android Studio Tutorial

uh hello there and welcome back so uh in this video i'm going to show you how to create one basic example using a motion layout so for those of you who are not familiar with motion layout motion layout is a new class available in the constraint layout 2.0 and it's created to help android developers manage motion and the widget animation in their application okay so i have already created the one basic example and here we have just one activity and this simple layout so first let's get familiar with this layout so as you can see here the ruth element is constraint layout and in order to use this motion layout your root element needs to start with a constraint layout and here as you can see we have a one image view and then we have a one title which is actually a text view then we have a scroll view and inside this scroll view we have one simple text of course and this is just a little bit longer text so if i open that application you can see that we can scroll this text down below and so on and in this video we're going to make a motion layout so we can actually decrease the height of this image and we can increase the actual size of this text so we can read that even better so we can show this text on the whole screen and have a better look on it so the first thing you need to do you need to check if your uh gradle build file has this constraint layout dependency so from android studio 4.1 i think this dependency is uh included in your project by default so at the moment of uh recording this tutorial i'm using a 2.0.3 version and you just need to be sure that you have that okay so we will close that for now and let's open up our layout so the first thing you need to do you need to click right click on your layout and then you need to select option that says convert to motion layout so press that and click convert okay so now you will see that the new motion layout editor appeared on the right side here and the first before we get introduced a little bit with this editor let's get into xml code so we can see what changes have we made here so the first change is that our root layout is now a motion layout and this motion layout now contains one attribute named layout description and it contains this activity main scene so this is a new file which was automatically generated by our motion layout and as you can see here inside this xml directory we can see this new xml file so we're going to open that and i'm going to talk about those elements inside this xml file a little bit later when we actually finish creating our motion layout but for now we're going to skip that so let's get back to our activity main layout and let's select this design here okay so uh the first thing you will see here those are the three actual rectangles so the first one represent our actual layout and those two represent the actual state of our layout so this is the start state or start end point and this is the end end point okay so uh we are going to modify this end endpoint and our start endpoint will look something like that okay and you will see when we actually start uh creating that layout and on the top you can see this little arrow and that's basically a transition so we're going to create some key attributes later in this tutorial so you will see and okay so here on the top you can see one image that says a cycle between layouts and when you press that you will see that a new section will appear here we can press that once again and that section will stay now on the left side and when we press again it will disappear so i'm going to press one more time so that section can be located right here below this this endpoints so what we're going to do i'm going to select this end end point and i'm going to select this imageview okay so uh now on the right side here we're going to change some attributes of this image view in this end endpoint so for example default value of our imageview layout height is 280 dp and i'm going to change that but first i want to remove all constraints here okay and now i'm going to set that to zero so zero dp and as you can see its height will not shrink completely and that's why we need to set this not to 0dp but 1dp instead okay so now basically we're going to see one line here on the top but don't worry we're going to hide that completely so as you can see when we select this end end point we are not going to see this image view anymore and when we select this start endpoint we are going to see it so because this is a default or a start endpoint and we're going to modify uh end end point uh this time so from down below you can also select all of those uh views inside our layout so we have background image view we have title and scroll view but in this case we're going to only work with our image view so we have changed its height to 1dp and now it's time for us to add some more animations to it so first we need to select this transition arrow so press that and here we're going to select this little icon that says create keyframes so from here we have a few options and in this video i'm going to focus on a key attribute so uh press that and here we're going to see a new window which will prompt us to select the view which we want to animate and in this case this is a background image view and for the position uh keyframe we're going to set that for 100 for now so the keyframes are actually scoped here in this layout editor in this motion layout editor so uh we have keyframes from 0 to 100 so 0 is the start point and 100 is the end point and here i'm going to set the 100 and for the attribute i'm going to select alpha for now so i'm going to press add and here you will see that a new attribute is added inside this transition section and now on the right side here we can see the actual alpha value and the frame position so the frame position is 100 exactly as we have specified and for alpha value we're going to change that to zero okay so now we can move this arrow and you will see that this alpha is located at 100th keyframe and we can move this arrow on the left side or sorry on the right side and you can see that this imageview will shrink its height and it will also have its alpha value set to zero until we reach this keyframe of 100 so as you can see this is how this animation will look like okay so uh when we go from 0 to 100 you will see that our height will decrease and this opacity will increase slowly as we proceed further to this 100 keyframe okay so it looks amazing and also we can add the one more keyframe or key attribute and this time i'm going to use the same alpha but for the position i'm going to say 50 okay so we can add that and then now you can see that we have two keyframes so on the 50 and on 100 okay and now we can open up this activity main scene and here you will see that those two key attributes are already defined here automatically by our motion layout editor and you will see that our first key attribute has the frame position of 100 and alpha to zero and the second one has a frame position of 50 and also we're going to set this value to zero okay so now when we move to our activity main and when we try to uh to move this arrow you will see that our image view will disappear even faster so as you can see this value changed even faster so our image view disappeared a lot faster than before so that's why we have added those two uh key attributes on 50 and 100 keyframe okay so next we're going to add two more key attributes and this time we're going to apply uh scale x and this time i'm going to set that to let's say maybe 100 okay and let's add one more this time scale y okay frame position 100 as well click add so now when we try to move this arrow let's see how our animation will look like okay so let's move that okay so after that i'm going to select this attribute scale x and from here i'm going to set it to 0 and i'm going to select scale y and i'm going to set that value scale y to zero so our image view will shrink to zero when we reach this keyframe position of 100 so let's check it out okay so this is the animation which we are going to get now okay so uh not only that we have inserted this alpha animation we have also used the scale x and scale y to decrease its width and height when we actually go through this transition and you can see in this preview how will that work so it looks very nice and the last thing which we need to add here is actual swipe handler so you will see this little icon here on the top that says create click or swipe handler so click that and in this case we're going to create a swipe handler so from here uh select the transition so start to end that's a default then for the drag direction we can choose which direction we want to use and in this case drag up so the anchor side we're going to set bottom so we want to be able to swipe from the bottom of this image view and for the anchor id we're going to select our actual image view so this is the id of that image view and click add so now we have added this uh swipe uh gesture as well so let's run our application and let's see uh how will that work okay so here you see our scroll view and one text view inside and we can scroll that all the way to the bottom and the top but also now we have implemented the motion layout so we can actually increase the overall width and height or sorry the height of this scroll view to match the parent on the top so let's try so click and drag and as you can see it works perfectly fine so this is just one of the many animations which you can add to your project so you can just swipe that on the top and you will see that this textview now will have even greater height so you can actually inspect this text better and down below as well so it works very smooth so of course this was just a basic example of using a motion layout and there are a lot of more things to cover but uh i'm not going to focus on all of that inside this video i might create new videos about each and every important uh feature of this and if you want to see more videos about this motion layout or some specific functions of this motion layout please comment down below and tell me and now we're going to check this activity main scene and see some of the main attributes or elements inside this file so on the top we have a motion scene so motion scene is a xml resource file that contains all of the motion descriptions for the corresponding layout and to keep layout information separate from motion descriptions each motion layout references a separate motion scene so this is the root element of our file here then down below we can see one element that named the transition and here we are basically uh defining our constraint sets so we have constraint set end and constraint set start and here we're just basically referencing the ids of those constraint sets and as you can see those constraint sets are located down below so we have two of them start and end and also we have the duration of our animation we can change that accordingly of course so inside this transition we have a keyframe set and inside this keyframe set we're defining all our keyframe animations so for now we have added the four of them so two alpha key attributes and one scale x and one scale y and from here of course we can change their frame position and of course we can target the different views as well then inside this transition animation is a second element we have a on swipe and here we have just defined the touch anchor id which is actually our image view and we have set a touch anchor side to bottom so we can actually swipe that from the bottom and at the end you can see two different constraint sets so we have first with the id of start and the second one with the id of end so this start basically defines the actual default state of our layout and this end is defining the end state of our motion layout so here as you already know we have only animated our first uh and only uh image view and that's why we have only one constraint here which is basically our background image view and the end attribute of this background imageview is a 1dp in height and of course it's a layout with which is a mandatory as well so now you saw one basic example of how to use a motion layout and i know that a lot of you have asked me to create one tutorial about it so here it is so if you want to see more video tutorials about motion layout and some of its uh great functionalities as well like those key attributes and key triggers key cycles key positions and so on then leave comment down below and tell me and of course in the future videos i might create some more complex uh motion animations and for this video that will be all so uh thank you for watching please like this video if you find it helpful of course and see you next one

Channel: Stevdza-San

Views: 31,396

Keywords: motion, layout, in, action, android, studio, tutorial, guide, how to, anim, animation, animations, app, constraint, key, attributes, transition, screen, view, views, widget, convert, scene, motion scene, constraint set, set, move, resize, scale, scale x, scale y, alpha, opacity, rotate, rotation, xml, visibility, elevation, translation, translation x, translation y, duration, complex, simple, easy, start, end, motion layout, editor, drag, swipe, click, attribute

Id: ROkKPgXpd1Y

Length: 14min 19sec (859 seconds)

Published: Sun Nov 01 2020