Layouts In Android XML|Constrain Layout, Relative & Linear Layout| Android Development Tutorial 2022

hi everyone i hope that all of you are doing really great so in the previous video what we have seen is like what are the basic folder structures and how we work with android studio how to create a new project and all the basic things right so uh that was pretty much interesting like to know about all the things how the things actually work that uh in which the id we are going to work with right so in today's video what we will be seeing is what are the different layouts like the layouts are the basic things or the starting thing of an xml file or a designing part of our screens so that is uh very much important to know about the layouts and how we design it so uh we will be just starting with the layouts today so let's get started okay so there are different types of layout okay now we here it is by default given constraint layout because android developers uh means basically use the constraint layout because it is easy to use and it is more preferable for using so it is by default given constraint layout now other than constraint layout there are uh three different layouts one is relative layout one is linear layout and other is grid layout now i will be showing you all the three layouts one by one as i move into it okay so now uh the texture let me tell you something about this thing the textview is the widget okay now this textview is a simple widget uh that we can see in our screen so this one is done so i will come into this later first let me explain the layout part first so what i will do is i will open our figma so now i have created all the designs in the figma so i will share the link in the group so from that you can access the figma file you can check it now basically all the designing part uh we do do it in the figma because uh the designs like first ui is being designed then we start working on the android app okay so the designing part is done in figma it is not necessary but i prefer figma there are other apps also like adobe xd and all but i simply prefer figma so first you have to like those who don't have figma just you have to create a figma account just wait i am showing that yes so you can open your browser and simply type figma dot com okay and hit enter so now yeah it will open the official website of sigma now once you go to this one now if you have not created figma account you have to do the sign up click on the sign up button at the top right corner so once you click it it will want your gmail id okay so now you have to give the gmail id or you can also do it with email and password now after doing this thing uh you can do continue with google and now a pop-up will open now fill up all these things that what they are wanting uh you can do that one and now once you do this one your figma will be opened now the link i will be providing you click on that so this one you can access it okay so now let's see that what are linear layouts now see the profile app that we are going to build is this one as i told you at the early only early stage only that we are going to build through this app so i have made this wireframing now what is wireframing like the app we want we define the layout first like how the app will means how the layout is going to be done like so it will be easy for us to create the app so for that case we define the layout here okay it is called wireframing so figma is a good place to do the wireframing so now let us understand the layout first okay so the first one is linear layout let's check this one yes so what is linear layout now see uh if we want our layout like we want the things to be one by one like first this one then this one then this one like in the table format uh in the one by one format if you want that is a linear layout okay so in the linear layout there are two different layer we know that there are two different things like vertical and horizontal when we specified the linear layout with vertical so it will align its all the means all its item like this thing and if we align horizontal so it will come like this way okay so now let's take a quick example in this side and check that where we use this linear layer now see you can see the image is here after that some text is here some text is there some text is there okay so this whole thing is a linear layout means we can do this thing through the linear layout only because we want this thing one by one only so you can simply use a linear layout right like this format only it is like one by one format so we use a linear layout uh now take this example also if you take this example this all these items are one by one you can see so for that case we need linear layout okay so this is the linear layout and now let's check the linear layout with the ah vertical now uh till now this all these things are vertical uh it is one in the vertical format like upside down okay and in the left and right now see uh horizontal is the left and right okay so in the left and right we are using this thing like uh this one and in the right side this one so only this thing inside this thing there are two things so this is in the horizontal part like see one by one one by one so this is the horizontal part of the layout okay so this is why we use the linear layout horizontal and vertical so the whole thing is a linear layout in the vertical part and this thing is only in the horizontal part this inside this part okay so i hope that linear layout is clear to you now now things come is relative layout okay once i uh uh i am thinking that i will tell you first in this design part then i will move into android studio to show you like that how we do this thing now in the relative layout what does the what does this thing means and the relative layout we have some items we can like in the linear layout if you want to align this one like in the first thing if you want to align it at the bottom like if you want to take this to the bottom you can't do it or like if you like if you want uh this item like suppose you want the last item to be like here you can't do in it in the linear layout okay it will be means it will be arranged one by one only means it will be added one by one only you can't change it so that is a linear layout so in the relative layout what happens is if you want to arrange like something like if you have a button we want to align it at the bottom so we can simply use the relative layout now it has different it has different parameters like align bottom of parent align start i will show you the parameters now this is the relative layout basically like we can change its position like we can take it to here we can take it to downward so this is the relative layout basically like we can take it to any of the positions but in the linear layout we have to do it only one by one we can't change its position from one place to another like how we write the code it will appear that only okay so that is the linear layout that is and this one is a relative layout like i hope that you have understand that for what case we use a relative layout like if we want something at the bottom we want uh something at the top only then we use relative layout okay and in the grid layout it is really simple now see in the grade layout like we have seen the grid system okay rows and columns mixture of rows and columns so for that case we use the grid layout like we want like let me show you yes so if you see this calculator app now see this thing this whole thing is in the grid layout you can see the format so it is in the grid layout so for this case only we need the linear layout okay sorry for this case we need the grid layout okay so this is the create layout now let's move into the android studio and let me show you uh all the layers one by one so in this i am i have came into the constraint layout part uh so let us understand how constraint layout works so see in the each layout there is a layout width and layout height now width means the what is the width of this layout actually and what is the height of this width okay uh so the inside this layout width there are uh three things basically now see it is given match pattern now what does match pattern mean means is the way this will be full like the screen how much the screen size like any phone any size it will uh match the whole size uh or means it will match the whole width of any phone okay so that thing means the match parent okay now one another thing is also the wrap content now i am not uh showing this one uh with the layout just wait i will show you the with the widgets like takes view i will show you the uh that thing so we have two things the with layout and with height okay so in the text view now it is wrap content and the height is also given wrap content now i told you wrap content means is it will occupy only the space that it is actually okay now if the text is like something more after hello world something more i am giving random things so see it will be accordingly like what is uh it actually space it takes so it will be accordingly so that thing means wrap content okay now if you give it match parent so see you can see simply like it is taking the whole width of the screen okay so this thing is match pattern now i am giving it wrap content only so match pattern do you know when it is clear i think that it will match the whole screen uh wrap content mint it will occupy only the space it needs it means only the size it is originally so it is that now see in the constraint layout we have three things now you can see the blue dots are there now i have i am removing this first weight now so you will see all the blue dots are being removed okay so now if you pull this one like if you click on this many of us what we do in the beginning is we pull through this like we do this one like when i also started i did through this only because it was more convenient for at the beginning but uh in professional level like when we in like now i am doing it through the this part only this code part only okay so you can see that these are the constraint so now let us understand what does this constraint means actually see when i constrain this thing with the top so a spring-like thing appears means when i let me do it again wait now let me constrain it to bottom now i am taking this thing i am pulling it to button now what does this thing means is it will attach to the bottom only okay now you go to any of the phone like you run it on any phone it will always stick to the bottom so this constraint means you can see the code is coming here constraint bottom to bottom of parent parent means the whole layout pattern means the whole level the four sides in the figma file also i have told you that pattern means this four sides see here i have given shown in the parent this is the patent okay so it will automatically align itself to the bottom now if you want to align it to the top you can go through this one also this blue dot but i will write through this code here now if you write here constrain now see this thing will automatically start coming now you can see constraint top to bottom of top to top of now see top to top means uh this one stop and this one stop okay so i will give top to top off and now i will give it parent so see now the spring system has come now this side like what we are doing manually through this it has come automatically okay so the now what this thing means it will align itself through this also means it it is going through this also and it is also aligning it through this also so now it will always come in the middle it will appear at the middle of any of those phone sizes screen okay so you can see the spring and it is for that case only it is like specified with spring now if you want to align it also in the horizontal part so here we will write constrain constraint start this side is the start like the left side is start right side is end uh the top is top and the bottom is bottom so i will write constraints start to start off parent simply i will write parent okay so you can see the blue dot has come here and now if i write constraint top two and not top if i write constrain end to end of parent see it has came at the middle so this is how we specify this thing and we d and designs are done through this only now we have one more thing also we have an id uh we have an id like we give it text now id is to specify each unique things okay like this is the text means this is an widget so to identify it we give an id like whenever we use this thing we give it through id okay so that is for this one now let's move into the constraint layout is done in the constraint layout we only have this type of parameters and now let's move into the linear layout so in the linear layout uh there is one now see in the linear layout when we are moving to this one you can see it is not aligning at the center like in the constraint layout which was there it is not aligning so uh these parameters are not working for in this case so now uh in the linear layout there are is there is a parameter that is orientation like in which orientation we want like in the first case yes so now what we have to do is we have to uh and we have to specify like what is the parameter like what we want the orientation so we can we will be giving it vertical like if you want to align it as i showed you in the design vertical for vertical it is one by one so for that case we will be giving it vertical now whatever now if we give numerous text wait like let me copy this thing and let me paste now you can see it is aligning itself one by one okay now uh there are different parameters like margins and all i will tell you so in the this one it is aligning it one by one now if i give this orientation to horizontal and check it now see it is now let me reduce its size so it will be easy to understand now you can see that it is aligning side by side so this is the difference in the horizontal and vertical so let me give it a vertical so you can see that this is the difference basically now inside each widget inside each widget or each layout there are yes inside each widget there are some parameters basic parameters that are margins and uh padding so let us understand this margin through this design now see i have given here a button okay now understand it through the text view only the height and width i have told you now if we have a button or something like make it a text only okay so margin means this sideways this sidewise what will be the spacing that is defined with margin and uh like we have a unit called dp for any spacing or any pixel related things we give it dp and for size like text size or anything we give it in sp so it will be clear like as we move into it one so margin is specified for this thing like the side spacing and padding means see now the padding means the inside part now it is a text and it is the box of this text padding means how much space will be it from inside and margin means it is from the outside okay so let me show it in the android studio so it will be more clear for you now see now you can't see this one now i will give it a gravity and if i give it center so it will align the whole text at the center see check it [Music] it is aligning this one in the center horizontally as i told you in the linear layout as the things occur one by one so we can only align this thing uh along this okay so it has aligned this text in the center it is also a parameter so i am removing this thing first so now see now i am giving a background first and i will give a color black not black i am giving a purple color it is already defined now you can see that the color is black okay so now if i give a margin like if i give a margin start and i am giving it a 16 db margin start so you can see it is moving with this space little that is 16 db now here i have shown you this is the margin as i given the margin start this one is the start position this is the end this is the bottom and this one will be the obviously the top so now i have given the start now if i give a margin end 16 dp so it is not visible for now because it is small if it goes like this side so it will be visible now i will give a margin top merge in top okay so margin top also let me give it 16 db so now see you can see it is moving by some space and now let me make this one match pattern so you can see that one not match yes match parent now you can see that there is spacing from all the sides and now let's see the padding part now the text it is the background is like with the text only like it is occupying only the space the text size now if i give a padding like if i want some space in the violet color and in the hello world in between it like as i shown you in the design like in the button and this is the padding so let me give the padding parameter so if i write padding okay so there is a padding bottom like padding bottom if you want the padding button i am giving it 16 db see now the violet color is extending and the text is like there only okay now if i want to give a padding top also i will give it a 16 db padding so it will be padding with the top now if i want the padding at the start like i want the edge to move this side more inside no i don't want to the outside i want the inside to move so i will give a padding start and let me give it 16 db now you can simply see that it is working light now what this is the margin the white color portion is the margin outside in the violet color and the text is going inside it is the merge it is a padding okay so now i think that this one is clear like what is the margin and what is the padding part now in the relative layout let me show you the relative layout now in the relative layout see this thing in the relative layout we don't need this parameter this orientation vertical now in the relative layout what the thing happens is this buttons are coming like we have in the constraint layout but the parameter name is different like in the constraint layout we have the constraint top to bottom but in relative layout the parameter is align i have also mentioned this one in here also like if you want to align it to the bottom of the pattern we have to give the parameter align bottom off now see if i write a line see now it is showing align parent top means align parent top means it will align this one means this dot will appear here and align bottom means it will align bottom to whichever thing you want now if you want align parent bottom so i will write align pad and bottom and it takes a boolean value true or false now i will give it true so it will simply go down okay so this thing means it has aligned itself to the bottom now if i give it align top align parent top so in the constraint layout what we have seen is like if we align means if we constrain the both so it is going at the center but in the relative layout it not happens so if i write it through now see it will occupy the whole space but it will not be like in the center it is occupying the whole space okay so to make it clear i have given the background part here so it is occupying the whole space so it is clear now right now uh the relative layout is this only and uh but uh if we want if you don't want this whole space but we want to align this text at the center so let us try it for that one so for that thing there is a code align horizontal align center horizontal and if i give it true it will align through both the sides means in the left side and the right side like what we are doing through constant uh by writing simple single line here it is doing both the things and now if i write a line vertical center and i forgive a true so it is coming to the center now this is the code for relatively how to align it to center but for constraint layout we don't have like separate separate code we have only single code to constrain that thing so yes so that is the relative layout and the linear layout constraint layout also we have done so the last part is the grid layout grid layout i am not going into this because we will be doing in that thing in the calculator app this grid load it is simple we define the grids and we as we write different things it will appear that ways so now yes what is left now so relative layout is also done right so if i the text view is done now see this text view is a widget now if you go to the design now here or this side there are different things text view buttons uh image view all these things are here and now in the widgets also there are all these things progress bar and now for simplicity like those who don't know like you are new to this one so you don't know like what are the widgets so you can see through this one if you want a button you can drag and drop here okay so button will come at this position see here button has came if you want the image you can drag and drop an image it will now ask for an image you can give any image like i am giving this one only now this image will come now if you want a what to say like let's go into the widget see progress bar if you want a progress bar like the circular progress bar we see now that progress but if you need so it will come so all these things are widgets and the code will come automatically in this side like as we write here so this is the widgets i will come into the widgets later only means as we move with our projects we will be using all the widgets what are being used that's all for today guys i would wrap up this one because it had been a long session so if you have like this video subscribe my channel like this video and share it to your friends to get the notification of the next video that is going to be building our first profile app so just subscribe my channel to get the notification and bye bye and have a great day

Channel: Rishav Chanda

Views: 23,592

Keywords: Layouts in Android, android, relative layout, relativelayout in android studio, android tutorial, relative layout in android, relativelayout in android, linear layout in android, Creating First Application In Android Studio, java, android development, android app development, tutorial, studio, First Android App, AndroidForBeginers, Android development series, code with harry python, code with harry c++, Apni kaksha c++, Apni kaksha DSA, Love Babbar DSA, Android basics

Id: A4_0qhhQzGY

Length: 23min 33sec (1413 seconds)

Published: Tue Jan 11 2022