1 00:00:00,212 --> 00:00:02,553 (short jingle) 2 00:00:02,553 --> 00:00:05,500 (typing noises) 3 00:00:05,500 --> 00:00:07,370 All right, now as I mentioned at the end 4 00:00:07,370 --> 00:00:10,410 of the last video, we now are going to work 5 00:00:10,410 --> 00:00:12,530 on the left hand block, and that's going to become 6 00:00:12,530 --> 00:00:15,550 a mirror image of the buttons on the right. 7 00:00:15,550 --> 00:00:18,220 So each button there should have a baseline constraint 8 00:00:18,220 --> 00:00:23,160 to the button on its right, so 7 to 8, but also 8 to 9 9 00:00:23,160 --> 00:00:25,010 and so on down the rows. 10 00:00:25,010 --> 00:00:27,910 So let's start by doing that, so we're gonna start with 7. 11 00:00:28,760 --> 00:00:32,662 We're going to create a baseline constraint for that to 8, 12 00:00:34,620 --> 00:00:36,600 and also, as I mentioned, we want to set up baseline 13 00:00:36,600 --> 00:00:38,950 constraint from 8 to 9. 14 00:00:38,950 --> 00:00:40,727 Because almost all the buttons we want to have 15 00:00:40,727 --> 00:00:44,803 are on the same position, horizontally. 16 00:00:47,920 --> 00:00:49,800 All right then, 4. 17 00:00:49,800 --> 00:00:53,443 We're going to base constrain that to 5. 18 00:00:54,540 --> 00:00:59,123 Then 5, we're going to create the base constraint to 6. 19 00:00:59,970 --> 00:01:02,230 And you can see that I'm not having to move the widgets, 20 00:01:02,230 --> 00:01:04,393 they are moving themselves as I'm doing this. 21 00:01:13,630 --> 00:01:18,570 And then zero, and create a baseline constraint to 22 00:01:18,570 --> 00:01:19,520 this one over here. 23 00:01:21,410 --> 00:01:24,050 Oops, you can see that I actually see that I didn't wait 24 00:01:24,050 --> 00:01:24,957 until it placed correctly. 25 00:01:24,957 --> 00:01:28,350 Now we'll do it again, and reposition that. 26 00:01:28,350 --> 00:01:30,321 This stuff happens sometimes and if I was to drag it 27 00:01:30,321 --> 00:01:32,400 and it didn't work, you just come back and do it again 28 00:01:32,400 --> 00:01:35,460 and it normally fixes itself on the second time. 29 00:01:35,460 --> 00:01:37,850 All right, last one now for the button dot, 30 00:01:37,850 --> 00:01:42,053 we want to basically constraint that to the equal sign. 31 00:01:43,490 --> 00:01:46,710 Okay, so I'm done with the left hand block. 32 00:01:46,710 --> 00:01:48,977 So, next what we need to do, is we need to constrain 33 00:01:48,977 --> 00:01:52,090 the right edge of each button on the first column, 34 00:01:52,090 --> 00:01:54,800 so the left edge of the button to its right. 35 00:01:54,800 --> 00:01:57,660 So it's 7 to 8, 4 to 5 and so on. 36 00:01:57,660 --> 00:02:00,550 Let's go ahead and do that, I'm gonna start with 7, 37 00:02:00,550 --> 00:02:01,633 so 7 to 8, 38 00:02:04,530 --> 00:02:05,363 4 to 5, 39 00:02:07,437 --> 00:02:08,293 1 to 2, 40 00:02:10,250 --> 00:02:13,193 then zero into the dot, period. 41 00:02:14,040 --> 00:02:16,200 Okay, so that's those four done. 42 00:02:16,200 --> 00:02:19,030 Now to line them up vertically, each button in the second 43 00:02:19,030 --> 00:02:23,080 column, starting with 5 and working down, should have its 44 00:02:23,080 --> 00:02:25,700 right edge constrained to the right edge 45 00:02:25,700 --> 00:02:27,340 of the button above it. 46 00:02:27,340 --> 00:02:30,140 Let's go ahead and do that, so starting with the 5, 47 00:02:30,140 --> 00:02:32,770 constrain it to the right of the 8. 48 00:02:32,770 --> 00:02:34,900 We get that step effect as I mentioned before, 49 00:02:34,900 --> 00:02:37,050 but we'll change the mask for that shortly. 50 00:02:39,690 --> 00:02:43,053 And then the dot we'll constrain to the 2. 51 00:02:44,270 --> 00:02:45,103 Oops. 52 00:02:47,460 --> 00:02:49,840 Like so, now we just need to change the margins 53 00:02:49,840 --> 00:02:50,673 to zero again. 54 00:02:50,673 --> 00:02:55,063 So 5, come over here and change the margins to zero. 55 00:02:56,060 --> 00:02:57,123 Same for the 2. 56 00:02:58,700 --> 00:03:03,700 5 to zero, and also same for the dot, change it to zero. 57 00:03:03,942 --> 00:03:08,000 So we've removed the step effect from those as well. 58 00:03:08,000 --> 00:03:10,110 Right, so at this point now, button 8 should be able 59 00:03:10,110 --> 00:03:12,020 to be dragged sideways and on the other buttons 60 00:03:12,020 --> 00:03:13,740 on that side should follow. 61 00:03:13,740 --> 00:03:15,530 Can we just try that? 62 00:03:15,530 --> 00:03:18,250 We can see that they, we've got them all moving nicely. 63 00:03:18,250 --> 00:03:20,100 Now none of the buttons on this side can be dragged 64 00:03:20,100 --> 00:03:22,130 up or down because of the baseline constraints 65 00:03:22,130 --> 00:03:22,983 to their right. 66 00:03:23,935 --> 00:03:26,210 You can't click on 7 and move that up or down 67 00:03:26,210 --> 00:03:29,150 because the way we've just slapped a baseline constraints 68 00:03:29,150 --> 00:03:30,840 which is what we want here. 69 00:03:30,840 --> 00:03:33,860 All right, so the final 2 constraints now we need to do, 70 00:03:33,860 --> 00:03:37,080 is we need to constrain the left edge of button 9 71 00:03:37,080 --> 00:03:39,840 to the guard line, then the right edge of button 8 72 00:03:39,840 --> 00:03:42,960 to the left of button 9, which will fix the left hand 73 00:03:42,960 --> 00:03:43,793 block in place. 74 00:03:43,793 --> 00:03:45,303 So let's start with button 9. 75 00:03:46,830 --> 00:03:48,670 We want to constrain the left edge of button 9 76 00:03:48,670 --> 00:03:49,533 to the guideline. 77 00:03:52,050 --> 00:03:52,883 Like so. 78 00:03:52,883 --> 00:03:55,220 And then what we wanna do is get the right edge 79 00:03:55,220 --> 00:03:56,563 of button 8, selecting that. 80 00:03:56,563 --> 00:04:00,590 We want to constrain that to the left edge of button 9, 81 00:04:00,590 --> 00:04:01,663 not to the guideline. 82 00:04:04,720 --> 00:04:05,800 Like so. 83 00:04:05,800 --> 00:04:08,300 That now fixes the left block in place. 84 00:04:08,300 --> 00:04:11,990 Now I've connected block 9's left edge to the guideline, 85 00:04:11,990 --> 00:04:13,717 I'm gonna just click it. 86 00:04:13,717 --> 00:04:16,692 We want the margin here to be 4 DP. 87 00:04:17,829 --> 00:04:21,730 I'm just gonna target 4 here, press Enter, 88 00:04:21,730 --> 00:04:24,540 and I've already added our constraint from the 89 00:04:24,540 --> 00:04:27,440 right edge of button 8 to the left edge of button 9. 90 00:04:27,440 --> 00:04:29,030 We want to just check that and make sure 91 00:04:29,030 --> 00:04:32,870 that the width there, the margin rather, is 8. 92 00:04:32,870 --> 00:04:36,140 Now the combination of making that 8 and making this one 4, 93 00:04:36,140 --> 00:04:39,870 button 9, means that things line up nicely. 94 00:04:39,870 --> 00:04:42,220 Now right now there's nothing constraining the button group 95 00:04:42,220 --> 00:04:46,100 vertically, so we want to constrain the top of button 9 96 00:04:46,100 --> 00:04:48,930 to the bottom of one of the Edit Text widgets 97 00:04:48,930 --> 00:04:49,830 for margin and weights. 98 00:04:49,830 --> 00:04:51,030 I'm gonna click on that. 99 00:04:52,678 --> 00:04:54,828 Now I'm gonna constrain this to the result. 100 00:04:58,030 --> 00:04:59,177 Like so, and we just want to make sure that we've 101 00:04:59,177 --> 00:05:01,337 got a margin of 8 there which we have got. 102 00:05:01,337 --> 00:05:03,140 But obviously that constrains all the buttons 103 00:05:03,140 --> 00:05:04,720 when I've done that. 104 00:05:04,720 --> 00:05:07,280 At this point now we've got a grid of button that are all 105 00:05:07,280 --> 00:05:11,043 constrained so that they work as a single block of widgets. 106 00:05:11,043 --> 00:05:12,820 It's button 9 as a widget that they 107 00:05:12,820 --> 00:05:15,160 are ultimately constrained to. 108 00:05:15,160 --> 00:05:17,243 We can test this by dragging 9 around. 109 00:05:18,140 --> 00:05:20,100 As it moves, you can see all the other buttons 110 00:05:20,100 --> 00:05:21,500 are actually moving as well. 111 00:05:23,890 --> 00:05:26,130 Now if any buttons get left behind you can check that 112 00:05:26,130 --> 00:05:28,080 they are correctly constrained. 113 00:05:28,080 --> 00:05:31,650 And when you're finished testing, as I have, move them back 114 00:05:31,650 --> 00:05:34,080 close to where you think they should be, and just check 115 00:05:34,080 --> 00:05:34,913 button 9. 116 00:05:34,913 --> 00:05:37,690 So click on that and you wanna check that button 9's 117 00:05:37,690 --> 00:05:40,510 top margin is on 8 DP; mine is currently set on 16, 118 00:05:40,510 --> 00:05:43,510 I'll change that to 8, and also the left margin 119 00:05:43,510 --> 00:05:44,963 should be set to 4. 120 00:05:46,760 --> 00:05:48,963 By doing that that centres all the buttons. 121 00:05:49,798 --> 00:05:51,340 Move the guard line appearing right to the middle 122 00:05:51,340 --> 00:05:52,420 of both of them. 123 00:05:53,260 --> 00:05:55,440 Right, so let's now try running this just to check 124 00:05:55,440 --> 00:05:59,353 that our application still works, that things look okay. 125 00:06:00,210 --> 00:06:02,264 Now obviously we'll start in portrait mode and that 126 00:06:02,264 --> 00:06:05,460 should be fine and nothing should have changed there, 127 00:06:05,460 --> 00:06:08,150 because we haven't been working on that layout. 128 00:06:08,150 --> 00:06:10,320 But it's the landscape that we wanna check 129 00:06:10,320 --> 00:06:12,220 to make sure that it's now working and looking okay. 130 00:06:12,220 --> 00:06:14,283 So, let's move over to landscape. 131 00:06:15,810 --> 00:06:18,250 And you can see that it's looking quite good at the moment, 132 00:06:18,250 --> 00:06:19,960 looks quite centred. 133 00:06:19,960 --> 00:06:22,140 Now there's a widget we haven't constrained, 134 00:06:22,140 --> 00:06:24,690 and that's the operation text view, and that's appearing 135 00:06:24,690 --> 00:06:27,200 at the top of the screen here at the top left hand corner, 136 00:06:27,200 --> 00:06:28,540 which is the default operation 137 00:06:28,540 --> 00:06:30,520 if there isn't any constraints. 138 00:06:30,520 --> 00:06:33,000 And by the way, if you can't see it, tap one of the 139 00:06:33,000 --> 00:06:37,110 operation buttons to give us some text; slash or divide 140 00:06:37,110 --> 00:06:40,010 or a plus so you'll be able to see what it is on the screen. 141 00:06:40,010 --> 00:06:43,090 Again, top left is where our constrained widgets appear, 142 00:06:43,090 --> 00:06:45,630 so we need to obviously go back and constrain them. 143 00:06:45,630 --> 00:06:47,910 However, you probably gonna have a popup (mumbles), 144 00:06:47,910 --> 00:06:51,468 so let's just go back and have a look in Android Studio. 145 00:06:51,468 --> 00:06:54,470 So you can't see it over here, so sometimes it can be 146 00:06:54,470 --> 00:06:56,780 very hard to tell where that widget's gone or a widget 147 00:06:56,780 --> 00:06:58,900 locked back that hasn't any text. 148 00:06:58,900 --> 00:07:01,130 Even selecting it in the component tree may not actually 149 00:07:01,130 --> 00:07:02,700 help in some cases. 150 00:07:02,700 --> 00:07:05,640 Trying to select it can be quite finicky in other words. 151 00:07:05,640 --> 00:07:08,810 Now I've mentioned a tools attribute earlier, and this is 152 00:07:08,810 --> 00:07:11,350 a good use for one of them, the Tools Text. 153 00:07:11,350 --> 00:07:13,370 So, to show you what I mean I'm gonna click on the 154 00:07:13,370 --> 00:07:16,133 component tree, I'm gonna select Operation, 155 00:07:17,430 --> 00:07:19,000 then you can see the (mumbles) by doing that, 156 00:07:19,000 --> 00:07:21,600 that's now showing, and it is still very fitting 157 00:07:21,600 --> 00:07:23,720 to try and connect this to. 158 00:07:23,720 --> 00:07:26,620 So this is where the tools attributes come in handy. 159 00:07:26,620 --> 00:07:29,180 So I've selected that using the component tree, 160 00:07:29,180 --> 00:07:31,800 and then what I want to do is to enter some text down here 161 00:07:31,800 --> 00:07:35,570 in Text, but this one, the one with the tools or the 162 00:07:35,570 --> 00:07:37,960 wrench or the spanner to the left of it. 163 00:07:37,960 --> 00:07:39,770 Now we're going to be very unimaginative 164 00:07:39,770 --> 00:07:40,973 and target Operation. 165 00:07:44,830 --> 00:07:47,000 And the widget in the container will only have a single 166 00:07:47,000 --> 00:07:50,940 character when we run the app, but we're trying to find it, 167 00:07:50,940 --> 00:07:53,130 so a slight longer text will make that a lot easier. 168 00:07:53,130 --> 00:07:55,680 Now you can see obviously the way operations appearing 169 00:07:55,680 --> 00:07:57,800 on the layout now. 170 00:07:57,800 --> 00:08:00,850 And just a reminder here, the text won't appear when 171 00:08:00,850 --> 00:08:03,610 we run the app, tools attributes, the ones that are marked 172 00:08:03,610 --> 00:08:08,080 with a wrench or spanner, are only used in the designer. 173 00:08:08,080 --> 00:08:11,343 So at this point in time, it's time for a challenge. 174 00:08:12,950 --> 00:08:15,840 All right, so the mini challenge here is to provide suitable 175 00:08:15,840 --> 00:08:19,690 constraints for the operation TextView widget that's 176 00:08:19,690 --> 00:08:21,920 appearing over at the top, left hand side of the screen, 177 00:08:21,920 --> 00:08:24,380 when we run the app in Landscape. 178 00:08:24,380 --> 00:08:27,210 Now you can decide exactly where you want it, but my 179 00:08:27,210 --> 00:08:29,640 solution would centre it in the space between the left 180 00:08:29,640 --> 00:08:32,582 of button 7 and the left edge of newNumber. 181 00:08:33,740 --> 00:08:35,590 So that's your challenge, pause the video and see how 182 00:08:35,590 --> 00:08:38,380 you go with that, and when you're ready to see my solution, 183 00:08:38,380 --> 00:08:40,010 come back and I'll go through that. 184 00:08:40,010 --> 00:08:41,063 Pause the video now. 185 00:08:43,440 --> 00:08:45,150 All right, so I'm gonna do what I suggested 186 00:08:45,150 --> 00:08:46,357 in the challenge. 187 00:08:46,357 --> 00:08:49,130 The first thing that we're going to make sure Operation is 188 00:08:49,130 --> 00:08:53,040 selected, we're gonna constrain the Operation text view 189 00:08:53,040 --> 00:08:55,410 to the baseline of button 7. 190 00:08:55,410 --> 00:08:56,760 Let's go ahead and do that. 191 00:09:01,350 --> 00:09:02,540 Like so. 192 00:09:02,540 --> 00:09:05,660 Next we're gonna constrain the right edge to the left edge 193 00:09:05,660 --> 00:09:07,823 of button 7, let's go ahead and do that. 194 00:09:11,410 --> 00:09:13,930 And now we're going to constrain the left edge to 195 00:09:13,930 --> 00:09:15,767 the left edge of newNumber. 196 00:09:16,801 --> 00:09:19,413 And here, like so. 197 00:09:20,300 --> 00:09:23,080 So that's the text view constrained by vertically 198 00:09:23,080 --> 00:09:25,820 and horizontally, and you just gonna check the margins 199 00:09:25,820 --> 00:09:27,150 to make sure that they are centred. 200 00:09:27,150 --> 00:09:30,080 Here you can see we've got 8 DP for the left 201 00:09:30,080 --> 00:09:32,790 and 8 DP for the right, so that's fine. 202 00:09:32,790 --> 00:09:36,380 Now, at this point in time you can replace the tools' text 203 00:09:36,380 --> 00:09:38,630 to better represent the running app. 204 00:09:38,630 --> 00:09:40,980 So we'll go ahead and do that, we'll change the operation, 205 00:09:40,980 --> 00:09:43,570 just use a plus as default, because that obviously that's 206 00:09:43,570 --> 00:09:46,330 going to be more consistent as to what it's going to 207 00:09:46,330 --> 00:09:49,530 look like when running the win, running the app. 208 00:09:49,530 --> 00:09:51,890 So let's now just run the app to make sure that this 209 00:09:51,890 --> 00:09:55,083 actually works, with its constraints and looking correct. 210 00:09:57,360 --> 00:10:00,935 You can see in landscape mode at the top, something now, 211 00:10:00,935 --> 00:10:03,523 you can see that we've got that working nicely. 212 00:10:05,150 --> 00:10:07,660 All right, so we'll go back now to Android Studio. 213 00:10:07,660 --> 00:10:10,660 Now even with the separate layer for landscape mode, 214 00:10:10,660 --> 00:10:12,710 the layer won't fit on something like a Nexus 1 215 00:10:12,710 --> 00:10:13,900 as we've designed it. 216 00:10:13,900 --> 00:10:16,600 We're wasting a lot of space in landscape. 217 00:10:16,600 --> 00:10:19,120 Now rather than trying to reduce all the top margins 218 00:10:19,120 --> 00:10:22,820 to close everything up, it may make more sense to move 219 00:10:22,820 --> 00:10:25,760 the roll buttons and redesign the keypad so that 220 00:10:25,760 --> 00:10:28,210 it's only three buttons deep. 221 00:10:28,210 --> 00:10:30,590 Now one advantage of having a separate layer for the 222 00:10:30,590 --> 00:10:33,500 different orientations, is that you can take advantage 223 00:10:33,500 --> 00:10:35,990 of the extra space available, rather than having to try 224 00:10:35,990 --> 00:10:38,590 and cram everything into a narrow space. 225 00:10:38,590 --> 00:10:41,180 But to one disadvantage as I mentioned, is that you 226 00:10:41,180 --> 00:10:43,390 then have then two layers to maintain 227 00:10:43,390 --> 00:10:44,470 now whenever you make changes 228 00:10:44,470 --> 00:10:46,570 such as adding another button. 229 00:10:46,570 --> 00:10:48,910 All right, so we've now covered a lot of what you can do 230 00:10:48,910 --> 00:10:51,380 with the constraint layout, and if you make a copy 231 00:10:51,380 --> 00:10:55,180 of the XML first, you can experiment with different designs 232 00:10:55,180 --> 00:10:57,380 until you get something you're happy with. 233 00:10:57,380 --> 00:11:00,850 Also, remember that Control + Z, or Command + Z on a Mac, 234 00:11:00,850 --> 00:11:03,310 will undo each successive change that you've made, 235 00:11:03,310 --> 00:11:06,570 so you can keep pressing that to go back to all the 236 00:11:06,570 --> 00:11:08,200 changes that you've made. 237 00:11:08,200 --> 00:11:10,140 And what I am gonna do is finish this section 238 00:11:10,140 --> 00:11:12,660 with a challenge, but first I'm gonna switch over to the 239 00:11:12,660 --> 00:11:15,410 text tab for this layout, and then click on 240 00:11:15,410 --> 00:11:17,423 Reformat Code from the Code menu. 241 00:11:19,310 --> 00:11:21,673 Just so it's nicely formatted and you can see that we 242 00:11:21,673 --> 00:11:23,540 have a message briefly appeared to say 243 00:11:23,540 --> 00:11:25,870 that it was already okay. 244 00:11:25,870 --> 00:11:27,793 So let's have a look at that challenge. 245 00:11:29,250 --> 00:11:30,570 All right, so one thing that's missing 246 00:11:30,570 --> 00:11:33,470 from the calculator app, is the ability to enter 247 00:11:33,470 --> 00:11:35,880 negative numbers for calculations. 248 00:11:35,880 --> 00:11:39,620 And because of the way the operations buttons work, 249 00:11:39,620 --> 00:11:42,580 you can't just use the Minus button to do that. 250 00:11:42,580 --> 00:11:44,930 So the challenge is to add another button to 251 00:11:44,930 --> 00:11:47,110 negate the input number. 252 00:11:47,110 --> 00:11:49,360 Now if there's no number entered, then the button should put 253 00:11:49,360 --> 00:11:52,630 a minus sign in the input, so that any subsequent input 254 00:11:52,630 --> 00:11:53,960 will be negative. 255 00:11:53,960 --> 00:11:57,320 Any time the button's clicked, the number should be negated, 256 00:11:57,320 --> 00:12:00,433 so a negative number becomes positive and vice versa. 257 00:12:01,385 --> 00:12:04,260 For blank input, it should toggle a leading minus sign 258 00:12:04,260 --> 00:12:05,560 on and off. 259 00:12:05,560 --> 00:12:08,110 Now if you want to use text for the button, for example Neg, 260 00:12:08,110 --> 00:12:11,010 then have a look at the font properties at the bottom 261 00:12:11,010 --> 00:12:13,870 of the panel to the right; you may want to make the font 262 00:12:13,870 --> 00:12:16,090 size smaller, so the button can be the same size 263 00:12:16,090 --> 00:12:17,970 as the current ones. 264 00:12:17,970 --> 00:12:20,680 There's no need to centre the button grid, but I will 265 00:12:20,680 --> 00:12:23,110 go through one way to do that in the solution. 266 00:12:23,110 --> 00:12:25,010 And just as a hint, it doesn't involve 267 00:12:25,010 --> 00:12:26,420 using another guideline. 268 00:12:26,420 --> 00:12:29,860 And another hint, one button can be centred and used 269 00:12:29,860 --> 00:12:32,660 as the key button that all others are anchored to. 270 00:12:32,660 --> 00:12:34,600 All right, so I'm going to stop this video here, 271 00:12:34,600 --> 00:12:36,800 and we'll go through my solution to this challenge 272 00:12:36,800 --> 00:12:37,713 in the next video.