Constraint Layouts in Android Studio - Mastering Android #17

constraint layout allows you to create large and complex layouts with a flat view hierarchy no nested view groups it's similar to relative layout in All Views are laid out according to their relationships between sibling views and the pardon play out but it's more flexible than relatively out and easier to use with Android Studio's edit layout editor in Android Main website many notifications that you will encounter that tell you and advises you to use their their constantly out over a relative and a linear layout so with all of our projects 90 of our projects we are going to use the constraint layout and it's powered if you want to learn Android app development go to udemy and search for Android you will get my course as a bestseller course the complete Android 12 developer course mastering Android click on it you are you're gonna learn how to build 60 apps from scratch with rating 4.4 and the best seller and this course is about 86 hours on video demand okay covering all the topics with the 47 sections and about 40 463 lectures at the LA at the time of recording this video so we are expanding this course and we are adding new tutorials every week so are you ready to become a professional developer with this course join now if you want to learn Android app development and start publishing your own apps add thousands of people dead join our udemy bestseller and higher rated course with a free coupon in the description below we can go to here in the layout folder and I will click create a new file name called constraint y i name it as constraint layout as constrainty and the root element would be Android x dot constraint layout.widget.constraint layout don't remove this and keep the main and the layout okay there is no uppercases as allowed in the file name at the beginning of the file and the layouts so here we go we have our code here in the split mode and we have our view the visual editor here you can use the design also to add the constraint and we can add more complex uis okay and you can drag and drop a constraint layout later if you want any other complex UI to be discovered and created so you can drag and drop a constraint layout or you can code it like this by making it constraint layout.widget.constraint layout and identifying the height and the width and this line so this is our main View group and here we are going to put the views or the widgets black text views and attacks and image views and so on so all the power of constraint layout is available directly from the layout editor's visual tools because the layout API and the layout editor were especially built for each other so you can build your layout with constraint layout entirely by drag and drop instead of editing in the XML so like this you can drag the text and you can try to constrain this exactly like dragging and dropping all of its properties so that constraint layout is built for dragging and drop and to facilitate the process of the UI designing for the Developers Okay so to define a View's position in the constraint layout you must add at least one horizontal and one vertical constraint for each view each constraint represents a connection or alignment in other since we are have this power powerful tool and we are going to use this later on in our all projects we are going to learn that we can edit the layout the constraint layout and the constraints on the editors and the layout editor you are so let's zoom in as I told you for every view we should make at least one horizontal and one vertical constraint okay so I have dragged and dropped this and you see that 148 is here and 100 is here if I change it to 32 you see it have been moved so this feature represent or this represent the constraint for our text view these are the constraint and this is the constraint widget okay each constraint defines the View's position along either the vertical or the horizontal axis so each of you must have a minimum of one constraint for each axis but often more are necessarily when you drop a view into a layout editor it stays where you leave it even if it has no constraint like this text view however this is only to make editing easier if if you has no constraint when you run the app layout on a device it's drawn at position zero zero which is here okay so no constraint though if the widget or the view has no constraint like this it will run when during the app running it will be displayed at zero zero so this does not contain any a constraint but when running the app it will become at zero zero okay so let's talk uh the examples and let's learn about the constraint layout and how to add it to your project since if we have the latest version of Android Studios and the SDK it can come directly inside and build in inside the built in sdks but if you have an old project or if you have an old constrained a older than constantly out or if you have any project with with more than three years or four years then you need to add them into the build.gradle scripts so you will see the groovy that the implementation of them in the kotlin and The Groovy so the dependencies we are going to add build here the build the implementation of Android X constantly out and constantly out 2.0.4 and we have a new update a newer version of Android constraint layout so always when you open the Gradle build.gradle app make all updates if there is any update okay so and we click on the sync now this line will add the constraint layout to your old projects okay but till now we don't have to add anything because it is the latest version of Android studio and it become built in in the layout moreover we can convert any linear layout or any layout to any existing layout to constraint layout with this we have this layout we have created it in the previous videos and now we can convert this linear layout to if we go down and we see there is convert here if we can make it there is a convert it should be converted convertible let me check again okay we can we can make it later on by converting this to uh you can check it maybe my um the option have been removed from in the latest versions but it was making them the convert linear layout to constraint layout by clicking on one click it's very simple now how to create this constraint layout here this is the constraint layout and now how to add the constraints click a constraint handle this is the handle and drag it to the available anchor position and point so you see when I have a dragged above it will it goes above and it have been anchored so this would be in this constraint have been appeared this point can be the edge of another view the the edge of the layout or a guideline notice that as you drag the constraint handle the layout editor shows potential connection anchors and blue overlays so if I drag this see that the blue anchors okay this is how we have created the layout the the constraint layouts when the constraint is created the editor gives it a default margin to separate the two views every view must have at least two constraint one vertical and I will add its horizontal here so now it would be displayed in the correct position one to eight from this top and one eight four DP from the right okay each constraint handle can be used for just one constraint but you can create multiple constraints from different views to a same Anchor Point so the same Anchor Point we can handle many position many constraints but for every constraint for every width of U or widget we have four constraints and this constraint can be triggered or can be constrained to an anchor award one Edge or one position or one Anchor Point okay you can delete a constraint by doing any of the following click on the the constraint to select it and the press delete so I can press delete it will be deleted let me check this delete so we have deleted it or press the command the command on Con on Mac OS or the control the Mac OS and click on the constraint constraint anchor okay or in in the windows you can click on control CTR a red one has been appeared then click on it in the left so it have been deleted so we have two tile or two ways by clicking in the control and the left click with the mouse or we have to click on it and we press delete okay now if we see this attribute there is a constraint called end of the parent and it is 184 and have been appeared here you can delete it by clicking this also okay so there are three ways to delete the constraint now there are many many positions that we can check and a switch between them this fixed size fixed position this match constraint and this would be the wrap content okay so if you add the opposing constraint on The View the constraint lines becomes weekly like a spring to indicate the opposing forces as shown here so here the effect is shown like this as a spring and is set to fixed wrap content or flexible like this in which case the view is centered between the constraint if you instead want to view is to stretch its size to meet the constraints which it to match constraint this is match constraint so The View will stretch its size to meet the constraints okay so if I make this I have added the two constraint the two horizontal constraint and I have switched them to this match constraint one if I put 8 here and I will specify it here now the cons this widget is being constrainted to the left and the right anchor points and stretching its webs and getting eight pixels from uh far from the left and eight pixels front or DP density pixel from the right okay now how to make this alignment this will stretch this will match the constraint I will change it to wrap the content so it have been wrapping the content but making the position now anchored because here is being anchored and as a spring from here and from the right the same way right and left would be anchoring the same and compressing the content of the text view to wrap its content okay if I switch to fixed it is transformed to a fixed and it will become according to the uh the width the layout with if I switched at the wrap content it will contain and becomes a wrap content constraint if I switch it back to here to the fixed it will specify the width and if I specify the match constraint so it will stretches the width of the layout width and of this widget and it become stretching along the layout okay now let's talk about the order position the order position uh specifying like if we if we need to make another text view let me see let me show you if I drag and drop another text review I can make here I can constraint this bye dragging and dropping so I have constrained this as an order tree this text view is constrained always to the button and the center button of the text View however this constraint do not imply alignment so this text view will still move up and down we need to make a line alignment The Edge or align the edge of the view to the same edge of the another view by making dragging and dropping this to become like this shape I will increase the 32 in order to show you how this align so this will make an alignment to the text view so this text view number two will be aligned to the text number one and the same offset and the same alignment okay the base line alignment Baseline alignment to the text if I drag and drop another text view here and I need this text view to align with this text view so I will drag and drop a baseline a line so text view number three will be our text view number five will be aligned with the text now review number four okay it's very simple we can also create a guide line so you can add a vertical or horizontal guideline to which can constraint the views and the guideline will be visible to app users will be invisible to app users so you can position the guideline within the layout based on the either DP units or percentage or relative to the layout's edge okay so how to add a guideline this guideline we can make add a vertical guideline or horizontal guideline I will drag and the drop a horizontal a dotted line to reposition it this vertical line vertical line you see guys I can drag and drop it as you want I will align it with the 16 and despite make the making this alignment with this text I will remove it by clicking Ctrl and left click and I will align this text view dragging this constraint and putting it to this line so now my text view is aligned with this guideline see guys how to make this guideline is very simple by drag and drop a vertical or a horizontal guideline I'll make this horizontal guideline here so this text view despite drag at this point aligned to this text view I will remove it and I will drag it to here okay you see the that this text if you since it is aligned according to this text View and this text view have been moved and aligned to another guideline it have been changed and it follows the alignment of the first text View okay also we can constraint it to a barrier and by making the guideline we can make a vertical barrier or the horizontal variable but we prefer using the vertical guideline and the horizontal guideline because they are not visible to the user layout okay now let's talk deeply on the uh or on the constraint The View size here if we click on this let's talk deeply about these notes and these attributes you can use the anchor candles here or the handles to resize if you but this is hard code and the size so the view will not resize for different content of the screen size to select a different sizing mode click on The View and open the attributes this is the attributes and now we have a lot of attributes for the selecting one we click on this text view which is align 32 from the border and this text view is aligned 76 from this guideline so text view is aligned from The Anchor Point no let's talk about this this uh this tool and this constrained panel the first one is this block toggle aspect ratio constraint this is on or off see how it being affecting the layout if I toggled it it becomes like this if I toggled it off it will be comes like this so this one will be referring for us for the size ratio this is the size ratio this is toggling the size ratio of our text View now deleting the constraint as I told you by clicking on this the third one we need to talk about is the height and the width mode which is here the height and the width mode how to prevent and we are going to discuss it the fourth thing is this adding plus so I add constraint to the nearest one so I have added 16 and I have added it from this text view to the nearest one is called margins and the this is this handle is called constraint bias so I can increase it you see I have increased the constraint points and you can also highlight individual constraints in the layout editor by clicking on them in the in the constraint so we can highlight this constraint you see how they are being highlighted if I click on end off it will be highlight a top of text view it will be highlighted the start of the parent it would be highlighted okay so you can choose and highlight this constraint now we have talked about and and see the difference between the the view the mode of viewing so these symbols represent the size mode as follows this is the fixed so the fixed you specify a specific dimension in the text box or by resizing the view in the editor see here is the layout width and you are specifying them exactly what is the height and what is the width if I put here the wrap constraint or data wrap content The View expands only as much as needed to fit its content and the match constraint like this the view expands as much as possible to meet the constraints on each side after accounting for the views margin this is plus margin so however you can modify that behavior with the following attributes like constrained with default wrap or a spread but we are interested in making and understanding them also you cannot use match parent for any view in the constraint layout instead use match constraint we can use 0dp as this layout with so so 0dp will mean matching their layout okay so we have seen this layout width it would be 0dp so it will match the width of the parent and taking into accounting these margins okay so this is how we are making these constraint layouts and these constrained aspects and symbols Now set the size as ratio this is the toggling aspect ratio constraint you can set its size or the view size to the ratio such as 16 to 9 okay you can set it like this layout constraint Dimension you can choose whatever you want if you have defined any of these in the previous account now to enable the ratio just click on toggle this button symbol this triangle and click on it and then enter the width and the height ratio in the input that it appears here we are going to put 16 to 9. or if you have defined any of that in the previous so this text is appearing and toggling the aspect of 16 to 9. I will remove it till okay this is how we can make and how we have uh understand the Android constraint layout one another default via a margin attributes is to ensure adjust the views margin by ensuring that all the views are evenly spaced by clicking margin like 16 here so they are margin 16. okay it is a Toolbar to select the default margin for each view that you can add to the layout any change you make to the default margin applies only the view that you add from then on so if I add a text to view here it will take a margin from the text view as a 16 DP after I have selected it okay this is very important if you have a big project and you need to uh to add the margins and and remove the redundancy of the codes and without without uh repeating the codes every time you add a new widget okay now there is a symbol here that infer constraints so if I drag this there is no constraint to it if I will click on the infer constraint scans the layout to determine the most effective set of constraints for All Views it makes the best effort to constraint the views to their current positions while allowing flexibility you might need to make some adjustments to be sure that the layout responds to you as you intend for different screen sizes and orientation if I click on it it will infer the text view to the current best practice and the best and the nearest constraint and it will add a constraint according to this okay so till now we have added and played with the constraint layout and it's very important very important layout that we are going to work with along with our course and our applications and we are making uh and we are going to make a our many complex UI and complex application user interface using the constraint layout so this is one of the best things I love in Android Studio

Channel: Master Coding

Views: 3,537

Keywords: constraint layout, android constraint layout, constraint layout responsive, android constraint layout example, constraint layout design in android, constraint layout in android, constraint layout for beginners, constraint layouts, constraint, constraint layout example, constraint layout tutorial, how to use constraint layout, constraint layout explained, how to use a constraint layout, constraint layout for android, android studio tutorial, android studio, java

Id: tJmkuKe8d10

Length: 32min 13sec (1933 seconds)

Published: Fri Dec 02 2022