Android - Building a layout from Scratch using ConstraintLayout - and Q&A #RiggarooLive

okay cool so I think we can get started so thanks everyone for joining I'm excited to be doing a different thing for once contemplating writing a blog post I thought about doing a recorded video but then I thought what best way what a better way then to just get some live questions and have people ask me things as I go so the context of this live stream is that I've been working a lot with constraint layout and I've taught a lot of workshops and helped a lot of people with constraint layouts and I've seen a lot of misuse with using it so a lot of people do some things that I mean they work and that works for the most part but some kind of sort of best practices maybe or some things that maybe are not optimized for how you would use constraint layout or maybe some areas as well so today what we're going to be doing is building a layout that looks very similar to the Google Play Movies app and if you want to follow along you can try I don't know how well you'll be able to keep up but you're welcome to try so you would probably you would need Android studio 3 installed and you can find the resources for the layer that we're going to be building at that link so but Lee Droid layout and just the the the accent color that we'll be using as well you can find there and then the full example and the whole repo can be found on my github so it's just Rica view on github if you're now go check out the whole example so just a little bit more context of what exactly will be building so if you have a look if you've ever used the Google Play Store app and you've gone and like browsed and seen what a movie would look like on Google Play Movies it's got a nice looking layout so there's a post image a big 16 by 9 image sub buttons and some more buttons at the bottom that's clicking some other stuff so it's quite a nice looking that and there's a system sort of scrolling action here as well which we weren't beginning to do with constraint but it is indeed possible so yeah we're going to be trying to build this this layout from scratch and as I go we'll be looking at the different features of constrained layout and why maybe you should start using it and some some misconceptions about it so hopefully by the end of this you'll learn how to get comfortable with constraint there then I figured the best way for that to happen is if you just start actually using it or watch someone use it which is also why I've decided to do a large team of it so you can ask her questions as we go and then you might get a bit of better understanding of some different features in punched rental ads so if you want to participate and follow along you're welcome to open up your own Android studio and you can head to this link and then download the resources that we'll be using just so you can sort of get a complete picture of what I look like and yeah so we can we can start building it and let me just see if I've got everything covered there yes okay it's cool so what I'm going to be doing is going from scratch so the first thing I'm going to be doing so this is the continent layout one checked up from github so we won't be using this one because obviously everything's done here and that's not the point of of the stream so I'll just be going straight and creating a new project so file new project and we can set constraint layout demo live and let me move this into bits a so many folders okay now we don't have it get up okay you folder get constraint Liat love oh point in a different force yes okay that's fine okay so I'm not going to be using cotton today sorry for all of those that want tea but we'll just be using Java for the time being okay and we'll support from Kit Kats and go ahead and create an empty activity we can just leave it as main activity and now we wait for Gradle to build hopefully nothing goes wrong here okay so some questions so far do we need constraint layouts one point one point zero - pizza three so I will be using that in this example that beta version but there is also the stable version that comes packaged with the latest Android studio so if you have a look at for example the Bulldog Idol father is already generated when it creates a new project you'll see that by default it starts to use constrain to add 1.02 so the difference with this one and one point one point zero B to three is that there's a few more features in the beta version so there is a stable version that you can use but the Vita version we'll be using today because it provides a few more features so we can hit C this one and say B to 3 and sync again cool so now we've got constraint layout B 2 3 so you're just the main differences between pizza at the moment and the standard one that comes packaged is that there's a few extra features so for instance I think guidelines or groups aren't available in the previous version and now they're available in the beta version so it's up to you what what you want to use for your app ok so if we head to our layout folders we can just find the activity main folder so by default I don't know why it's heading to the tick spot but I'm gonna go to the design view so a lot of people and if you've been an Android developer for a while you've probably got more comfortable using the text editor then using the design layouts which is I think I was assuming that in that phase a while ago so I never like to do things because the editor just never really worked for me but with the new editor it's really a lot a lot easier to use and you can actually do things and they look hard they will look on on a device so hopefully by the end of this you're a little bit more comfortable in you you want to actually use the layout editor instead of going to default to the text editor I'd so most of my time I spend about 90% in in a layout editor now and 10% or so in the text editor just to edit some 1 or 2 things that might not be sort of easy to do on the layout editor so by default we can go to the design view there's quite a few different patterns in that quad can quite be quite overwhelming so the first thing I like to do is just enable design and blueprint mode so this gives you sort of the blueprint mode shows you more details around what exactly your layout looks like so in this example we've just got the hello world text which I'm just going to delete because I don't need that and now when we start to drag things on and off we will see the different constraints and that that automatically get added so if I okay so the first thing we want to do so if we look at the layout that we have here so we have this despicable knee layout there is also another layout if we look in that folder that I've shared if you're still looking for it the constraint data folder so we're gonna be basing it basically off this not that one but very similar so we've got a little screenshot from the app of what exactly we want it bold it'll look quite similar but not exactly the same obviously taking into account there's quite a lot of elements on this page so well build as close as we can and get as close as we can to the solution ok so the first thing that we want to do is obviously travel this 16 by 9 image and then do the poster image so the nice part with no don't play a stream go back ok so the nice part with with constraint layout is that the making dimensions on the image view is quite easy so if I have to just drag on an image view I can drag one on okay I haven't added that poster image to my project did so I'll just go ahead and sit one of the default ones it's fine we can change this later so unfortunately you can't drag one on without sitting and imagery just deletes it so we'll sit one for now but we actually want to drag in that posted image so that we can get the look of that other we can get the look of the exact that that we want to build so let me just find it quickly oh my goodness on the waste of navigating this here's the downloaded it okay yes so this is a screenshot I was looking for no not Captain Underpants okay so we're going to be building the beauty and the beast' looking one obviously it's the same layer that you would use for if you wanted to use Captain Underpants or something but yeah so we'll be building the beach in the beast once i've got i've got my header image in that folder and the poster image as well so for those that's joined a little bit a little bit later and you want to follow along and trouble this you can here too and this link hopefully it's working somebody says it doesn't work let me just double check yeah she'll be working so that that link get it again so bitly slash droid - layout and you'll be able to download all the resources that we're going to be using okay so let's drag the header image into our drawable folder okay okay so we've got our header image I'm also going to do the poster image while I'm here so a lot of people have asked me this when I've sort of done this demonstration before and they talked about the fact that you might need to with normal Android image post or like displaying a bitmap they ask the question of do I need to make sure that my do I still need to do the resizing of image views or this resizing of bitmaps to display in an image view because if you don't Android before you probably know that just setting a bitmap on an image view can use up too much memory or you've got like a really large bitmap so yes you still have to do that when using constantly ad it doesn't automatically manage the sizes so I'm just putting these in here for now but you should be better better person than me and make sure that you've got either all the different resources or different size devices or all that you're getting them from the server and the server resizes them before you before you display them so for now we're just going to put them in here just for our example but if you are building a lot in production you probably want to make sure that they are properly resized for the correct size the screen okay so this first hit hit image that we've got we're going to give it a name of image view hitter and we're gonna set the source of it to be the new layout I've also found that this needs to bold before it finds the layout the resource again which can be a little bit annoying okay let's try get this one pick a resource not available okay all right now I've gone and done something yeah okay so I can change this back I don't know watch I rotated somehow such the portraits okay cool no not available we'll switch back to textview don't do this okay okay so we'll fit that to the header go back to our design view okay cool so now we've got this header image and placed on our on our screen so one thing to note that I think a lot of people don't do when they busy working with constrained layout is that they don't follow the warnings that are here visible in this component tree so they just kind of ignore them and hope that the thing will work so my advice is to keep looking at the sort of warnings and watch what they say so for example this one saying margin left with margin start for a better support for right-to-left layer so I should probably do that as well but I'm still busy trying to position this elements so yeah so let's position this element first then we can see what we have with us the areas that we have so you can see when I dragged something on once your view it automatically started to add these constraints so what we call chains no no constraints sorry chains or something else so it creates it so because I have this sort of auto connect feature on that but automatically when you drag something onto this view it'll automatically start to create these constraints for you so you can see these constraints yes I can delete these if I want and I can create them myself if I want to but if you start to drag something again a little start to create your constraints again so if that gets a little bit hairy for you you can just turn off this auto or took any feature off if you want so okay so I've got it connected to the the left to the right and the top and it's got a big margin on the top so I don't really want that margin so I'll just set that to zero but now you can see like the actual image view is not really taking up the size of the poster itself so this should be like a sixteen by nine ratio image so how you use dimensional constraints is basically you go into you click on your item and instead of saying the wrap content you would say match constraint for both the width and the height okay so now you can see it's not it doesn't know what the size of the the image should be so if you click on this little triangle in the corner you'll see you get this sort of I don't know I don't know why it's a triangle but if you click on it you'll starts you see this ratio item appear so now it's applied the ratio of one to one but we don't want this we want to use a sixteen by nine ratio and now that's as simple as it gets so you would just now have an image view that's a sixteen by nine financ size image view which is quite difficult to achieve if you're trying to do this without using constraint laps so we've got our image view sets we've got a header we've got some metric constraints we've got a ratio States on it and so we've still got an issue here so now it says it's missing a content description attribute on the image so you should provide these so this is basically full accessibility where and uses that usual act on consi or they're using a talkback service so it speaks out what's visible on the screen for them so we can change this to say something for now what are we gonna call it content description so we can just say for now and hit a image and we can get hidden image string so I don't know if I would actually so this header image doesn't really provide contextual value to a user so if I had to click on it it's not really going to provide me much information so for somebody that's using talkback I don't know if this image would be much value to them so we could also just for this image say that null and but won't speak out anything when that image is touched because it doesn't actually mean anything for the user so we don't need to it's just for decorative purposes okay so we've got the header image view seats we've got our constraint sets on it so now we can start to look at adding that sort of poster image that we had if we look at this screenshot so we'll be adding this poster image on here so we can do the same thing so we'll just take an image view and drag it on so now we've got our poster we can select that click OK and this one is quite a big poster at the moment so for now I'm going to just set the height of it to about 150 DP no 150 DP okay so that's a little bit more manageable to work with in the layout editor so what we can do now is we want this we want this image view to be constrained to the sides so we can just click on it and drag a constrain to it but we also want to be constrained to the bottom to the middle so we want the middle of this poster to be constrained to the bottom of this one so with constraint without this quite a cool feature called a censor constraint so what you do with this is you take the bottom of your your image of your view and we align it to the bottom of that image view now we take the top constraint and we align it also to the bottom of this image view and you'll see what this does now is it creates what we call a censor constraints so it's centering this whole view to the bottom of this view which is also quite a difficult thing to achieve if you're using something besides constraint layers so you would have to do some kind of maybe negative margins which are that's not really a good idea if you doing those but it's also yeah it's not such a good idea to do negative margins but you could also do it with like some kind of calculations if you wanted to but using constraint layer it makes it quite quite easy to do okay so we've got sensor constraints it's on it we've got we've got two constraints at the side what you'll also notice that I've seen a lot of people sort of leave out or not really be aware of is those automatic margins that are being added on to my constraints so this is configurable here if you click on this little 8 button here you can change the default margin that's being added onto every single view so if you don't like it being the default of 8 you can just set it as 0 DB if you want but yeah so that's one common misconception that I see a lot of people not really paying attention to so we've got these these different margin sets but now we also want to set this thing to be of a certain ratio because at the moment that's taking up a lot of the screen and we want to actually make sure that it always is a poster size image view that we have so we're going to do the same thing by creating a ratio that we'll use here so instead of the width being wrap content we want to change this one to be match constraints and that's what allows us to make sure that we can apply this ratio so soon have a match constraint it'll allow you to toggle this and you'll get that little triangle in the corner that you can use and that's what so a lot of people have like I can't get access to this ratio thing how did you do it it's always once you've only got match constraints so if you're trying to use match parent or anything like that it won't work so you have to have that CSS match constraints okay so for the poster I think it's a ratio of 3 to 2 no 3 to 2 no 2 to 3 I think always get this one wrong yeah okay so it's about a 2 to 3 ratio there are a little bit different sizes with posters so yeah we'll just leave that as TTT for now okay so we want to maybe add a little bit bigger of a margin on this one if we have a look at our example that it's a little bit more and padded on the side so we can just change this yeah so let's give it a 16 margin how that's starting to look a little bit better okay so we've got that one alright we've still got some warnings over here so let's have a look at what it says we've also got it as a really bad name so let's give it a bit of name image view poster okay and it is probably moaning about content description as well so we will leave this one will also sits it's an alt then don't copy what I'm doing here but I'm just trying to get rid of the warning but if you're going to production please make sure it has a proper Content description okay so we've got those two set out now we want to add text view so let's have a quick exquisite are they aren't okay so we going to add this beauty and the big beauty and the beast' it takes me and we can do that by just going to text takes you and drag this one on okay so you can see it also connect didn't know how to create the constraints for this one so it didn't create any so one other big misconception that a lot of people don't realize is that even though your last is placed here like this when you run it on your device it's not going to look like that it's just going to because is not constrained it's going to go straight to the top and not be constrained to anything so if you have a look at the the text of this the the text behind what this layout is you'll see Android studio has added these two tags onto this view so the first one is layout editor absolute X and layout editor absolute one so these are just used for the layout editor itself and if you're using them it means that if they are in if you see them visible in your XML it means that this takes tree hasn't been properly constrained because as soon as your text view is properly constrained these x and y are positional values are removed from your text view so this is purely for the design editor and it won't be used when you go and deploy this layout onto a device okay so let's see what happens when we start to constrain it so we want to constrain this to the bottom of this image view and to the side of this image view okay there is some I think weird bug where it like pulls it to the side and if you saw that and then gets it correct but anyway so it's now it's constrained to the side and the top of this image view so we can have a look now and we'll see that those positional x and y values I've gone from from this XML so if you've seen those just make sure that you've got constraints on everything state otherwise it'll probably not work when you run it on a device okay so let's add will make this image view or text view have a little bit more padding because it's really squashed on this thing okay so we've got that let's give it a bit of a better name so it takes view and movie hitting okay so one thing that a people a lot of people also don't know is the namespace of tools so what this is is it allows you to set something just visible for the design editor but not for anything else so it'll make sure that it only displays to you when you're designing but not when it's deployed the device so you can say here Beauty and the Beast cool but when you run it it's going to say be it takes view on the device so we'll just copy that there for now this should also be extracted two strings that XML file but we won't be doing that just for sake of making this video not so boring okay so when was the thing that I see a lot of people that don't don't do this or know about is the text appearance options so with this these options that you see here they give you material design look and feel without you having to do any other setting of the text size or the text color so in this example if I use I think it's display one no that's really big like its headline really big as well it's playful well so big okay so we'll use display one or caption which one what do you know okay so interesting thing to know let's just so you can also follow this so on the material design guidelines you'll see over there so they are they yeah no not the colors guidelines okay so these guidelines for the typography will relate exactly to the values that you get in Android studio so for example if you want to use the title size text you can go and find app compat title or no headline inverse yeah so that will then take all the so if your designers are using this and saying okay just I use this one you'll be able to use this directly from app compat without having to manually go and make those yourself okay so we've got our textview and it's got a constraint to the top and bottom but I noticed what a lot of people do and this is a another misconception or misuse should I say of constraint layer is that they don't constrain it properly to something else so for instance they just leave it like this with a top and a side constraint but then when the sticker gets populated on a in production and the Stix is a really long text it'll go off this off the screen because I haven't constrained it to the side of anything else so this is another problem so if you have a look now if I start typing something else you'll see that because it's not constrained to that side it just goes off the side of the screen so what you need to do is just make sure that you've got a constraint on all sides of the screen so we can add one here now by just clicking this plus button yeah come on ok cool so now we've got a constraints on this side yeah I would also just add some more padding on that side as well wait hold on ok so we're going to add a button as well so I just want to delete the end of the stick so that we don't have overlay for now so another issue that we need to just cater for is when you've got constraints and you use something like wrap content so this is also where an issue can come in so you can see now because I've got web content sits on this and all constraints it doesn't really know how to to properly constrain this view so I can change this not to match constraints and then it will automatically like resize it and actually keep it within the bounds that you've constrained it to so what I would say one thing is to avoid using match parents completely because that doesn't really make sense now with constraint allowed so anyway where you going to use match parent who should you be using match constraint and in wrap content just be aware of luck it's limitation so in that example it would be too big for the view so it wouldn't make sense to use that so okay so we'll keep it at match constraint for now and now what we can do is we can start to drag in and make that little other image button that we had so if we go look back and look at the view so we're going to start adding this image button so we can drag this image button on ok and now that was the bookmark button let's just add something these are really nice throw backs of old old look Android yay okay we'll dragon and the Papa resource for that so let's take from that download we've got this bookmark ok ok so that's the little bookmark icon that we've got so if we head back to the main activity and sit the source of it doesn't generate it damn doesn't do that - okay we'll do it yeah and what's a cold icy bookmark ok so I think I know studio needs to rebuild in order to get that properly some reason oh there is a color accent never seen this one before values colors color accent ok I do want to stay still change this to that other value that we had and then we'll fix that error okay we got the cool red now so we have what is going on here color color accent click generated icon okay the Shari build all else fails we build No okay I'm just going to change this to know if it okay okay see okay so the reason why it's a an XML file is that's how Android does the vector drawables so I'll show you how to do import an SVG into Android studio to make it get into the six-mile stage I just didn't do it for this one okay so it appears that color accent was causing the issue I don't know why that's worked before the JA demo gods rant okay so what you can do instead of doing that is you can use what we call a drawable since I think or a tint on this whole thing so we can say color color accent and then that'll tint it to the correct color that we want okay but we don't want the background on this button because that looks a little bit horrible so we can see if the background on this thing too so we can do the same thing where we set it to null the problem with this so it'll look like it doesn't have a background which is nice but if you try click on it you won't get that sort of ripple effect that what normally happens on buttons so you would probably want to use there's some other options that you can use I've got it on the sample projects that I've done so on this one itself I've set it to selectable item background so we can copy those just to get that sort of ripple effect on the button so that people don't moan at me for using at null okay so we've got the button but it's not constrained property so it doesn't have a proper top-level constraint so we can go and add that and it's got a side constraint you want to make a margin that's a bit bigger on the side okay cool so we've got this little image button and now what we want to do is constrain this beauty and the beast' text to this image button so that it doesn't go over that six so we can remove this constraints and oh this is going to be difficult to to add now with the short text this is probably when I would go into the layout editor and edit the text or the constraints okay that makes it a little bit easier for us cool so now we've got the constraint set to of this textview to the side of this button and the top of that and it is still got a little moaning okay hard-coded string so that's quite an easy one to fix but we'll leave it for now so we want to say Beauty and the Beast and BTN beast okay so up to now we have seen why's it got a set height you don't want it to set the hunt no content yes that's better okay so now up to now we've seen that I've been sitting the margins on this thing programmatically 216 DP so what's probably a better way to do this is to use what we call a guideline and constraint li out so a guy down basically is like if you use something like Photoshop or anything else you've been used to sort of having these sort of red lines and aligning things to it on on this on this view so we can do the same thing where we don't have to set 16 DPI on every single thing we can just do it and sit sit on sit one guideline and then set everything to match to this guideline so what to get that you would just right-click on this and say helpers add vertical guideline and you'll see it doesn't really appear here and it's a little bit hard to find but it'll it's already been added to your component cheese so if we click on this guideline here we'll see it in our in our blueprint mode so by default it's it's the like margin of it or the guideline value to 20 DP but you can sort of drag it to 16 DP or you can set it to a percentage of the screen four percent so let's call it a little useful thing so now what we can do once we've got this guideline on the screen we can align things to this guideline instead of to the side of the screen so I can delete this guideline well this is constrain sorry and constrain it to the guideline in state and then I can remove this margin on it completely and I can do the same for the other side of the screen as well so right-click help add card lon let's go guideline and that one's there that's how a little bit move okay so we wanted to go from the other side of the screen so what this means is that it's going 324 DPS from that side of the screen which is not going to really scale up properly to other other size devices so we want to just click on this little icon at the top and now it goes from the other side of the screen so we can go and now see if this 216 DP on that side and now I take this button and take this guideline of this constraint slips this is a little bit of a tricky one no it doesn't seem to like that I think it already did okay so we can check this in that in the lab and that takes so what are we looking at the button the image button constraints it starts up okay so it's got the guideline safety so interesting to note the guidelines are just little objects here as well that are invisible when you you ran the thing that they do help you align things to it okay so the next thing that we can do is add another text view so we can drag this one underneath the Beauty and the Beast and this one we're going to align to the bottom of that and also to the side of this text and we also want to add a margin of 16 DP on this one and we can just say on this one we want to have I think it was like the number of minutes or something's 100 orders like the PT ratings a pg-13 comedy they think it's a comedy insert and 113 or 12 minutes okay so that just gives us some information around what exactly this maybe has its have a double check on this layout okay I think it's using the garage size one I'm playing this by eye but you should probably have proper designs from your designer to tell you exactly what size they should be okay so now for this one we also want to make sure that it's constrained to the side of of this this view so we also and they're constraint there so one another sort of misconception that people have is that they don't use so there's a sort of I want to have a quick showcase of an example where people are using match constrained versus bias so let's just call this quickly I just want to make a quick example okay so a lot of people I've seen this this problem come up quite a lot is they have a text view and they constrain it to the sides and then instead of making it match constraint they use this thing called a bias so the bias allows you to sort of move it and bias your view to a certain direction so now it is sort of aligned to the left and then works sort of as intended the problem with this comes in is when you start to do sort of like right-to-left layouts where your text needs to be on the side so then you would need to programmatically control the bias in terms of if it was a right to live so if people had all they text on the other side of the screen so instead of doing this bias thing well that you have here the better way to do it is to have dragged on a text view and we can create the constraints that we had before but instead of just leaving it as the width of wrap content we say match constraints and that will automatically make sure it uses the correct right-to-left layout as well as bias on a bias it but make sure that it starts at that side so this is one of the big issues that I've seen a lot of people do and I don't think it's such a good idea to be using the bias for this so I would I would prefer to just use the match constraint for that one okay so let's go back to main activity so we've got this view that's got this sort of problem as well so we can see it instead of what web content we can set the width of match constraints so just to note for those that don't know met constraint if you look at it programmatically it sets it to 0dp which is sort of like trigger for match constraints okay so let's go ahead and look at the next thing that we want to create so the next thing I think is a little divider oh no the battens okay so what I would do now is because the size of this takes view could be smaller so say for instance has just said beauty instead of beauty and the beast' I would go and then this would sort of move a little bit further up I would go and make what we call a barrier so a barrier sort of groups a whole bunch of elements together and make sure that the one that's the biggest height or the biggest width is used as that sort of last point on the screen so I can just give you a quick demonstration of what that means but basically to do it you just right click and say helpers add horizontal barrier and again you can't see it on the view but it's added in to your component G so this barrier now is at the top and it's a little bit hard to see so in order to add something to make up a barrier you would just click on the things that you want so we want the poster as well as the textview I should be naming these things puppy but it's fine okay so now we want this to form our barrier so we would drag these two into our barrier and you'll note that it just contains references to these these these items on our views so we have now this poster as well as the textview forming this barrier but we also want this barrier to be to the bottom of these things so you can see at the moment if I click on it now it's sort of a faint line here with shows where the barriers but we want it to be at the bottom of these views so we can just click here and click bottom and you'll see now the barriers made up of this image view as well as this takes view so if this ticks had to get smaller the barrier would be to the bottom of this image view but now it's to the bottom of this text view so we can then drag and constrain things to this barrier so if I not take this button drag it on the screen okay I can now constrain this button to the barrier I hope that's going to the barrier and not to the image view that takes view but we'll see now and then I don't want it to go automatically to that I want to constrain that to the guideline okay so we've got one button there I just want to double that it's constrained to the barrier yes okay so that means now it'll be constraints at the top of the barrier and I can add another button as well so let's go and drag another one on okay I constrain this to the bottom of the barrier and to the side okay cool so now I've got two buttons and as soon as like so for instance this text gets smaller so let's just make right yeah beauty you'll see now that it constraints to the bottom of this image view instead of the bottom of this takes view so as soon as this text gets bigger that make sure that everything moves down below with it as well so we can change this button now so we want this button to be that sort of pink let's have a look this this accent color that we have of the whole app so we can change this now this is another thing that I think a lot of people don't don't use or realize but you can use this no text appearance sorry button style so this allows you to just get like the sort of standard button styles without having to change the colors or anything yourself so we can select the colored button here and then the color button here and now we have that sort of look that we were looking for earlier so we want this text to say range from print 29 and I suppose I should be doing this like dollars or something and what's the other one purchase think buy okay so we want this one to say buy hundred and twenty-nine and okay so we've got our two buttons but we need them to sort of take up the full width of the screen and make sure that it uses that that's based appropriately so for this I would use what we call chains so we can right click on these two and click on chain creates horizontal chain and that makes it sure that these these two things are taking up equal space between so you can also cycle through the different chain modes so you can make sure that they distributed that looks like it is not constrained to the barrier so I'm just gonna make sure the guard line sorry yeah and this one doesn't look like it's done to that as well what is it perhaps it is come on yeah okay so what we want to make sure that these take up correct width so I would make sure that they are matching constraints no come on I've stuffed something up now come on with our said heights whoopsie hike must be rough content with much constraint constraint and height must be content okay so now I have two buttons I probably went a little bit more padding in between the two so a little bit more padding cool so those buttons are constraints at the bottom of this view and we can run this so long just to see what it looks like hopefully it won't completely break but you should also be noticing these little warnings that we've got you so now this is this barrier okay so my barrier is not constrained which is probably okay actually because it is including those other views so I don't think we have to worry about that one and to use vectordrawable compact okay I need to do that damn I forgot about that okay let's go and make sure we have that before it minds and goods in yeah click the drawables just go copy this okay okay um go back to this one sorry I don't remember this Wilf and where is that other thing did it the other day yeah okay delete that okay all right okay okay cool so we have sort of an app that's you working so you can see now because we got that text saying Batson instead of rent that's why it's displaying that so move these two strings that XML don't do what I'm doing this is why I didn't make it a copy paste blog post okay all right so we're getting there sort of looking all right and what we just need now is these sort of buttons below I'm going to skip the divider for now because I see we've read are now on 48 minutes into the stream so we'll go in the head and sort of create these buttons down below so I'm just going to use fare buttons for them because I don't know they look like they are fare buttons so we can just add this floating action button so for the first one we'll add this one and let's just sit it to the bookmark okay so we drag in the floating action button wait for Gradle to build come on cool so we've got one button let's drag in a few more to also just note I'm not giving these proper names you should totally give them proper names when you drag them in I think also on this Google Play Movies layout they do use I think a recycler view because they do have like a dynamic number of things that are in this sort of list all of of buttons so the first one that we want is okay so we are kind of running out of time so I'm just going to copy the drawables from this folder so we have similar so they should reveal in finder okay and go back to this one so drawable okay ah wrong folder sorry I'm sure that that one okay we want to add the similar drawable we want to add the family I think I'll just do these okay so we've got these these little icons so now we can set them so this first one we wanted to set to one of them similar it's not rendering these things with much reference like that I wonder why okay it's just it like this for now okay all right let's hit this one so this similar and then I think we all said one that was like Watson's lots of it so we can go here I did download it so we can just drag that one in as well you should probably also make sure you have different sizes for different ones okay that one bookmark we went the tomato okay we can change this color to something else just make it a blue one for now okay why is this one the same all right so let's just lay these out property on the screen so you can see now they're not there but all warnings on yeah because they're not constrained properties so we can create a chain with all of them so right-click chain create horizontal chain okay now that will chain together but they're not constrained to the top so what I would do is also creates a barrier to make sure that if one button was a bit higher than the other one that it would properly constrain it but for now we're just going to constrain them all to the top of these views okay cool so they do look a little bit smaller than the other ones I think we sit the value on that tube a bit bigger if I have a look at the constraint layout demo so these ones I set the high 2:56 TP on each one so we can go back to that set the height this also sometimes doesn't work so well 56 DP cool it's starting to look a little bit bitter okay cool okay so now we have these little lines and items just want to double check that they are constrain to the barrier I mean the guideline and not to something else so let's just check to start apparent nope we want that to be the barrier so you can do it programmatically as well fahriye and then the last one we want as well to vary air which one I don't oh no no barrier sorry that's completely wrong that should be glad lon yeah this one should be guard long as well long to you cool so that's starting to look a bit better what is it moaning about clickable actually found please ask focusable okay well you can all that one for now okay let's have a run see how it looks okay cool so we have some buttons as well so we also want to add that I think we had text views underneath so we look yes we had some takes trees underneath which I would just let's just do one so we can show it but then we all have to sort of stop where we are okay so we got one text view so to do this I would just constrain it to the sides of each of each view and then it will sort of Center it itself and then constrain it to the bottom so now we can say instead of text view we can say I think this one is rating and then we want the width of this one to mention constraints yeah so you can go ahead and do that for all these different different views to make sure that it has these little things underneath and then we probably want to set that to be a smaller size text as well so that it can make sure there are the correct sizing from the those few it's up so these are a little bit smaller so I would go ahead and just set it to the appearance of something else okay so while it's running I just want to go through some of the questions that we getting okay so what is the benefit of constraint arts okay so good question so constraint now has a lot of different things that you can do so for example the guidelines of barriers but I think the biggest part the biggest benefit about using constraint layout is that it is a more expressive way of writing of use so instead of having programmatically have sort of positioning information within your view so by positioning information I mean like have relative layouts and and then all your things are nested in between here so instead of having that you are just declaratively writing exactly what should be in the layout and then on the Left I mean on that allowed items themselves you are adding these constraints manually and not manually but you can use the editor but you are adding the constraint information onto it so it's a lot easier to write as well and as well as you can use this amazing layout editor instead of trying to programmatically do it themselves so yes it's got that it's also got the advantage of it being a lot more performance than other layouts so you typically have to nest a lot of layouts when you're trying to get this sort of level of complexity whereas with this you can see there's no nesting that I've done here it's all sort of one layer deep in terms of writing this land yeah so that's the benefit of using constraint at all so it's a lot more modern and there's a lot more features being added to it as we go instead of the old layers that don't have that so I hope that answers that question okay what is the windiest I'll start use DP values or something like match constraints okay so that's also a good question so deciding to use DP value versus only like match constraints so for example thing like and a textview that has to change its size where you have text that maybe it's dynamic or a user can control the text size on a device you wouldn't really be setting the DP on it so you would set it to sort of take up the view that you have and let Android decide how big this view should be whereas something like a button for example this one has like an image view inside it and sort of like a standard size it's not going to resize with anything on the view unless this may be used for something like a tablet layout so I would typically here maybe set a height and a width on it the only reason why I did that here is because we wanted it to be a little bit bigger but yeah so typically try avoid setting DPS as much as you can and but for the most part like for instance the size of this this is poster I had to set it in order for it to be a little bit smaller on the screen so that's where you'd sort of start to use DP positioning information okay what else are the questions here we need what is the benefit of constraining it to the guideline instead of the parent side just the fact that you don't need margins okay so one big benefit about constraining to a guideline is that now if I start to move the guideline say for instance now I have a tablet layout or I have some kind of animation if I just change the guidelines margin on it everything will change that's aligned to it so instead of having to go manually and find every single view that should be constrained I can just do it once on this whole guideline there's also a really great talk I think coming out soon from Nicolas roared a guy from the constraint lay our team so this is one guy that you should follow on Twitter if you do follow anyone today and let's just have a look if I can find him Nick that's Road so if you follow this guy on Twitter I cannot find him now people come on ok I'll find him in Lincoln soon but if you follow him on Twitter you'll see he does an example of a of an animation using the guideline so you can do quite a lot of stuff and I think there's gonna be a lot more to come by using guidelines so it does make a lot a lot easier to use as well because you don't have to set the same margin on everything that you have okay so what else are people asking sure there's quite a lot of comments yet ok so I just want to quickly go through some of the other things that I found that people do so I'm not going to continue with this laughs so I think we've done quite a lot on this layout and adding the tick season all that should be quite simple from this point on but I think one of the most common mistakes that people make about constraint Ladd's is that they're not using it at all so I've seen a lot of people just completely ignore using contrived and I think that's quite a big misconception that they think it's not stable so I've had a couple of comments where people say that and it's not it's on it's only in beta it's not it's stable which is completely untrue There is obviously I'm using beta version in this this example but there is a stable version I think that's the latest one is one point zero point two but I might be miss I might be on the wrong version here but this version is stable and you can use it in your current live applications you can see now that I've changed it some things aren't available suck for example barriers have only been added in the beta version of constraint yet so I can switch back to Ibiza so I would say the bit the most common mistake is that people don't use console ad which is why I'm trying to do a lot more of these sort of examples using it and okay so we've covered placing an anthem in thinking it'll stay where it is so that's another one so people just place the item on the on the view and they're like chords it's where I've placed it so it's going to be displayed there so like I mentioned you have to make sure that it has constraints on it in order for it to be displayed properly and those layouts x and y values don't take effect when you do put something something on the device so they'll only display property when they're demoed here but there won't be displayed properly on there okay so they've got the margin issue as well so people don't use guidelines I think they maybe just don't know that they do so I would say try these out and make sure that you try use them because they're quite useful using match parent inside constraint lat okay so did touch on this one a little bit earlier but one of the big problems that I've seen is a lot of people just use met parent because they're used to it so instead of using 0dp or wrap content they are using match parents don't do this because constraint air doesn't really know what to do with it doesn't really exist anymore when you're using constraint lat so 0dp means match constraints and you can use rap concerts as well but you will get some and maybe some weird overlapping issues if you use wrap content on a textview or something okay what else okay so there was one last thing that I wanted to touch on which I found a little bit confusing when I started using it so let's just go to a simple demo here so I can have these text views so I've seen a lot of people so in the constraint layouts example there is all the the codelab that you do there's this button that they refer to as the pack button and I think this one can be misused quite a lot so the pack button what it does is if you have a whole bunch of text in something so ok so I have this takes view and I click on this pack button ok so I think which was it this one no this button so this pack button when you click on it so this sort of means and maybe for me like maybe a resistant misunderstanding from my side but it means take up the full width of the screen but when using this button you must just be careful about what exactly it does because if you have a look now it's it's the width on this item to 344 DP which is all fine and well for this size screen but now if I have to change my screen to maybe what size I don't know Nexus 10 you'll see that it actually doesn't take up the full width of the screen so when using this pack button you have to just be very careful about what exactly you're doing with it so I think the intention of this pack button is to sort of make sure it takes up the full width and then you create the constraints so you could create the constraint now and then it should sort of go to to match constraints but now you can see it's still set on 344 DP so this is not a good good idea to do so you would probably want to use this to say match the constraints of this thing I'm not sure why it's done that now with match constraints okay yeah but anyways so the the pack button and I think it's quite a like a sort of troublesome or lead you and it's little troublesome path down down somewhere in in constraint lat so if I give you another example of where you would use it's like if you click on it now and say take up the full width a sort of hard codes this value of 495 DPS so just be careful when using this pack button to make sure that you're not getting these sort of DP values I think you can get away with art using this button at all I personally haven't found really much much value in using it okay so that was those things I think that is all from my side in terms of like errors and that hopefully you've learned some stuff from it there is some examples online so if you want to have a look so let me just get my notes quickly okay so if you want to have a look at the full demonstration of this this layout so this exact cannot that one that one is a one we quickly threw together but this layer that we've got here you can head to this constrain to a demo example on my github if you want as well as yeah so the different things that we covered so I do have there's another video on my YouTube account that does have me going through all the different features of constraint class so stepping through one by one what the different features are so have a look on my on my YouTube account that's also just the rigger view on YouTube and you'll see and like I walked work through all the different things within the constraint layer features so I have a look at that if you haven't used constraints out at all but hopefully this sort of gave you some insight into how I sort of work around in constraint Ladd's very not very elegant when using an android studio but we came to some kind of layout that we have at the end and yeah i think that is all from my side so thank you so much for for tuning in follow me on twitter or say something on on youtube yeah thank you so much for tuning in and I'll see you all see you go back

Channel: Rebecca Franks

Views: 45,196

Rating: 4.9004331 out of 5

Keywords: constraintlayout, android development, layouts, android studio, android, live coding, guidelines, barriers, chains

Id: h1LHzObflwo

Length: 66min 51sec (4011 seconds)

Published: Sun Nov 26 2017

Reddit Comments

[u/SolidScorpion]

Thank you! That was very informative

[u/nicePenguin]

I'm just starting out with Android Development and this has been very useful! Thank you.