1 00:00:00,165 --> 00:00:02,582 (soft music) 2 00:00:05,130 --> 00:00:06,200 Alright, so, I'm gonna ask you 3 00:00:06,200 --> 00:00:07,580 to think a bit now. 4 00:00:07,580 --> 00:00:09,020 Now, we haven't really covered 5 00:00:09,020 --> 00:00:10,980 constraining widgets to each other, 6 00:00:10,980 --> 00:00:13,860 although, I did briefly do it when I added the button 7 00:00:13,860 --> 00:00:15,520 to what we can see on the screen now. 8 00:00:15,520 --> 00:00:17,000 So have a go at this. 9 00:00:17,000 --> 00:00:19,830 Remember that you can't really break anything. 10 00:00:19,830 --> 00:00:21,920 So your challenge is, that using constraints 11 00:00:21,920 --> 00:00:24,410 and changing the scale type of the image, 12 00:00:24,410 --> 00:00:27,270 change the layout from what we have now on screen. 13 00:00:27,270 --> 00:00:29,120 We wanna change it to look like this. 14 00:00:30,160 --> 00:00:32,479 Now remember that you have to delete a constraint 15 00:00:32,479 --> 00:00:34,660 before you can create a new one. 16 00:00:34,660 --> 00:00:36,810 So have a play and get used to the layout designer 17 00:00:36,810 --> 00:00:40,740 and see if you can change the layout to this one. 18 00:00:40,740 --> 00:00:43,450 So pause the video here and have a go at doing that, 19 00:00:43,450 --> 00:00:46,050 and I'll see you when you get back in a few minutes. 20 00:00:47,760 --> 00:00:49,460 Alright, so hopefully you managed to achieve that 21 00:00:49,460 --> 00:00:52,070 or have a good attempt, and are now understanding 22 00:00:52,070 --> 00:00:55,060 a little bit more about how the layout designer works. 23 00:00:55,060 --> 00:00:56,620 So my solution, we're gonna start 24 00:00:56,620 --> 00:00:58,550 by changing the constraint 25 00:00:58,550 --> 00:01:01,540 so that the top of theImageView is constrained 26 00:01:01,540 --> 00:01:03,640 to the bottom of the button. 27 00:01:03,640 --> 00:01:06,730 So, we wanna go over here now and click on the top circle 28 00:01:06,730 --> 00:01:09,380 of the ImageView and delete the existing constraint. 29 00:01:10,280 --> 00:01:11,680 Let me go ahead and do that. 30 00:01:12,680 --> 00:01:16,010 Delete it and then I want to grab the constraint, 31 00:01:16,010 --> 00:01:17,830 click on that on the ImageView 32 00:01:17,830 --> 00:01:20,160 and drag it over to the bottom of the button, 33 00:01:20,160 --> 00:01:24,030 so that the imageView is now constrained to the button. 34 00:01:24,030 --> 00:01:25,250 And you can see that, helpfully, 35 00:01:25,250 --> 00:01:27,310 the blueprint shows the constraints 36 00:01:27,310 --> 00:01:28,750 and provides a visual indication 37 00:01:28,750 --> 00:01:32,130 of where the ImageView currently is allowed to fit. 38 00:01:32,130 --> 00:01:35,270 Now, the ImageView itself is currently a fixed size. 39 00:01:35,270 --> 00:01:37,950 So, to make it fill the space that it's constrained in, 40 00:01:37,950 --> 00:01:40,920 I wanna go over here now and click on the inner lines 41 00:01:40,920 --> 00:01:43,030 to change it to match_constraints, 42 00:01:43,030 --> 00:01:45,070 both vertically and horizontally. 43 00:01:45,070 --> 00:01:48,393 So, I'm gonna click on that, vertically and horizontally, 44 00:01:49,340 --> 00:01:50,180 and you can see now that 45 00:01:50,180 --> 00:01:51,880 I've changed it to match_constraints. 46 00:01:51,880 --> 00:01:53,533 The ImageView is now a lot larger. 47 00:01:54,470 --> 00:01:56,890 Now finally, the image scaleType 48 00:01:56,890 --> 00:01:59,253 is currently set over here to fitXY. 49 00:02:00,150 --> 00:02:03,140 And as a consequence, the image is being scaled 50 00:02:03,140 --> 00:02:05,080 to fill the imageView. 51 00:02:05,080 --> 00:02:09,100 Well, we actually want it scaled to maintain the aspect ratio 52 00:02:09,100 --> 00:02:11,020 so that it remains round. 53 00:02:11,020 --> 00:02:14,170 So, the scaleType has to be changed to centreCrop. 54 00:02:14,170 --> 00:02:15,830 So, I'm gonna click on and do that, 55 00:02:15,830 --> 00:02:18,320 centreCrop, and finally, you 56 00:02:18,320 --> 00:02:20,410 should also check the inspector 57 00:02:20,410 --> 00:02:23,090 and make sure that all the margins are correct. 58 00:02:23,090 --> 00:02:25,970 Now, for the ImageView to be centred in the space, 59 00:02:25,970 --> 00:02:28,330 the left and right margins should be equal 60 00:02:28,330 --> 00:02:30,440 and so should the top and bottom margins. 61 00:02:30,440 --> 00:02:33,520 So, we wanna change those all to 8 dp. 62 00:02:33,520 --> 00:02:35,220 Now, currently, you can see that we've got 63 00:02:35,220 --> 00:02:38,120 three out of four of the margins are set to 16, 64 00:02:38,120 --> 00:02:39,920 so I'm gonna set them all to 8. 65 00:02:43,580 --> 00:02:45,530 Alright, so that's actually it. 66 00:02:45,530 --> 00:02:47,170 So, you're probably already starting to see 67 00:02:47,170 --> 00:02:49,820 that this layout designer is pretty cool, 68 00:02:49,820 --> 00:02:52,120 and the constraint system makes it much easier 69 00:02:52,120 --> 00:02:54,180 to place widgets where you want, 70 00:02:54,180 --> 00:02:56,310 and also have them remain there relative 71 00:02:56,310 --> 00:02:58,780 to the other widgets on the screen. 72 00:02:58,780 --> 00:03:00,810 Now, if you've been using the relative layout 73 00:03:00,810 --> 00:03:02,510 for much of your screen designs, 74 00:03:02,510 --> 00:03:04,410 then you should consider the relative layout 75 00:03:04,410 --> 00:03:06,090 as pretty much dead now. 76 00:03:06,090 --> 00:03:06,950 Now, there's still a place 77 00:03:06,950 --> 00:03:09,270 for the linear layout for simplicity 78 00:03:09,270 --> 00:03:11,780 and we will be looking at that later in the course, 79 00:03:11,780 --> 00:03:13,300 but for just about everything else, 80 00:03:13,300 --> 00:03:16,763 the new constraint layout is a heck of a lot easier to use. 81 00:03:18,090 --> 00:03:20,020 Alright, so I'm gonna finish this introduction 82 00:03:20,020 --> 00:03:22,828 to creating layouts by going through the steps needed 83 00:03:22,828 --> 00:03:25,043 to produce the following layout. 84 00:03:26,070 --> 00:03:28,190 Now, it includes many of the kinds of things 85 00:03:28,190 --> 00:03:31,990 that you'll wanna do when creating layouts. 86 00:03:31,990 --> 00:03:33,690 There's a title, ConstraintLayout, 87 00:03:33,690 --> 00:03:37,170 at the top of the screen, and text to the right of that. 88 00:03:37,170 --> 00:03:38,590 Now, below the title is an image, 89 00:03:38,590 --> 00:03:40,400 and then there are two buttons 90 00:03:40,400 --> 00:03:42,860 at the bottom right of the screen. 91 00:03:42,860 --> 00:03:45,420 Now, the image doesn't really relate to the text, 92 00:03:45,420 --> 00:03:48,120 but you're here to learn about the layout designer, 93 00:03:48,120 --> 00:03:50,293 not to get practice at downloading images. 94 00:03:51,370 --> 00:03:54,870 Alright, so let's have a go at creating this new layout file, 95 00:03:54,870 --> 00:03:58,000 and to do that, we need to actually create a new layout file. 96 00:03:58,000 --> 00:04:00,700 So, if your project pane isn't open, 97 00:04:00,700 --> 00:04:02,170 you may need to expand that. 98 00:04:02,170 --> 00:04:05,317 Mine isn't, so, I'm gonna click on that project to open it. 99 00:04:05,317 --> 00:04:07,300 And we wanna cone come down here to layout, 100 00:04:07,300 --> 00:04:09,770 which, of course, is under the res folder. 101 00:04:09,770 --> 00:04:11,840 We wanna right click on layout, 102 00:04:11,840 --> 00:04:15,283 select New and select Layout resource file. 103 00:04:16,700 --> 00:04:18,160 The other thing that I didn't mention to do 104 00:04:18,160 --> 00:04:19,790 that you should be doing is making sure 105 00:04:19,790 --> 00:04:21,329 that you're in Android view. 106 00:04:21,329 --> 00:04:23,270 So, if by chance, you can't see this easily, 107 00:04:23,270 --> 00:04:25,450 just come over here and click on this dropdown 108 00:04:25,450 --> 00:04:27,150 and select Android. 109 00:04:27,150 --> 00:04:28,610 Now, I can't do this at the moment because 110 00:04:28,610 --> 00:04:31,170 I've got this pop up window open. 111 00:04:31,170 --> 00:04:34,450 Alright, so we're gonna call this layout note_layout. 112 00:04:34,450 --> 00:04:37,050 So, I'm gonna type that in there under the file name. 113 00:04:38,024 --> 00:04:41,330 Now, you don't need to type the .xml extension 114 00:04:41,330 --> 00:04:43,250 because Android Studio will provide that 115 00:04:43,250 --> 00:04:44,870 for you automatically. 116 00:04:44,870 --> 00:04:47,709 Now, the next thing over here, Root element, 117 00:04:47,709 --> 00:04:50,630 that means the type of layout to create. 118 00:04:50,630 --> 00:04:53,470 And currently that defaults to LinearLayout. 119 00:04:53,470 --> 00:04:54,303 Now, as I've mentioned before, 120 00:04:54,303 --> 00:04:57,230 we're gonna be looking at linear layout later, 121 00:04:57,230 --> 00:05:00,280 but for this exercise, we want a ConstraintLayout. 122 00:05:00,280 --> 00:05:01,557 So, I'm just gonna over type that. 123 00:05:01,557 --> 00:05:03,320 I'm gonna delete LinearLayout 124 00:05:04,210 --> 00:05:06,570 and I'm gonna start typing ConstraintLayout. 125 00:05:06,570 --> 00:05:08,120 Notice that when I started typing that in, 126 00:05:08,120 --> 00:05:11,350 Android Studio's dropped down a list of likely things. 127 00:05:11,350 --> 00:05:12,950 So the one we wanna choose here is the 128 00:05:12,950 --> 00:05:16,870 android.support.constraint.ContraintLayout. 129 00:05:16,870 --> 00:05:19,600 So, I'm gonna select that by double clicking it 130 00:05:19,600 --> 00:05:21,010 and in general, it's a good idea 131 00:05:21,010 --> 00:05:24,110 to select from the list when you get a situation like that, 132 00:05:24,110 --> 00:05:26,070 to prevent typing errors. 133 00:05:26,070 --> 00:05:27,100 Now, there's lots of other things 134 00:05:27,100 --> 00:05:29,480 that we can actually type and select here. 135 00:05:29,480 --> 00:05:31,400 But don't worry about those for now. 136 00:05:31,400 --> 00:05:33,190 We're gonna be using those later on in the course. 137 00:05:33,190 --> 00:05:34,813 For now, just click on OK. 138 00:05:37,490 --> 00:05:39,600 Now, while we're creating this layout, 139 00:05:39,600 --> 00:05:43,400 you wanna make sure that autoconnect is enabled, 140 00:05:43,400 --> 00:05:46,520 using the magnet button on the designer toolbar. 141 00:05:46,520 --> 00:05:47,810 Now you can see that in my case, 142 00:05:47,810 --> 00:05:50,870 it was enabled, so I've just disabled it by clicking it. 143 00:05:50,870 --> 00:05:53,680 So, I wanna click it again and you'll know that 144 00:05:53,680 --> 00:05:57,350 the autoconnect is enabled if there's no slash or no line 145 00:05:57,350 --> 00:06:00,718 over the, on top of the magnet and also, 146 00:06:00,718 --> 00:06:03,180 if we just our mouse cursor over there, 147 00:06:03,180 --> 00:06:04,790 it actually tells you there's an option 148 00:06:04,790 --> 00:06:08,030 to turn off autoconnect, which clearly means that it's on. 149 00:06:08,030 --> 00:06:10,050 Now, autoconnect can sometimes get on the way 150 00:06:10,050 --> 00:06:13,120 and cause problems, and if you wanna create constraints 151 00:06:13,120 --> 00:06:14,550 that it can't work out, 152 00:06:14,550 --> 00:06:16,680 you will need to disable it sometimes. 153 00:06:16,680 --> 00:06:18,620 But I've turned it on now, so let's see 154 00:06:18,620 --> 00:06:19,790 what sort of a job it does 155 00:06:19,790 --> 00:06:21,540 of this layout that we're creating. 156 00:06:23,160 --> 00:06:24,880 Alright, so we're gonna shrink the project pane now 157 00:06:24,880 --> 00:06:26,610 to make a bit more space. 158 00:06:26,610 --> 00:06:30,310 You wanna drag a TextView to the top left of the screen. 159 00:06:30,310 --> 00:06:33,770 Now, Google have helpfully categorised the widgets 160 00:06:33,770 --> 00:06:35,770 and it will take you a while to remember 161 00:06:35,770 --> 00:06:38,220 where the common ones are. You can now click on 162 00:06:38,220 --> 00:06:39,700 the various categories over in here 163 00:06:39,700 --> 00:06:41,330 to see what they contain. 164 00:06:41,330 --> 00:06:43,440 But don't try, or don't worry about trying 165 00:06:43,440 --> 00:06:45,220 to memorise it all right now. 166 00:06:45,220 --> 00:06:46,840 After a while, you'll find that you'll remember 167 00:06:46,840 --> 00:06:48,810 the widgets you use most frequently. 168 00:06:48,810 --> 00:06:51,780 So this top category here, All, 169 00:06:51,780 --> 00:06:54,770 unsurprisingly contains all the widgets. 170 00:06:54,770 --> 00:06:56,280 The others are Google's idea 171 00:06:56,280 --> 00:06:59,140 of where things are and may change. 172 00:06:59,140 --> 00:07:02,340 Now, the TextView widget appears in the Text category. 173 00:07:02,340 --> 00:07:04,260 So, I can come over here and click on Text 174 00:07:04,260 --> 00:07:05,370 and there's our TextView. 175 00:07:05,370 --> 00:07:09,020 So I'm gonna drag that to the top left hand corner 176 00:07:09,020 --> 00:07:10,210 of the screen and release it 177 00:07:10,210 --> 00:07:13,210 when the vertical and horizontal lines appear. 178 00:07:13,210 --> 00:07:14,520 So, when wanna release this now, 179 00:07:14,520 --> 00:07:16,250 now that I've got the horizontal 180 00:07:16,250 --> 00:07:18,053 and vertical lines appearing, 181 00:07:19,200 --> 00:07:22,090 notice that in the blueprint, that 182 00:07:22,090 --> 00:07:24,247 the TextView is now automatically constrained to the top 183 00:07:24,247 --> 00:07:26,490 and left edges of the layout. 184 00:07:26,490 --> 00:07:29,580 And we can see confirmation in the top right hand corner, 185 00:07:29,580 --> 00:07:33,350 in inspector, that we've now got a constraint to the left, 186 00:07:33,350 --> 00:07:35,140 and also a constraint at the top. 187 00:07:35,140 --> 00:07:36,630 Now, if in your situation, 188 00:07:36,630 --> 00:07:38,870 it hasn't created both constraints, 189 00:07:38,870 --> 00:07:40,570 then just drag the TextView slightly 190 00:07:40,570 --> 00:07:43,220 until you see those guidelines that I showed you 191 00:07:43,220 --> 00:07:45,100 and it should, then, work. 192 00:07:45,100 --> 00:07:47,322 Now, the autoconnect has done that for us, 193 00:07:47,322 --> 00:07:48,800 and it's pretty cool when you're 194 00:07:48,800 --> 00:07:50,880 placing the widgets initially. 195 00:07:50,880 --> 00:07:52,690 It does work quite well but, 196 00:07:52,690 --> 00:07:55,500 if it starts creating constraints that you don't want, 197 00:07:55,500 --> 00:07:57,220 then you can turn it off. 198 00:07:57,220 --> 00:07:58,710 Personally, I normally turn it off 199 00:07:58,710 --> 00:08:00,700 once I've placed all my widgets. 200 00:08:00,700 --> 00:08:03,760 That way, I get its' help when laying them out to start with 201 00:08:03,760 --> 00:08:05,080 but then I take back control 202 00:08:05,080 --> 00:08:07,540 to put the finishing touches to the layout. 203 00:08:07,540 --> 00:08:09,100 Now, keep in mind that autoconnect 204 00:08:09,100 --> 00:08:12,300 will only affect the widget that's currently being moved. 205 00:08:12,300 --> 00:08:15,870 So, any other widgets in the layout won't be affected. 206 00:08:15,870 --> 00:08:17,540 Alright, so the next thing we need to add 207 00:08:17,540 --> 00:08:20,440 is a box where users can type their text. 208 00:08:20,440 --> 00:08:23,200 Now, whenever you want a widget to allow data entry, 209 00:08:23,200 --> 00:08:26,400 you'll probably wanna use one of Text Field's widgets. 210 00:08:26,400 --> 00:08:29,600 In this case, we're gonna use a multi-line text widget. 211 00:08:29,600 --> 00:08:32,549 And we can see we've got this Multiline Text over here. 212 00:08:32,549 --> 00:08:34,070 So, we're gonna drag one of these over to the right 213 00:08:34,070 --> 00:08:35,539 of the screen and we're gonna place it 214 00:08:35,539 --> 00:08:37,679 roughly below the TextView. 215 00:08:37,679 --> 00:08:39,400 I'm gonna drag that over, 216 00:08:39,400 --> 00:08:41,590 and as I drag it over you can see there's 217 00:08:41,590 --> 00:08:44,950 a good visual representation, a good indication 218 00:08:44,950 --> 00:08:48,010 if you like, of where the constraints will be added. 219 00:08:48,010 --> 00:08:49,473 Just by the dotted lines, 220 00:08:50,470 --> 00:08:52,070 bearing in mind we can always change those later. 221 00:08:52,070 --> 00:08:53,970 So I'm just gonna leave it there for now. 222 00:08:55,320 --> 00:08:56,594 And you can see now that I've done that, 223 00:08:56,594 --> 00:08:59,250 Our constraint this automatically been added to the left 224 00:08:59,250 --> 00:09:02,053 and to the right of our Multiline Text. 225 00:09:03,340 --> 00:09:04,850 So, that was autoconnect in action 226 00:09:04,850 --> 00:09:06,870 again, as it created the constraints 227 00:09:06,870 --> 00:09:09,240 but keep in mind it doesn't always create all 228 00:09:09,240 --> 00:09:11,260 the constraints you want. 229 00:09:11,260 --> 00:09:12,093 The good thing is, though, 230 00:09:12,093 --> 00:09:15,130 that creating constraints manually is so easy 231 00:09:15,130 --> 00:09:17,020 that it's not really worth spending too much time 232 00:09:17,020 --> 00:09:20,010 trying to drop the widgets onto the layout exactly. 233 00:09:20,010 --> 00:09:21,830 In fact, it can get very fiddly 234 00:09:21,830 --> 00:09:24,350 to get this Multiline, edit text widget 235 00:09:24,350 --> 00:09:26,030 to be constrained to the TextView, 236 00:09:26,030 --> 00:09:27,690 which is what we wanna do. 237 00:09:27,690 --> 00:09:29,070 The layout designer seems to prefer 238 00:09:29,070 --> 00:09:30,830 to constrain it to the left edge of the screen, 239 00:09:30,830 --> 00:09:32,350 and you can see in my case, it constrained it 240 00:09:32,350 --> 00:09:33,800 to the left and to the right. 241 00:09:34,740 --> 00:09:38,040 Now, autoconnect may have created a top constraint too. 242 00:09:38,040 --> 00:09:40,400 It didn't in my case, but it may have for you. 243 00:09:40,400 --> 00:09:41,660 It really depends on whether you get 244 00:09:41,660 --> 00:09:44,560 the guidelines before dropping the widget. 245 00:09:44,560 --> 00:09:46,950 It doesn't always manage to work out what you want, 246 00:09:46,950 --> 00:09:49,070 so, consider it a nice feature 247 00:09:49,070 --> 00:09:50,960 but make sure you always check to make sure 248 00:09:50,960 --> 00:09:53,460 you have the constraints that you actually wanted. 249 00:09:54,300 --> 00:09:56,150 Now, in this case, I don't want the text field 250 00:09:56,150 --> 00:09:57,700 wondering up the screen. 251 00:09:57,700 --> 00:10:00,200 It should always start below the title. 252 00:10:00,200 --> 00:10:02,553 So, the way to do that is to make sure that there's 253 00:10:02,553 --> 00:10:04,950 a constraint from the top of the text field 254 00:10:04,950 --> 00:10:07,710 to the bottom of the title's TextView. 255 00:10:07,710 --> 00:10:09,500 So, I'm gonna drag the top circle up to 256 00:10:09,500 --> 00:10:11,370 the bottom of the title and obviously, 257 00:10:11,370 --> 00:10:13,070 you'll only be doing that if autoconnect 258 00:10:13,070 --> 00:10:14,010 didn't do that for you. 259 00:10:14,010 --> 00:10:16,180 And obviously, it didn't do that for me either. 260 00:10:16,180 --> 00:10:17,410 So, I'm going to drag it from the top 261 00:10:17,410 --> 00:10:20,490 of the Multiline Text to the bottom of the TextView. 262 00:10:22,720 --> 00:10:24,910 And, by the way, if it did create a constraint 263 00:10:24,910 --> 00:10:26,450 at the top of the screen, you would have needed 264 00:10:26,450 --> 00:10:29,330 to delete that first, by waiting for the red circle 265 00:10:29,330 --> 00:10:31,310 to appear above the constraint handle. 266 00:10:31,310 --> 00:10:34,393 But, as you saw in my case, we didn't have a top constraint. 267 00:10:35,350 --> 00:10:37,920 Now, when working with these constraint handles, 268 00:10:37,920 --> 00:10:40,100 it's actually worth waiting a second 269 00:10:40,100 --> 00:10:42,760 once the mouse pointer is over the circle. 270 00:10:42,760 --> 00:10:46,300 Once you see the handle flash, then you can start dragging. 271 00:10:46,300 --> 00:10:49,140 I've had problems if I started dragging early 272 00:10:49,140 --> 00:10:51,710 and it can end up dragging the entire widget, 273 00:10:51,710 --> 00:10:53,670 rather than creating a constraint, 274 00:10:53,670 --> 00:10:55,220 so, it is usually best to wait. 275 00:10:56,420 --> 00:10:58,780 Alright, so the next constraint on the text field 276 00:10:58,780 --> 00:11:02,360 is to anchor it to the right edge of the layout. 277 00:11:02,360 --> 00:11:05,520 Now, that way, it can be resized as the orientation changes 278 00:11:05,520 --> 00:11:08,140 or different size screens are used. 279 00:11:08,140 --> 00:11:11,150 Now, in my case, I've already got it constrained 280 00:11:11,150 --> 00:11:11,983 to the right hand side but 281 00:11:11,983 --> 00:11:14,110 I'm just gonna delete that again anyway, 282 00:11:14,110 --> 00:11:16,790 and then I'm gonna constrain it again by dragging over 283 00:11:16,790 --> 00:11:19,060 to the right edge of the layout. 284 00:11:19,060 --> 00:11:21,250 Alright, so the final constraint should now be 285 00:11:21,250 --> 00:11:23,480 from the left edge of the text field 286 00:11:23,480 --> 00:11:25,713 to the right edge of the TextView. 287 00:11:26,550 --> 00:11:28,390 So, what I'm going to do is delete that constraint 288 00:11:28,390 --> 00:11:31,550 by clicking it, then I'm going to drag 289 00:11:32,920 --> 00:11:34,920 from the left edge of our text field 290 00:11:34,920 --> 00:11:37,370 to the right edge of our TextView. 291 00:11:37,370 --> 00:11:40,570 Now, to keep it centred horizontally in it's space, 292 00:11:40,570 --> 00:11:42,800 we wanna use the inspector to set both 293 00:11:42,800 --> 00:11:45,810 the left and right margins to the same value. 294 00:11:45,810 --> 00:11:47,070 So, I'm gonna click on that to make sure 295 00:11:47,070 --> 00:11:50,610 that it's selected and I'm gonna use 16 dp, 296 00:11:50,610 --> 00:11:53,490 bearing in mind that because we've created a new layout, 297 00:11:53,490 --> 00:11:55,380 the default has been reset back to 8 298 00:11:55,380 --> 00:11:56,800 for the default margins. 299 00:11:56,800 --> 00:11:59,050 You could change that if you wanted to to 16. 300 00:11:59,050 --> 00:12:02,390 The dropdown over here, though, also click on that, 301 00:12:02,390 --> 00:12:04,940 gives us the most common margin settings 302 00:12:04,940 --> 00:12:07,150 but you can actually type in different values if you want. 303 00:12:07,150 --> 00:12:08,910 You've seen me do that in the past. 304 00:12:08,910 --> 00:12:11,470 but, I'm going to select 16 for the left, 305 00:12:11,470 --> 00:12:13,853 and 16 for the right margins. 306 00:12:14,910 --> 00:12:16,900 And, again, as we talked about, setting the value 307 00:12:16,900 --> 00:12:18,849 you want in the default margins button, 308 00:12:18,849 --> 00:12:21,900 saves having to set each margin individually. 309 00:12:21,900 --> 00:12:25,120 The constraints will be created with a default margin. 310 00:12:25,120 --> 00:12:27,650 And, by the way, I generally create constraints 311 00:12:27,650 --> 00:12:30,430 in the blueprint, but you can also drag the constraints' 312 00:12:30,430 --> 00:12:32,910 circles in the design, if you prefer. 313 00:12:32,910 --> 00:12:34,467 That's useful if you're short of screen space 314 00:12:34,467 --> 00:12:36,590 and have turned off the blueprint. 315 00:12:36,590 --> 00:12:39,030 Alright, so let's finish this video here now. 316 00:12:39,030 --> 00:12:42,270 In the next video, we'll continue on enhancing this layout. 317 00:12:42,270 --> 00:12:43,600 We're gonna add two buttons 318 00:12:43,600 --> 00:12:45,590 to the bottom right of the layout. 319 00:12:45,590 --> 00:12:47,340 So, I'll see you in the next video.