Android Studio - Constraint Layout Tutorial

hey it's random code here and today I want to talk about the constraint layout in Android studio and we're going to be working inside our XML files in this kind of interface or graphical user interface from Android Studio that allow us to track and drop and simply create our placement for any of our components and constraint them to each other or to the parents so the basic concept is Jesus just Showcase with some of my last videos doing it to Studio we have this basic setup and we see these constraints so everything is positioned relative to each other and in general Android Studio is also doing a very good thing is that for example in this case this text area text input is constrained to be 50 something lower button and the genius thing is that these 50 is not pixels but it's something called DP which is kind of like virtual pixels which means these 50 is not going to be the same on all phones it's going to be 50 virtual pixels relative to the size of the phone which should allow us to have a more similar layout for each different rendered phone with different screen sizes but let me actually just clear all of this and just showcase the basic setup if you want to do some constraints and one thing to note we have this magnet where we can either enable to auto connect to parent or not so let me for example showcase when I input some text it is now not constrained to anything we could then for example as much change too right and left to keep it standard like this and we can constrain it to top and button turn off this text centered growth horizontally and vertically but we could also just click the magnet and the button would now be constrained the parent leads on the right and left side so it makes everything a bit quicker but you can do the same thing quite easily but let's just showcase an example which we would actually use some of the more complex so things about description down so let's have some plain text input I would then for example constrain it to the right and left side to keep it centered we then inside this layout constrained widget as mentioned previously we can then Define actual positions maybe to the size of this is not probably let's say we also have a button we would then maybe like to instead of constraining to the right of the screen with like up button so it comes straight to the right we could move it let's just do 25 PP from the right side out we do the same thing on the other side and we would then constrain our name input here to the button I don't know how this relatively nice setup we can then change a few things because actually if we just Mouse over these different types of constraints right now we're on wrap content so the size of our button is going to be determined by in this case the text of our button we can then also change this by clicking here to be fixed size we will now manually have to input specified size and we can do any size we want we also have the next one which is called Mets constraints and to Showcase how we're going to use metal constraint for example let's say we remove this constraint of our text and I'll choose 25 DB from the left side within constrain a button to be connected to our text input we then set this to B met constraints and we now paste on the spacing we want between the elements so let's say again we want 25 spacing between the elements our button with an automatically grow to fit in this area where we have 25 DP on the right and 25 on the left so we could end up having a setup where we simply just to find the spacing between the elements and all the elements that are automatically going to grow to fill out the space which actually quite nice so let me just showcase it again because it's a bit confusing at first but it's actually very powerful so let's say we have some basic just uh in text input we're constraining it to the left and to the right and we wanted to fill the entire size of the screen we will then wrap content instead of fixed content of its size we do match constraints so now it's fitting strains if we generally want some margin or some spacing in the sides I'll just simply add for example like 10 spacing on right and 10 spacing on the left and then what's actually very powerful about this is on larger or smaller phones it would grow so we'd only have a relative 10 DP on the edges and if the screen is larger our text name will grow small screens it would decrease in size so by doing a constraint we can vary powerfully set up a layout that is automatically response it and again if you just went into that maybe let's do this one on top another 25 constraints then constrain this it's up as well and notice when I'm constraining these elements to the top it's on automatically going to be constrained to the element on top of it that's going to be constrained for you it's parent which is like the outer constraint layout it's automatically going to be constrained to this text input very easily defined as tool type 25 again 25 here again so we now kind of have this setup this is constrained sides the top it's automatically growing to fill the entire screen size of this one a fixed sized which is wrapping content so it's based on like the standard size of some kind of plain text input button which is now constrained to be matching space we're just filling out the space here which allow the button to be automatically sized but let's for example just changed now to be matching or wrapping content fixed size fixed size we can change any DB we could do 50. or so on and notice it's still constrained to be 25 on the side on both the right and left side and it's just relatively smart of course sometimes it could be a bit janky but in general this is a very nice way of creating some layouts using some drag and drop it's very intuitive it's very visual and then one thing to note sometimes it's actually not everything we want to do that's doable we can then have a look inside the code because it's just an XML file which means it is actually just plain code based on some text so we have this for example if we actually have a look at our button for example we can see actually all the same information we had inside our graph will use interface from Android Studio here inside our text in XML ID we have the width we just defined we have defined that it's wrapping the content I have the margins on the start top end sides and the text on the button apparent and have some other what we're constraining to for example we're concentrating to the ID of elements we're going to training to so the other the other elements so again I think the graphical use interface is very intuitive it's very nice and a quick way of being able to add a bunch of stuff but if you want to be more precise if you actually don't want to do it something very specific and also this allows for some very easy copy paste and changing a few numbers but I think YouTube interface to create the base functionality sometimes we need to add some numbers or do something very specific we're going to do the code but in general I think the Android Studio setup here is actually very good this was my general introduction to the constrained layout in Android Studio I hope you enjoyed this quick Showcase of what we can do and learn how powerful the axial is if it's used right so if you enjoyed this video please do like and subscribe and I wish you all a wonderful day

Channel: Random code

Views: 2,310

Keywords: random code, android, android apps programming, android development, android studio, android tutorial, java, tutorial, android constraintlayout, android constraintlayout tutorial, android constraintlayout example, android constraintlayout percentage, android constraint layout, android constraint layout example, constraintlayout, constraintlayout android, constraintlayout android tutorial, constraintlayout in android studio, constraintlayout in android, constraint layout

Id: vluMwK4oNzI

Length: 8min 34sec (514 seconds)

Published: Fri Oct 14 2022