YouTube Motion Layout Animation - Part 1 | Android Studio Tutorial

uh hello there and uh welcome back to my new video in this video i'm going to show you how to create a motion layout animation uh which will be very similar to the one you see on official youtube application so i have received a lot of positive feedback from my previous video about motion layout and now i have decided to create one even better example which you can see all the time so this tutorial will have two parts and i have decided to split it up because i know that you guys don't like long videos so the first part will be about creating the start and point and the second one about end end point and if you're not already familiar with the motion layout i recommend you to watch my other video first okay so as you already saw in that preview we're going to create a motion layout animation which will be something similar to the one which we have in a youtube application so this is our project and i have just created the one bottom navigation menu so this menu will have a three items home dashboard and notifications so i'm going to split this video tutorial in two parts and in this first part we're going to create a start endpoint and the next part we're going to create the end endpoint okay so let's switch to activity main layout and here we're going to start creating our layout so the first thing i want to remove this default text view we don't need that and your root layout needs to be constraint layout if you want to convert that to a motion layout later so at this point i'm using constraint layout 2.0.4 and you should double check your dependencies if you have this constraint layout dependency because this is important if you want to use motion layout and this dependency is included by default in a android studio 4.1 and higher so let's close it for now and here first we are going to start by adding a bottom navigation view so let's uh just drag and drop that here okay so for the height i'm going to select wrap content for now and i'm going to constrain that left to right and the bottom so zero here okay and here i'm going to add our menu so bottom left menu and this is how it should look like so the next thing i'm going to add the recycler view on top of that so just drag and drop that here and i'm going to set its default height for now 200 dp but we're going to change that later so i'm going to constrain this recyclerview horizontally with the parent bottom with our bottom navigation view okay so the next thing we need to add one more constraint layout which will basically represent just a background and container and we are not going to nest any views inside that new constraint layout because motion layout does not support nested views and that's really important for you to note so before we continue i just want to change the ids here so uh okay so we already have id here bottom navigation view and here i just want to add a new id so recycler view okay so next we need to find here a constraint layout so it will just represent something like a container or a background and its height should be 250. okay so i'm going to constrain that uh horizontally and on the top with the parent i'm going to set top margin to zero so the next thing what we need to do we need to connect this recyclerview with our constraint layout on the top and we need to set this layout height now to zero db so it can expand in a full height here okay so now i'm going to set the id of this new constraint layout okay it already have id and i'm going to change that to a main container and also i'm going to set its background color so i'm going to choose a 10 opacity of our black color so it will have a color or something like that and here okay so i need to change that id here as well all right so the next thing what we need to do we need to add one image on top of this main container but we are not going to nest our image you inside that instead we're going to place on top of that okay so just let's add one image view right there and here i'm going to select uh for example this one is a background so of course you can add a simple view instead of this constraint layout so it can just represent the one background but that's totally on you okay so i'm going to place this imageview outside of this container okay and now i need to constraint this imageview with this container so i'm going to do that manually down below and before that i'm going to change this id to be a main image view and here i'm going to add the constraints so i'm going to connect constraint start with the start of our main container okay next we have a constraint top with the top of our main container as well and constrained bottom to bottom of our main container okay so it will be constrained like that and i'm going to change its height to be uh 0 db so it can expand in a full height and also i'm going to set here scale type attribute to center crop okay so it can look something like that and we're going to increase its width to match parent but before that we need to add a few more items here or views so next we need to add two image views which will represent two icons close and play so let me add new images here the first one is this close okay so i'm going to again place this image view outside this container and basically i'm going to constrain this icon with our main container so i'm going to do that manually as well and i'm going to change this id to say close image view okay and here let's add constraints so constraint and to end off main container okay next we have a constraint top to top of our main container and the constraint bottom to bottom of our main container okay so that looks nice and also i want to set this right margin to 16 for now okay so next thing i want to add one more image here and i'm going to select this play button i'm going to put this image view outside of this uh main container okay i'm going to change its id to say play image view okay perfect and now i'm going to constrain this imageview with this first image so bottom constraint right there and the top constraint right there so um the actual margin within those two icons should be uh 24 so let's add a 24 here and i need to add one more thing and that is a text view here okay so i'm going to place this text view right there and of course i'm going to put this textview outside of this main container i'm going to constrain this right constraint to display button left constrained to this image view to this main image view and the top and bottom can be constrained here with this icon so that can be centered okay so the left margin can be set to 8 and the right margin to 12. okay so now we can set its layout width to be 0dp so it can expand in a full width here so now i need to change this id of this textview and i'm going to say this title text view here i'm not going to change this default text so it can stay this way we're going to change that later and now i want to add one attribute here name the ellip size and i'm going to set that to end so what does this edit size do well i'm going to show you now so for example let's add here uh some longer text so i'm going to write some random characters and also i need to set this here max lines to one and now you will see that all longer text will display those three dots because it cannot expand anymore because we have specified its uh its width and uh also max lines of one so if the text is a little bit longer then it will display only those three dots okay so that's the the actual this ellipse size attribute and i'm going to remove now this text so we don't need that at this moment and there are only a few more things which we need to add before we um finish this first part so uh as you can see so now we need to hide our bottom navigation view and i'm going to basically set its height to 1dp okay and now it will be basically hidden and also i need to set its alpha value to 0 okay and i need to specify alpha values to some of those items as well so i'm going to add the alpha value to those three views so let me just scroll down below so close image view let's add alpha value here to zero okay i'm going to copy this here to play image view as well and to our text view of course so those views will be hidden when we actually display our image view here here in the full width and height so now i need to expand this image view to match the parent so let me just okay i'm going to change its width to see to fit match parent okay and this is how our first start end point should look like so we have this image in a full width and height then we have this recycler view and our bottom navigation view is a hidden like uh those three views and those three views will be shown uh when we actually start creating our end end point and we're going to do that in the next video

Channel: Stevdza-San

Views: 16,649

Keywords: youtube, yt, motion, layout, animation, transition, swipe, gesture, android, studio, app, tutorial, how to, guide, video, xml, constraint, scene, constraint set, key attribute, swipe handler, frame position, alpha, opacity, translate, move

Id: SHJTbFJEJj0

Length: 9min 49sec (589 seconds)

Published: Sat Nov 07 2020