Constraint Layout - Beginner's Guide to Android App Development

foreign hey guys and welcome back after learning about two types of layouts linear and relative layouts it's time to take a look at the most used and recommended type of layout in Android which is the constrained layout constraint layout is pretty similar to relative layout however it gives us the flexibility of positioning views According to some constraints provided between views and their parents constraint layouts helps us to create responsive layouts and designs for different screen sizes according to something called Flat positioning between views which lets us avoid nesting view groups as we did before with our linear layout now avoiding nesting view groups or layout means more readable code and most importantly efficiency which means that the constraint layout outperforms all kinds of layouts additionally constraint layout has built-in functionality for animations which opens the door for complex designs and UI animations in addition to that constraint layouts provide helpers or minor widgets that can help us on the positioning or the constrainment of a view within a parent when we use constraint layout we would really touch XML code directly as Android Studio Design editor allows us to Simply create uis just by dragging and dropping views within the parent and specifying their constraints on the Fly now moving to our Android Studio project to create our layout so you're going to create this layout here using the constraint layout and this is going to be the first video related to the constraint layout because we're going to have a second video maybe third video as well talking about the constraint layout and the properties of the constraint layer now without any further delay let's just uh change the relative layout here to a constraint layout now here we're gonna first create our image view so let's just go to the design tab learn how we can use the palette instead of just writing our views by hand so if you go to the design tab here and open the palette here we have all the views that you can use just by taking them dragging them and dropping them on the canvas and they will be just simply added to your view like this here now let me just take the first thing is the image view so if you don't find your desired view just go here and type your view so I'm going to take an image view drag it and drop it here and whenever you just drag your image view you have to at least choose a source for that image view so we have a couple of sources here related to our project so I'm just going to choose the sample data here and it will be added with the tools attribute so attribute starts with tools so any attribute that starts uh with the tools is considered to be not affecting the view at the runtime so whenever you run your application your imagery here will be empty and nothing in there so pay attention that tools any attribute that start with tools is considered to be only effect in the view at the design time and not at the runtime now you can see once we created our image view we have an error and if you just hover over the image view here you can see that it tells you that the view is not constrained and it only has a design time position and wants to run your application The View will move to the zero zero position which is the very first start of the screen so what does that mean well in constraint layout you have at least two specified constrainments for the view one place or One Direction vertically and One Direction horizontal and if you didn't and if you just drag The View and put it anywhere on the screen without adding or specifying any constrainments for that view then your view will move to the zero zero position once you run your application and it will not be placed correctly within the pad so to specify construments we have three ways the first one is by obviously just typing the attribute or typing where this view should be constrained to so we have couple of attributes in constraint layout so for example I wanna constrain the start of this view to the start of the parent so the way to say this is just by calling the layout underscore start constrain start of this view to this first sentence here goes to the view to constrain the start of the view to the start of the Target or the start of the parent here so our Target here is going to be the pad as you can see it just moved to the first very start of the parent now you can see we still have an error because we just can't stream it constraint constrain this view only one place horizontally we have to add a second place or a second Direction vertically so let's just constrain the bottom of this view to the bottom of the parent by using layout constrain bottom of this view to the bottom of the parent and you can see it just moves to the very very bottom uh very bottom of the parent and the error is gone from the image View now the second way to constrain the view is by just dragging these points here from design tab so let me just delete all the attributes that we have added and go to the design tab here let me just zoom in by Ctrl and moving these Mouse scroll forwards and you can see you could just take these points and attach it to the parent or attach it to the Target or it has to do the view if you have another view within the parent so here I'm just going to attach the top of this view to the top of the parent then the start of this view to the start of the parent maybe the end of this view to the end of the parent as well and you can see Android Studio added these three attributes automatically to our image view here and you can see just constrained uh centered horizontally in the pad now the Third Way is by using the attributes pane so once again let me delete all the attributes and let me just put it here and go to the design tab once you go to design tab the attributes pane will open if it didn't just click on it and here you can see in the attributes pane we have the current ID of this view we have the declared attributes for this view along with the constraint the widget which is just a helper to help you constrain your widget and you can see also we have other attributes other possible attributes that we can add to this image view here now let me just go back to the constraint and strain view or constraint widget here and you can see you just can click all these uh plus icons here to constrain your object or you can strain your image view so if you just click the start of the view it will be constrained to the start of the parent and here for example the int then the top it will be constrained to the Barrett automatically and it will add the attributes for you if you go back you can notice these values here which represents the margin of the view so this view is has a margin of 159 from the top to the top to the top of the parent and could simply just change the margin here or just type your desired value like 18 for example and it will a tool change automatically and it will also take effect here in the views attribute okay now according to our layout the image here doesn't have any margin so you could simply just remove the margin by setting the left margin or the start margin to zero the top margin to zero and lastly the end margin to zero as well as the width so in the original layout the width is filling the whole parent so we could simply just say match pad or alternatively we could use the 0dp so giving 0dp to the width and height within a constraint layout is something called match constraints and it makes the view match the the whole Space of its constraints what makes the 0dp or the match constraints different from the match parent is that the if you pays respect to its constrainment so to understand this more let's have an example so I'm just gonna remove all the constrainments of this view by removing the attributes or simply just right click and clear constraints of the selection or you can also just click on this icon here now here say for example that our image is just strap and wrap and you're gonna have a view added to the design of the parent here I'm just I'm just going to just drag the button and put it here now I'm just gonna constrain this to the start of the parent then this one to the end of the parent and then constrain both of these views together now let's just say that our button here is going to be match parent instead of 0 to B so it's going to be match parent and you can see that the button just fills the whole space no matter if we have a view in the way or not so it doesn't pay respect to other views within the same line however if you change it from match parent to 0dp which is called match constraint you can see it just pays respect to the constraints of this View and it just fills the whole space that it needs to really fill it so it doesn't overpass or overlay over other views let me just now delete the the button and again let me just clear the constraints of this View and constrain our view here within the parent so instead of just dragging the first to the first of the parent and the end to the end of the parent we could just simply right click go to Center then choose horizontally Center in parent and the our constraints will be added for you now let me just add the start and once again let me add d0dp now here I'm going to have a fixed height to our um to our image view something around 150 DP yeah 150b is good because we're going to have an image later here and our image is going to be from SRC adruple I've already created the images I'm going to put a link to the description for the original images on Pinterest so I have drawable movie cover and let me just delete the tools as RC compared because it's affecting the real image and you can see our real images here so our image here within our actual image view doesn't fill the space though it fills this space but the image ratio is not filling the available space so just to resolve this issue we have an attribute called scale type and here we could choose different type of scales to scale our image within its bound so I'm going to just choose Center crop and you can see the image is filling the bounds of the parent and maybe here I'm just going to increase the height a little bit more like 250 DP and I guess it's 250 D DP now it looks cool now moving to creating the other image view or the movie poster in this case so I'm just going to go to the design tab and drag and drop the image choose Temple data click ok and here I want the image to be somewhere here on top of our image View so I'm gonna first attach the end of this image to the end of the view or the end of the parent both will work then the start of this image to the start of The View and you can notice once you take two opposite direction when you constrain object vertically or horizontally and this scroll bar here will appear and it used to determine the bias something called bias or how far the view is from its constraints so if you want to determine how far the view is from the start of the parent or the start of the image view just simply drag it uh to the start of the image View and the value is starting from 0 to 1 so 0.1 here resembles a ten percent of the bias here so 10 is good now I want to just add start of at the top of this view to the top of the parent and the end of this view to the end of the pad and here again we're going to specify the biased value so maybe around 25 22.4 let me just add it from here 0.25 is good now let's add a fixed width and height for this value because our poster is quite big so I'm just going to add some fixed size it's going to be tangler rectangular size so maybe width is going to be 100 DP maybe 150 DB 150 DB and for the height is going to be 250 DP F250 DB is quite good now let's add our poster so SRC at Global movie poster and let's delete the tools SRC and it will be added now again it doesn't fill the whole Space so let's use the scale type attribute again and choose Center crop now moving to creating other views we have to add the texture view so I'm going to open the palette um palette drag and drop the texture view from the text and then we're gonna have to create an icon to save the movie for example going to the project right click on the app Vector asset the save icon just go here and type save okay and name it IC save next and finish now here I'm gonna drag an image View image View and choose the icon so okay once you add the icon once you added anything rather than a sample data it will be added as an image rather than a tool so to be added as a vector or an image rather than having a tool attribute now okay let's go to the design and to try to constrain these two uh views in this space so you could simply just drag the first of this view to the uh to the end of the image and then the end of this view till the end of the parent then just connect them together by creating a constraint between them but instead of doing this by your hand and then adding some bias to The View and old stuff you could just simply rely on understood you to do this job for you so let me just select both of these views right click clear constraints of selection and just put them where you want to put them and then select both of these views and right click and choose chains so what chains does it just it constrain these views equivalently within the same space horizontally and vertically so if you for example choose the create horizontal chain here you can see both of these views are constrained correctly leaving the same amount of space around them so just constrained within the occupied place here correctly now what you want to add is to make them constrained from the top to the bottom of the image again for this one top to the bottom no margin then the bottom of this text view to the bottom of this image similarly for our icon here so for the chains we have couple of modes for the chains if you right click and go to the chains again you can see we have horizontal chain style we have the spread which make them as the way you see them the default mode we also have the spread inside both of them you can see just pushed to the end of the constrainment and similarly we have the last one which is packed and it make them very close to each other now what we want here is to have the the spread inside mode which put them at the end of the constrainments so here I'm just going to add some margin to our text view around 16 DP and some margin to our her icon around 16 DP as well and then let me just edit the texture view from the code tab here so our text view is going to be bold Texas style is bold then the text size around 22 SP then the text which is going to be the name of the movie enter the Stellar in this case tiller and that's it so here what we have left is to create the buttons to rent the movie for example or buy the movie here again gonna grab two buttons and again creating chains are creating a chain with these two buttons right click chain create horizontal chain then [Music] constrain them to the image I'm gonna have to add some margin to the top of both of these buttons like 16 DP here as well 16 DP and let's change the text of these two buttons here is going to be print and the other one is going to be by now we have to add the ratings uh the category of this movie and some description so here is going to be a lot of text reviews actually this one can again and both or all of them will be packed within a chain so I'd have a great horizontal chain again let me just move or zoom in and attach them to the bottom of any of these views doesn't matter they have the same same space now we're gonna have to add some padding like 32 for each of them 32 [Music] and here for example this will only resemble the rating I'm gonna make them all italic italic the text is going to be somewhere around 4.9 here textile is italic as well and the text is going to be for example family and here waiting on Rotten Tomatoes website [Music] and finally similar movies like when the user clicks here it just takes it takes the user to the similar movies of this movie now lastly we have to add the description of this movie so again there's going to be texture View palette text View and just put it to the bottom of any of these views and the bottom is going to be at the parent now let me just Center it horizontally in parent and the text is going to be text size the size around 25 SB and here just gonna add some sample data so I already have this um this sample data I'm just going to put it on a string resource rather than having it here so go to the next demo values string and create a new string resource it's going to be string name is sample data close it and add your values here so this is this is a so this is the string resource or the sample data and here I'm just going to reference the sample data by typing add string then sample data set sample data.data sample data okay so here you can see just fills the whole thing fills the whole thing we have a couple of errors here because it fills the whole thing and I have to make it for the height zero DP doesn't have to go beyond what Beyond its constraints similarly for the width and here we have to add some padding inside the texture view because we want we don't want the text to be very very close to very close to the parent so padding is going to be around 16 DP and I think we are done creating our layout so this is our output of the layout I hope you enjoyed by creating this layout with the constraint layout in the next video we will be talking more about the helpers of the constraint layout and how we can use them to simplify our UI creation process thank you for watching and I hope to see you in the next video [Music] thank you

Channel: AstrosCoding

Views: 1,446

Keywords: Android development, Android app development tutorial, Beginner's guide to Android development, Setting up development environment, Android programming, Android app development basics, Android Tutorial 2023, Kotlin in Android, Android Studio, Android Crash Course 2023, Creating Android Apps, Mobile App Development in 2023, Beginner to Advanced, LinearLayout, linear layout in android, layout vs view, android layouts, layout, constraint layout, constraintlayout, constraint chains

Id: o6lQ9YNl4C0

Length: 23min 40sec (1420 seconds)

Published: Sat Jan 21 2023