1 00:00:04,760 --> 00:00:06,800 Alright so let's go ahead now and add 2 00:00:06,800 --> 00:00:08,900 these two buttons to the bottom right of 3 00:00:08,900 --> 00:00:11,750 the layout. Now the buttons will appear 4 00:00:11,750 --> 00:00:14,299 under the Widgets category. So I'm gonna click on 5 00:00:14,299 --> 00:00:17,900 Widgets. Now I'm going to select Button and 6 00:00:17,900 --> 00:00:19,610 I'm going to drag it right down to the 7 00:00:19,610 --> 00:00:22,550 bottom right hand corner. Now notice that 8 00:00:22,550 --> 00:00:24,289 when I do that and the guidelines appear 9 00:00:24,289 --> 00:00:26,570 both horizontally and vertically, when I 10 00:00:26,570 --> 00:00:28,699 release my button, the mouse button, 11 00:00:28,699 --> 00:00:31,970 we've unsurprisingly got constraints on 12 00:00:31,970 --> 00:00:33,470 the right hand side and on the bottom 13 00:00:33,470 --> 00:00:35,210 side. So it's now constrained to the bottom 14 00:00:35,210 --> 00:00:37,190 right of the layout, and in this case, 15 00:00:37,190 --> 00:00:39,770 it's exactly what I wanted to happen. Now 16 00:00:39,770 --> 00:00:41,210 it's pretty cool but only works if you 17 00:00:41,210 --> 00:00:43,039 get those guidelines before dropping the 18 00:00:43,039 --> 00:00:45,199 widget. So let's see if it works out what 19 00:00:45,199 --> 00:00:47,570 to do though with the second button. Now 20 00:00:47,570 --> 00:00:48,949 this second button is going to be the 21 00:00:48,949 --> 00:00:51,350 OK button and will go to the left of 22 00:00:51,350 --> 00:00:53,510 the first one. So the aim here is to 23 00:00:53,510 --> 00:00:55,789 drop it about 16 dp to the left of the 24 00:00:55,789 --> 00:00:59,629 first button. So I'm gonna select that, drag 25 00:00:59,629 --> 00:01:04,459 it over, around about 16 dp to the left 26 00:01:04,459 --> 00:01:07,850 of the first button, and release. Now in 27 00:01:07,850 --> 00:01:09,590 this case, we've only got one constraint, 28 00:01:09,590 --> 00:01:11,420 and actually, what I'll do is I'll delete 29 00:01:11,420 --> 00:01:18,710 that again, and as I try and move it so it's 30 00:01:18,710 --> 00:01:22,100 round about in that area, release it. You 31 00:01:22,100 --> 00:01:23,450 can see it hasn't quite got it right 32 00:01:23,450 --> 00:01:25,130 here, we've got a constraint just at the 33 00:01:25,130 --> 00:01:27,980 bottom at the moment. Now if you don't 34 00:01:27,980 --> 00:01:29,540 get the left-hand button constrained to 35 00:01:29,540 --> 00:01:31,610 the right one, you can just create the 36 00:01:31,610 --> 00:01:32,930 constraint manually and I'm just going to go 37 00:01:32,930 --> 00:01:34,460 ahead and do that. You can see at the 38 00:01:34,460 --> 00:01:36,470 moment, we've only got a constraint from 39 00:01:36,470 --> 00:01:38,570 the button to the bottom of the layout, 40 00:01:38,570 --> 00:01:39,890 so I'm going to constrain it to the 41 00:01:39,890 --> 00:01:42,470 left, constrain the right of the second 42 00:01:42,470 --> 00:01:45,290 button to the left of the first one. And 43 00:01:45,290 --> 00:01:46,460 you can see that we've now got two 44 00:01:46,460 --> 00:01:48,800 constraints. Now even though that's 45 00:01:48,800 --> 00:01:50,330 happened, that's not quite what we want. 46 00:01:50,330 --> 00:01:52,580 The two buttons should be aligned to 47 00:01:52,580 --> 00:01:54,710 each other vertically, and although this 48 00:01:54,710 --> 00:01:56,480 sort of does that, they are still 49 00:01:56,480 --> 00:01:58,970 independent. Now let's put some text in 50 00:01:58,970 --> 00:02:00,860 the buttons so that we can refer to them 51 00:02:00,860 --> 00:02:03,080 as OK and Cancel, and that'll make it a 52 00:02:03,080 --> 00:02:04,670 little bit clearer on what I'm talking 53 00:02:04,670 --> 00:02:06,650 about. I'm going to make sure that the 54 00:02:06,650 --> 00:02:09,560 left button is clicked, which it is. I'm gonna 55 00:02:09,560 --> 00:02:12,530 come up over here into text, then I'm 56 00:02:12,530 --> 00:02:15,280 going to type in OK and just press ENTER, 57 00:02:15,280 --> 00:02:18,319 and you can see that the text has updated 58 00:02:18,319 --> 00:02:20,840 that button. Now be careful when doing 59 00:02:20,840 --> 00:02:23,450 that and use the text attribute, and not 60 00:02:23,450 --> 00:02:25,249 the one below that with the wrench or 61 00:02:25,249 --> 00:02:28,099 spanner before it. Now any attribute you 62 00:02:28,099 --> 00:02:29,989 see in inspector marked with a wrench 63 00:02:29,989 --> 00:02:32,689 is a tool attribute, and that means that 64 00:02:32,689 --> 00:02:34,489 it only affects the display in the 65 00:02:34,489 --> 00:02:36,950 layout designer. Tool attributes are 66 00:02:36,950 --> 00:02:39,489 ignored when the app runs on a device. 67 00:02:39,489 --> 00:02:42,170 Alright, so now if I drag the OK 68 00:02:42,170 --> 00:02:46,010 button up the screen, you can see that 69 00:02:46,010 --> 00:02:48,560 it's no longer aligned with the Cancel 70 00:02:48,560 --> 00:02:50,959 button. Now there's a number of ways that 71 00:02:50,959 --> 00:02:53,359 we can get the effect we want. I could 72 00:02:53,359 --> 00:02:55,189 constrain the bottom of the OK button 73 00:02:55,189 --> 00:02:57,590 to the bottom of the Cancel button, or 74 00:02:57,590 --> 00:03:00,109 perhaps constrain its top to the top of 75 00:03:00,109 --> 00:03:02,299 the Cancel button. Now either of those 76 00:03:02,299 --> 00:03:04,549 would work fine, but when you're dealing 77 00:03:04,549 --> 00:03:07,040 with widgets containing text, it's also 78 00:03:07,040 --> 00:03:09,079 useful to be able to line up the 79 00:03:09,079 --> 00:03:11,359 baseline of the text, rather than the 80 00:03:11,359 --> 00:03:14,209 edges of the widget. Now both our buttons, 81 00:03:14,209 --> 00:03:16,400 rather, are the same size and only 82 00:03:16,400 --> 00:03:18,430 contain a single line of text, so 83 00:03:18,430 --> 00:03:20,750 constraining the tops or bottoms would 84 00:03:20,750 --> 00:03:22,340 work, but I want to show you how to 85 00:03:22,340 --> 00:03:24,799 create a baseline constraint, especially 86 00:03:24,799 --> 00:03:26,560 because it can be a little bit fiddly. 87 00:03:26,560 --> 00:03:28,879 What I'll do first, though, is I'll just change 88 00:03:28,879 --> 00:03:31,840 the text on the other button to Cancel, 89 00:03:31,840 --> 00:03:34,180 making sure that I'm not using the 90 00:03:34,180 --> 00:03:37,220 attribute with the wrench, Cancel. Press 91 00:03:37,220 --> 00:03:38,299 ENTER there to update it, 92 00:03:38,299 --> 00:03:40,099 and go back to the OK button by 93 00:03:40,099 --> 00:03:42,409 selecting it again. Alright, so 94 00:03:42,409 --> 00:03:44,569 both our buttons are the same size and 95 00:03:44,569 --> 00:03:46,519 only contain a single line of text, as I 96 00:03:46,519 --> 00:03:48,889 said. So, we could constrain the tops or 97 00:03:48,889 --> 00:03:50,959 bottoms and that would work, but what I 98 00:03:50,959 --> 00:03:52,159 really want to do is show you how to 99 00:03:52,159 --> 00:03:54,470 create a baseline constraint, again, 100 00:03:54,470 --> 00:03:57,319 because it can be quite fiddly. Now I 101 00:03:57,319 --> 00:03:59,060 said previously that there were four 102 00:03:59,060 --> 00:04:01,370 constraint handles, one on each edge of 103 00:04:01,370 --> 00:04:03,169 the widget, but there's actually a fifth 104 00:04:03,169 --> 00:04:06,109 on widgets that contain text and it's an 105 00:04:06,109 --> 00:04:07,849 oval right in the middle of the button, 106 00:04:07,849 --> 00:04:10,729 but it doesn't actually appear until you 107 00:04:10,729 --> 00:04:13,280 ask for it. So making sure that you've 108 00:04:13,280 --> 00:04:15,169 selected the OK button, which I've done, 109 00:04:15,169 --> 00:04:16,909 and it's got this other little button 110 00:04:16,909 --> 00:04:19,399 down here now, called ab, and I'll just 111 00:04:19,399 --> 00:04:21,168 move the cursor away there briefly so 112 00:04:21,168 --> 00:04:23,449 that disappears. And I can come over 113 00:04:23,449 --> 00:04:26,000 here, you see the ab, an Edit Baseline. 114 00:04:26,000 --> 00:04:28,099 So if I click on that, that 115 00:04:28,099 --> 00:04:30,169 causes the baseline constraint handle to 116 00:04:30,169 --> 00:04:31,460 become available, 117 00:04:31,460 --> 00:04:33,319 and you can see that's now appeared in 118 00:04:33,319 --> 00:04:36,020 the middle of the OK button. Now when I 119 00:04:36,020 --> 00:04:38,389 click that and start to drag, every 120 00:04:38,389 --> 00:04:40,250 widget that supports baseline 121 00:04:40,250 --> 00:04:42,500 constraints gets an oval handle in the 122 00:04:42,500 --> 00:04:44,690 middle. And I'm just going to start that 123 00:04:44,690 --> 00:04:47,750 by just selecting it, and notice now that 124 00:04:47,750 --> 00:04:50,780 in the Cancel button, we've also got that 125 00:04:50,780 --> 00:04:53,509 baseline, and also in the TextView at 126 00:04:53,509 --> 00:04:55,699 the top left hand corner, you can see one 127 00:04:55,699 --> 00:04:56,660 there as well. So I'm just going to 128 00:04:56,660 --> 00:04:58,729 release the mouse button and you can see 129 00:04:58,729 --> 00:05:00,289 that they disappear again. So I'm gonna 130 00:05:00,289 --> 00:05:02,479 hold it again now, and also the 131 00:05:02,479 --> 00:05:04,220 text edit as well, has also got that 132 00:05:04,220 --> 00:05:07,220 baseline, the oval. So what we want to do 133 00:05:07,220 --> 00:05:09,740 is hover over the eye of the oval until 134 00:05:09,740 --> 00:05:12,229 the handle flashes. So I'll just do that . 135 135 00:05:12,229 --> 00:05:13,940 again just to make it clear, so hover 136 00:05:13,940 --> 00:05:15,830 over it until it flashes, then you can 137 00:05:15,830 --> 00:05:17,150 hold, or click your left mouse 138 00:05:17,150 --> 00:05:19,340 button. That then enables that for 139 00:05:19,340 --> 00:05:21,229 dragging, and what we want to do at this 140 00:05:21,229 --> 00:05:23,630 point now, is to drag the oval into the 141 00:05:23,630 --> 00:05:25,880 Cancel button. And just before I do that, 142 00:05:25,880 --> 00:05:27,919 though, it is important to wait for that 143 00:05:27,919 --> 00:05:30,949 flash before you create a baseline 144 00:05:30,949 --> 00:05:33,229 constraint, more so than with the other 145 00:05:33,229 --> 00:05:35,419 four constraints, and you'll discover the 146 00:05:35,419 --> 00:05:36,669 problem for yourself when you start 147 00:05:36,669 --> 00:05:38,960 inadvertently dragging widgets around 148 00:05:38,960 --> 00:05:41,090 the screen. So now you know the solution. 149 00:05:41,090 --> 00:05:44,210 Alright, so I'm still, or still have the 150 00:05:44,210 --> 00:05:47,270 button selected, and I'm gonna drag the 151 00:05:47,270 --> 00:05:49,580 oval from the OK button into the 152 00:05:49,580 --> 00:05:51,590 Cancel button, and then release the mouse 153 00:05:51,590 --> 00:05:53,810 button to create the constraint. So I'm going to go over 154 00:05:53,810 --> 00:05:56,960 and do that, release it, and you can see we've 155 00:05:56,960 --> 00:05:59,060 now got a constraint from the OK 156 00:05:59,060 --> 00:06:02,120 button to the Cancel button. Now by the 157 00:06:02,120 --> 00:06:03,680 way, if there was a constraint from the 158 00:06:03,680 --> 00:06:06,139 top or bottom of the OK button, that 159 00:06:06,139 --> 00:06:08,000 will have been deleted, and that's 160 00:06:08,000 --> 00:06:09,770 because you can't have top and bottom 161 00:06:09,770 --> 00:06:11,990 constraints as well as a baseline 162 00:06:11,990 --> 00:06:14,150 constraint. So in other words, you can 163 00:06:14,150 --> 00:06:15,800 constrain the top and bottom of the 164 00:06:15,800 --> 00:06:18,740 button or you can constrain its baseline. 165 00:06:18,740 --> 00:06:21,710 You can't do both. So notice that the top 166 00:06:21,710 --> 00:06:24,110 and bottom constraint handles have now 167 00:06:24,110 --> 00:06:26,539 disappeared from the OK button. So the 168 00:06:26,539 --> 00:06:27,979 OK button is now constrained 169 00:06:27,979 --> 00:06:30,500 vertically to remain lined up with the 170 00:06:30,500 --> 00:06:33,830 baseline of the Cancel button. Now a 171 00:06:33,830 --> 00:06:35,389 baseline constraint like this is 172 00:06:35,389 --> 00:06:37,460 different to constraining the top or 173 00:06:37,460 --> 00:06:39,949 bottom of the button. In this case, it's 174 00:06:39,949 --> 00:06:42,440 the actual text that lines up. So if the 175 00:06:42,440 --> 00:06:44,180 buttons are different heights, the layout 176 00:06:44,180 --> 00:06:44,900 looks better, 177 00:06:44,900 --> 00:06:46,820 and that's because the text itself is 178 00:06:46,820 --> 00:06:49,520 aligned. Now when it was constrained to 179 00:06:49,520 --> 00:06:51,410 the bottom edge of the layout, that 180 00:06:51,410 --> 00:06:52,759 allowed me to drag it up and down the 181 00:06:52,759 --> 00:06:55,160 screen. The only thing that changed was 182 00:06:55,160 --> 00:06:56,660 the distance from the bottom of the 183 00:06:56,660 --> 00:06:59,570 layout. So now though, it's constrained to 184 00:06:59,570 --> 00:07:01,850 the center button. So if I try to drag 185 00:07:01,850 --> 00:07:05,389 the OK button up and down, you'll find 186 00:07:05,389 --> 00:07:07,190 that nothing happens. I can drag it left 187 00:07:07,190 --> 00:07:09,590 or right, but I physically can't now drag 188 00:07:09,590 --> 00:07:12,199 it up to any higher than the Cancel 189 00:07:12,199 --> 00:07:14,840 button. But even cooler, though, watch what 190 00:07:14,840 --> 00:07:16,610 happens when I drag the Cancel button up 191 00:07:16,610 --> 00:07:20,720 or down. When the Cancel button moves up 192 00:07:20,720 --> 00:07:22,160 and down, the OK button 193 00:07:22,160 --> 00:07:23,900 follows it, and that's because of the 194 00:07:23,900 --> 00:07:25,580 vertical constraint. I can put that back 195 00:07:25,580 --> 00:07:30,949 to where it was now. I might just tidy 196 00:07:30,949 --> 00:07:34,180 this up a little bit by changing the 197 00:07:34,180 --> 00:07:37,810 margins to 16 for both. 198 00:07:37,810 --> 00:07:40,880 Now whether I'd constrained the top, bottom 199 00:07:40,880 --> 00:07:43,070 or baseline, that would still be the case. 200 00:07:43,070 --> 00:07:46,130 The OK button can't be moved vertically, 201 00:07:46,130 --> 00:07:48,199 and that's because it's constrained to 202 00:07:48,199 --> 00:07:50,180 the Cancel button, and when the Cancel 203 00:07:50,180 --> 00:07:52,310 button moves vertically, the OK button 204 00:07:52,310 --> 00:07:55,490 follows. Now notice also, that when the OK 205 00:07:55,490 --> 00:07:58,340 button's selected, up in the inspector, 206 00:07:58,340 --> 00:07:59,479 it shows sort of, like a 207 00:07:59,479 --> 00:08:01,430 downwards arrow to indicate that there 208 00:08:01,430 --> 00:08:04,039 is a constraint, but we can't change the 209 00:08:04,039 --> 00:08:06,199 margin value like you can with the 210 00:08:06,199 --> 00:08:07,460 constraint to the right. So you can see 211 00:08:07,460 --> 00:08:08,900 that there's no facility for me to 212 00:08:08,900 --> 00:08:11,150 change that margin, and that's because 213 00:08:11,150 --> 00:08:13,039 baseline constraints, in fact, don't have 214 00:08:13,039 --> 00:08:16,280 margins. Alright, so let's select the 215 00:08:16,280 --> 00:08:19,340 edit text widget again. You can see at 216 00:08:19,340 --> 00:08:21,620 the moment that it's constrained to the 217 00:08:21,620 --> 00:08:24,919 right-hand edge of the screen. So we've got 218 00:08:24,919 --> 00:08:26,260 this constraint to the right-hand side. 219 00:08:26,260 --> 00:08:29,960 Now, ideally, it should grow as text is 220 00:08:29,960 --> 00:08:32,270 entered, and if you remember from earlier, 221 00:08:32,270 --> 00:08:33,950 that means that we should set the height 222 00:08:33,950 --> 00:08:36,289 to wrap_content by clicking the inner 223 00:08:36,289 --> 00:08:39,169 lines in the inspector. I'm going to do 224 00:08:39,169 --> 00:08:40,940 that in a minute, but first what I'm 225 00:08:40,940 --> 00:08:42,890 going to do is put some text into it, so 226 00:08:42,890 --> 00:08:44,930 you can see what's happening. Now 227 00:08:44,930 --> 00:08:46,310 normally, you'd allow the user to enter 228 00:08:46,310 --> 00:08:47,839 text in there while the app is running, 229 00:08:47,839 --> 00:08:50,360 but to save having to type in a load of 230 00:08:50,360 --> 00:08:52,220 text in the emulator, I'm going to paste 231 00:08:52,220 --> 00:08:53,930 some text into the text property here 232 00:08:53,930 --> 00:08:55,910 instead and press Enter, 233 00:08:55,910 --> 00:08:57,470 and that text is available in the 234 00:08:57,470 --> 00:08:58,730 resources section of the video 235 00:08:58,730 --> 00:09:00,950 so that so you can do that yourself as 236 00:09:00,950 --> 00:09:03,170 well, if you're following along. So I'm 237 00:09:03,170 --> 00:09:04,250 going to come over here to the text, and 238 00:09:04,250 --> 00:09:06,230 again, I'm making sure that I'm not 239 00:09:06,230 --> 00:09:07,610 clicking on the text with the wrench and 240 00:09:07,610 --> 00:09:11,050 I'm going to paste in the text and press Enter. 241 00:09:11,050 --> 00:09:13,850 Now it doesn't expand until the layout 242 00:09:13,850 --> 00:09:16,130 _height property is set to wrap_content. 243 00:09:16,130 --> 00:09:18,920 So if your edit text widget isn't set to 244 00:09:18,920 --> 00:09:20,780 wrap_content, then you'll want to change 245 00:09:20,780 --> 00:09:23,300 it now. But in my case, you can see that it is 246 00:09:23,300 --> 00:09:27,500 set at the moment to wrap_content. Al 247 00:09:27,500 --> 00:09:28,910 righty, so that wasn't really quite 248 00:09:28,910 --> 00:09:31,100 what I had in mind. Now I wanted the 249 00:09:31,100 --> 00:09:34,400 widget to expand to fill its' text, but I 250 00:09:34,400 --> 00:09:36,140 definitely don't want it extending that 251 00:09:36,140 --> 00:09:38,270 far down the screen. So the mini 252 00:09:38,270 --> 00:09:40,310 challenge is to work out why it's done 253 00:09:40,310 --> 00:09:42,110 that and what we should do to prevent 254 00:09:42,110 --> 00:09:44,390 that from happening. So I'm going to end 255 00:09:44,390 --> 00:09:46,100 the video here now. I'm going to leave 256 00:09:46,100 --> 00:09:47,420 you to see if you can come up with a 257 00:09:47,420 --> 00:09:49,490 solution to that problem, and in the next 258 00:09:49,490 --> 00:09:51,440 video we'll start by going through how 259 00:09:51,440 --> 00:09:53,630 to resolve it. So I'll see you in the 260 00:09:53,630 --> 00:09:56,050 next video.