1 00:00:00,307 --> 00:00:02,890 (upbeat music) 2 00:00:05,260 --> 00:00:06,500 In the previous video, 3 00:00:06,500 --> 00:00:08,670 we saw how to add an image to our layout 4 00:00:08,670 --> 00:00:10,770 using an image view widget. 5 00:00:10,770 --> 00:00:13,060 Now, we discussed constraints briefly 6 00:00:13,060 --> 00:00:14,950 and learned that they're like glue 7 00:00:14,950 --> 00:00:17,957 that keeps the widget fixed in place in our layouts. 8 00:00:17,957 --> 00:00:20,710 Now, we've also seen how to delete constraints 9 00:00:20,710 --> 00:00:23,380 but haven't yet had a go at creating them. 10 00:00:23,380 --> 00:00:25,130 Instead, I left you experimenting with the 11 00:00:25,130 --> 00:00:28,730 resources handles, that's these four handles here, 12 00:00:28,730 --> 00:00:29,920 that can be used to do just that, 13 00:00:29,920 --> 00:00:31,183 to resize a widget. 14 00:00:32,070 --> 00:00:33,923 Obviously, they're on each corner of a widget 15 00:00:33,923 --> 00:00:36,070 that is showing in our display. 16 00:00:36,070 --> 00:00:37,750 Now, there's a reason for doing that 17 00:00:37,750 --> 00:00:40,430 which is that constraining a widget when it fills the layout 18 00:00:40,430 --> 00:00:42,220 can be very fiddley. 19 00:00:42,220 --> 00:00:44,230 It is possible but it isn't the easiest way 20 00:00:44,230 --> 00:00:47,550 to see how to create constraints for the first time. 21 00:00:47,550 --> 00:00:49,680 Now, I actually left my widget sitting in the top 22 00:00:49,680 --> 00:00:50,880 left hand corner of the screen, 23 00:00:50,880 --> 00:00:52,660 so I resized it down. 24 00:00:52,660 --> 00:00:53,970 Now if you've been experimenting, 25 00:00:53,970 --> 00:00:55,400 and hopefully you have, 26 00:00:55,400 --> 00:00:57,250 then yours could be all over the place. 27 00:00:57,250 --> 00:00:59,565 So before we start, resize it so it's right about 28 00:00:59,565 --> 00:01:02,760 the same size as mine on screen here. 29 00:01:02,760 --> 00:01:04,569 Now, you can also click on the image 30 00:01:04,569 --> 00:01:07,800 and hold the mouse button to drag it around the screen. 31 00:01:07,800 --> 00:01:09,420 So I'm gonna do that now, I'm gonna drag it around 32 00:01:09,420 --> 00:01:10,840 to the middle of the screen 33 00:01:10,840 --> 00:01:12,610 and as I start doing that we start getting 34 00:01:12,610 --> 00:01:15,430 these vertical/horizontal lines appearing again. 35 00:01:15,430 --> 00:01:16,360 We've got the vertical one there, 36 00:01:16,360 --> 00:01:18,070 then as I move it down we get the 37 00:01:18,070 --> 00:01:20,400 horizontal appearing as well. 38 00:01:20,400 --> 00:01:23,770 Those indicate when constraints will be set automatically 39 00:01:23,770 --> 00:01:25,220 and they're appearing because we've got 40 00:01:25,220 --> 00:01:26,570 auto-connect turned on, 41 00:01:26,570 --> 00:01:28,980 which we talked about in the previous video. 42 00:01:28,980 --> 00:01:31,100 So if I release the mouse pointer now, 43 00:01:31,100 --> 00:01:32,470 when it's centred, 44 00:01:32,470 --> 00:01:34,740 all four constraints should be created again. 45 00:01:34,740 --> 00:01:35,650 And you can see, that's happened. 46 00:01:35,650 --> 00:01:39,503 We've got the constraints showing for the image view now. 47 00:01:40,610 --> 00:01:42,560 All right, now we saw two ways, previously, 48 00:01:42,560 --> 00:01:44,760 to delete individual constraints, 49 00:01:44,760 --> 00:01:48,210 but there's also two other ways to delete constraints. 50 00:01:48,210 --> 00:01:50,680 Now the first way is to hover the mouse over the widget, 51 00:01:50,680 --> 00:01:51,990 so I'm gonna do that now, 52 00:01:51,990 --> 00:01:54,610 and noticing that when I did that we get this little 53 00:01:54,610 --> 00:01:56,497 button that appears next to the widget. 54 00:01:56,497 --> 00:01:58,550 And if I hover over that we can see that the tool 55 00:01:58,550 --> 00:02:01,465 tip tells us delete constraints. 56 00:02:01,465 --> 00:02:03,640 It only appears when we first selected the widget, 57 00:02:03,640 --> 00:02:06,080 so you might need to select the widget that you want 58 00:02:06,080 --> 00:02:09,850 to delete the constraints off and obviously, 59 00:02:09,850 --> 00:02:11,700 by the tool tip, it's going to delete the constraints, 60 00:02:11,700 --> 00:02:13,940 I'm going to click on that and you can see that 61 00:02:13,940 --> 00:02:15,653 all four constraints got deleted. 62 00:02:16,670 --> 00:02:19,100 Now, at this point, our image hasn't got any constraints 63 00:02:19,100 --> 00:02:21,630 and it still looks like it's centred on the screen. 64 00:02:21,630 --> 00:02:24,780 But keep in mind that it's not actually fixed in place. 65 00:02:24,780 --> 00:02:27,280 If we run the app now, the widget would affectively 66 00:02:27,280 --> 00:02:30,040 fall off the screen, except it doesn't really fall off, 67 00:02:30,040 --> 00:02:32,530 it goes to the top left hand corner. 68 00:02:32,530 --> 00:02:34,403 So let's actually try running it to see and confirm 69 00:02:34,403 --> 00:02:36,770 that that is the case. 70 00:02:36,770 --> 00:02:38,680 Now, we saw how to run our apps in an emulator 71 00:02:38,680 --> 00:02:40,200 in section two. 72 00:02:40,200 --> 00:02:42,530 You want to click on this green arrow 73 00:02:42,530 --> 00:02:45,150 in the Android Studio toolbar, 74 00:02:45,150 --> 00:02:47,610 now I've already got my Android emulator running, 75 00:02:47,610 --> 00:02:50,360 but if not, you should be able to select from 76 00:02:50,360 --> 00:02:53,040 your list of available devices if yours isn't started 77 00:02:53,040 --> 00:02:54,800 and it will start it automatically. 78 00:02:54,800 --> 00:02:56,270 Alternatively, you can come back up here 79 00:02:56,270 --> 00:02:58,230 and click on this icon, which I can't do now 80 00:02:58,230 --> 00:03:00,240 because I've got this pop-up showing, 81 00:03:00,240 --> 00:03:02,810 and select your emulator and run it. 82 00:03:02,810 --> 00:03:04,580 In my case, mine's already connected and running 83 00:03:04,580 --> 00:03:06,640 so I'm going to click on okay. 84 00:03:06,640 --> 00:03:08,240 We'll just tab over to see that. 85 00:03:11,762 --> 00:03:12,595 All right, so you can see the 86 00:03:12,595 --> 00:03:14,150 app started and there's the image 87 00:03:14,150 --> 00:03:16,313 in the top left hand corner of the display. 88 00:03:17,270 --> 00:03:20,140 That shows the importance of using constraints 89 00:03:20,140 --> 00:03:23,223 to make sure that the widget stays where you want it to. 90 00:03:23,223 --> 00:03:25,211 Now, any widget that's not constrained vertically 91 00:03:25,211 --> 00:03:28,099 will move to the top of the screen. 92 00:03:28,099 --> 00:03:31,470 In addition, if a widget isn't constrained horizontally, 93 00:03:31,470 --> 00:03:33,640 it'll move to the lefthand edge. 94 00:03:33,640 --> 00:03:35,920 The rest we haven't constrained our widget at all, 95 00:03:35,920 --> 00:03:37,830 you can see that it's appearing at the top 96 00:03:37,830 --> 00:03:39,350 on the lefthand edge. 97 00:03:39,350 --> 00:03:41,650 All right, so let's go back to Android Studio. 98 00:03:42,625 --> 00:03:46,360 What we're gonna do now is create some constraints. 99 00:03:46,360 --> 00:03:47,680 Now, the way to do that is to 100 00:03:47,680 --> 00:03:49,330 click on the constraint handle, 101 00:03:49,330 --> 00:03:52,100 that's these circles on the left or on the edges 102 00:03:52,100 --> 00:03:54,362 of our widget, then drag it out to where you want 103 00:03:54,362 --> 00:03:56,270 to constrain the widget to. 104 00:03:56,270 --> 00:03:58,870 Now, at the moment we don't have a lot of choice 105 00:03:58,870 --> 00:04:01,470 because you've only got the one widget on the screen. 106 00:04:01,470 --> 00:04:03,060 The only thing that we can really do at this point 107 00:04:03,060 --> 00:04:05,984 is constrain the widget to the edges of the screen. 108 00:04:05,984 --> 00:04:08,690 So we're gonna drag each constraint handle 109 00:04:08,690 --> 00:04:11,280 to the corresponding edge of the screen. 110 00:04:11,280 --> 00:04:12,990 Now, I'm gonna start with the lefthand side 111 00:04:12,990 --> 00:04:14,594 and drag that over, 112 00:04:14,594 --> 00:04:16,930 you can see that automatically, 113 00:04:16,930 --> 00:04:19,620 the image is moved to the lefthand side 114 00:04:19,620 --> 00:04:21,130 and we've now got a restraint when I release 115 00:04:21,130 --> 00:04:23,810 the mouse button showing in the blueprint 116 00:04:23,810 --> 00:04:26,150 and the designer, but also up here. 117 00:04:26,150 --> 00:04:27,470 You can see that we've got a constraint here 118 00:04:27,470 --> 00:04:28,573 on the lefthand side. 119 00:04:29,750 --> 00:04:31,360 Now, don't worry about the fact that the widget's 120 00:04:31,360 --> 00:04:32,988 moved across to the left, there's no need to keep 121 00:04:32,988 --> 00:04:34,830 sort of trying to keep it central 122 00:04:34,830 --> 00:04:36,150 or anything like that, 123 00:04:36,150 --> 00:04:38,000 that's what the constraints are for. 124 00:04:38,000 --> 00:04:39,381 And when I come over here now and constrain 125 00:04:39,381 --> 00:04:43,363 the widget to the righthand side, to the edge, 126 00:04:44,710 --> 00:04:48,120 you see it now, it goes over and centres horizontally. 127 00:04:48,120 --> 00:04:50,140 It goes back to the middle, in other words. 128 00:04:50,140 --> 00:04:51,220 All right, so at this point now, 129 00:04:51,220 --> 00:04:53,770 our image is constrained horizontally. 130 00:04:53,770 --> 00:04:55,490 If we rerun the app, we'll have a look 131 00:04:55,490 --> 00:04:57,293 and see what it's done in the emulator. 132 00:05:00,000 --> 00:05:02,750 We can see that it's now constrained horizontally 133 00:05:02,750 --> 00:05:04,670 and it's nicely in the middle 134 00:05:04,670 --> 00:05:06,250 but there's no vertical constraints 135 00:05:06,250 --> 00:05:07,410 on our image view at the moment, 136 00:05:07,410 --> 00:05:09,820 so it's still appearing at the top of the screen. 137 00:05:09,820 --> 00:05:10,880 But we can see that we have got 138 00:05:10,880 --> 00:05:12,863 the horizontal alignment right. 139 00:05:15,150 --> 00:05:17,260 All right, time for a mini challenge. 140 00:05:17,260 --> 00:05:19,730 Create the vertical constraints to fix the image 141 00:05:19,730 --> 00:05:21,966 to the centre of the screen, and then run the app again 142 00:05:21,966 --> 00:05:24,670 to make sure that it worked. 143 00:05:24,670 --> 00:05:26,210 All right, so pause the video now, 144 00:05:26,210 --> 00:05:27,510 complete that challenge, 145 00:05:27,510 --> 00:05:29,910 and come back and we'll go through the solution. 146 00:05:31,960 --> 00:05:33,980 All right, so hopefully you managed to get that working. 147 00:05:33,980 --> 00:05:35,907 So to create the vertical constraints, 148 00:05:35,907 --> 00:05:38,260 really all we need to do is just drag the constraint handle 149 00:05:38,260 --> 00:05:40,330 from the middle of the top edge of the image 150 00:05:40,330 --> 00:05:42,360 up to the top edge of the display. 151 00:05:42,360 --> 00:05:44,290 So I'll do that first. 152 00:05:44,290 --> 00:05:46,840 You can see that we're now constrained at the top. 153 00:05:46,840 --> 00:05:49,200 The widget moved up to the top accordingly. 154 00:05:49,200 --> 00:05:51,573 But now if we constrain the bottom, 155 00:05:53,470 --> 00:05:56,360 you can see now, affectively, we're centred 156 00:05:56,360 --> 00:05:58,140 horizontally and vertically. 157 00:05:58,140 --> 00:05:59,190 And just to confirm that, 158 00:05:59,190 --> 00:06:01,040 we're gonna run this on our emulator, 159 00:06:02,042 --> 00:06:03,620 run the app on our emulator, 160 00:06:03,620 --> 00:06:06,840 and we can see that the image view is now centred 161 00:06:06,840 --> 00:06:09,410 both vertically and horizontally. 162 00:06:09,410 --> 00:06:11,200 So that's what constraints are for. 163 00:06:11,200 --> 00:06:13,740 They fix the position of your widgets. 164 00:06:13,740 --> 00:06:15,480 Now you can fix a widget either relative 165 00:06:15,480 --> 00:06:17,120 to the edges of the screen, 166 00:06:17,120 --> 00:06:18,360 like we've done here, 167 00:06:18,360 --> 00:06:20,570 or relative to other widgets. 168 00:06:20,570 --> 00:06:22,310 Now, we'll be seeing how to start working 169 00:06:22,310 --> 00:06:24,630 with other widgets later when we start adding 170 00:06:24,630 --> 00:06:25,980 more widgets to the layout. 171 00:06:26,950 --> 00:06:29,140 All right, so I mentioned there's two other ways 172 00:06:29,140 --> 00:06:30,920 to delete constraints. 173 00:06:30,920 --> 00:06:32,799 The first way that I showed you is to use the 174 00:06:32,799 --> 00:06:35,890 delete constraints button on an image view 175 00:06:35,890 --> 00:06:37,750 or on a widget itself. 176 00:06:37,750 --> 00:06:39,960 Which we did previously in this video. 177 00:06:39,960 --> 00:06:42,310 Now, there's a similar looking button on the toolbar 178 00:06:42,310 --> 00:06:43,870 and that will delete all constraints 179 00:06:43,870 --> 00:06:46,250 for all widgets in the layout. 180 00:06:46,250 --> 00:06:48,110 Come over here and just hover over that one, 181 00:06:48,110 --> 00:06:49,560 this one here, 182 00:06:49,560 --> 00:06:51,150 you can see that the tool tip has come up 183 00:06:51,150 --> 00:06:52,780 clear all constraints. 184 00:06:52,780 --> 00:06:55,470 Now, as we've only got a single widget, 185 00:06:55,470 --> 00:06:57,260 it'll do the same as the other button. 186 00:06:57,260 --> 00:06:59,430 But if we had a load of widgets on this layout, 187 00:06:59,430 --> 00:07:02,070 it would delete the constraints for all of them. 188 00:07:02,070 --> 00:07:04,230 Now, I want to delete all our constraints 189 00:07:04,230 --> 00:07:06,200 so that I can show you something else. 190 00:07:06,200 --> 00:07:08,290 But before I click that button, 191 00:07:08,290 --> 00:07:09,903 I want you to have a look the inspector 192 00:07:09,903 --> 00:07:11,220 on the righthand side, 193 00:07:11,220 --> 00:07:14,150 and I need to just click on this to hide the emulator. 194 00:07:14,150 --> 00:07:16,220 Over here in the top righthand corner. 195 00:07:16,220 --> 00:07:17,624 So it shows the four constraints we've set, 196 00:07:17,624 --> 00:07:21,410 and it also shows the margins for each one. 197 00:07:21,410 --> 00:07:24,090 Now at the moment, all the margins are set to eight, 198 00:07:24,090 --> 00:07:26,548 although on the Mac, I think when I first created 199 00:07:26,548 --> 00:07:28,640 these constraints at the start of this video, 200 00:07:28,640 --> 00:07:29,530 it was showing as zero. 201 00:07:29,530 --> 00:07:30,930 Seems to be a bit of a bug 202 00:07:30,930 --> 00:07:32,980 so hopefully that will be fixed soon. 203 00:07:32,980 --> 00:07:35,321 But the default margin 204 00:07:35,321 --> 00:07:37,923 is determined by this other button over here 205 00:07:37,923 --> 00:07:40,140 on the toolbar. 206 00:07:40,140 --> 00:07:43,140 You can see that the tool tip is default margins 207 00:07:43,140 --> 00:07:46,400 and you can see that the current value is set to eight. 208 00:07:46,400 --> 00:07:47,860 So that's the value that's used 209 00:07:47,860 --> 00:07:49,970 when you're creating constraints. 210 00:07:49,970 --> 00:07:51,430 So what I'm gonna do now is come over here 211 00:07:51,430 --> 00:07:53,593 and use the clear all constraints button, 212 00:07:54,840 --> 00:07:56,410 click on that to remove all the constraints 213 00:07:56,410 --> 00:07:58,710 for all widgets on our layout. 214 00:07:58,710 --> 00:08:00,480 Then I'm gonna change the default margin 215 00:08:00,480 --> 00:08:03,060 from eight, click on that, and I can either 216 00:08:03,060 --> 00:08:04,979 type in 16 there or I can just click on 16 217 00:08:04,979 --> 00:08:07,163 because it's a commonly used number. 218 00:08:08,010 --> 00:08:09,690 Either way, I'm gonna change that now to 16 219 00:08:09,690 --> 00:08:11,560 which is showing, and now 220 00:08:11,560 --> 00:08:13,670 when I go ahead and recreate the constraints, 221 00:08:13,670 --> 00:08:15,513 they'll all have a margin of 16. 222 00:08:16,410 --> 00:08:17,720 Let's just go ahead and do that 223 00:08:17,720 --> 00:08:19,060 and then we'll just have a bit of a discussion 224 00:08:19,060 --> 00:08:20,313 about what margins are. 225 00:08:22,010 --> 00:08:23,570 But you can see, as I'm doing this now 226 00:08:23,570 --> 00:08:28,143 the margin is being set to 16 for each of our constraints. 227 00:08:30,090 --> 00:08:32,640 Right, so there's our four constraints. 228 00:08:32,640 --> 00:08:34,860 All right, so these margins are important 229 00:08:34,860 --> 00:08:36,280 when creating layouts. 230 00:08:36,280 --> 00:08:37,919 So what actually are they? 231 00:08:37,919 --> 00:08:40,320 Well, think of them as an area around the outside 232 00:08:40,320 --> 00:08:44,159 of a widget, just like margins on a sheet of paper. 233 00:08:44,159 --> 00:08:46,100 Now what we're gonna do first is change the layout 234 00:08:46,100 --> 00:08:48,230 with the layout height of the widget 235 00:08:48,230 --> 00:08:50,403 so that it's 200dp square. 236 00:08:51,440 --> 00:08:53,000 Now, we've seen how to resize a widget 237 00:08:53,000 --> 00:08:55,410 by dragging the handles on the four corners, 238 00:08:55,410 --> 00:08:57,200 but if you want a specific size, 239 00:08:57,200 --> 00:08:59,320 it's usually easier to just type the size into 240 00:08:59,320 --> 00:09:01,260 the properties pane on the right 241 00:09:01,260 --> 00:09:02,110 below the inspector. 242 00:09:02,110 --> 00:09:03,890 So that's just here. 243 00:09:03,890 --> 00:09:06,040 Let's change that to make that exactly 200. 244 00:09:08,117 --> 00:09:10,130 You can see that the image changed when I did that. 245 00:09:10,130 --> 00:09:13,260 The size changed, and same for the layout. 246 00:09:13,260 --> 00:09:14,290 Just gonna press tab or something 247 00:09:14,290 --> 00:09:16,550 to move away and you can see that that's changed. 248 00:09:16,550 --> 00:09:18,199 So whatever you type only takes effect 249 00:09:18,199 --> 00:09:20,560 once your cursor, or once you've 250 00:09:20,560 --> 00:09:23,360 moved outside of that field. 251 00:09:23,360 --> 00:09:24,780 So the space that the widget now 252 00:09:24,780 --> 00:09:27,580 occupies on the screen is 232. 253 00:09:27,580 --> 00:09:30,330 So the widget itself is 200, and there's an 254 00:09:30,330 --> 00:09:35,200 additional 16 on each side, making 232 in total. 255 00:09:35,200 --> 00:09:38,020 Now, I'm gonna talk about these dp units in a moment, 256 00:09:38,020 --> 00:09:39,760 or probably in the next video. 257 00:09:39,760 --> 00:09:42,070 All right, at this point we're seeing this image 258 00:09:42,070 --> 00:09:44,220 as it would appear on our Nexus 4 device 259 00:09:44,220 --> 00:09:47,660 which has a screen width of 768. 260 00:09:47,660 --> 00:09:48,617 Now looking at the blueprint, 261 00:09:48,617 --> 00:09:50,470 our image is obviously a lot more 262 00:09:50,470 --> 00:09:52,880 than 16 from the left edge. 263 00:09:52,880 --> 00:09:53,970 In fact, if you look carefully 264 00:09:53,970 --> 00:09:55,410 you can see the 16 there, then there's 265 00:09:55,410 --> 00:09:57,890 all this extra stuff showing in the middle there. 266 00:09:57,890 --> 00:10:00,520 So what's actually keeping it centred? 267 00:10:00,520 --> 00:10:03,200 Well making sure that the image view is selected, 268 00:10:03,200 --> 00:10:04,473 which in my case it is, 269 00:10:05,390 --> 00:10:08,920 notice these two sliders in the object inspector. 270 00:10:08,920 --> 00:10:12,023 The horizontal bias, and we've also got a vertical bias. 271 00:10:13,310 --> 00:10:15,840 Now, they represent a bias which is how far 272 00:10:15,840 --> 00:10:19,480 from the top and left of the screen our widget appears. 273 00:10:19,480 --> 00:10:21,380 So it's expressed as a percentage, 274 00:10:21,380 --> 00:10:23,530 and you can see there that it's got a number 275 00:10:23,530 --> 00:10:26,610 of 50 by default, that means the widget is 276 00:10:26,610 --> 00:10:29,530 halfway down and also halfway across 277 00:10:29,530 --> 00:10:31,800 because they're both set to 50. 278 00:10:31,800 --> 00:10:34,900 Now if we drag the bottom slider to the left, 279 00:10:34,900 --> 00:10:37,110 when we do that the bias decreases. 280 00:10:37,110 --> 00:10:39,310 Notice that the image is now moving as well. 281 00:10:41,200 --> 00:10:43,150 If we move it all the way over to zero, 282 00:10:43,150 --> 00:10:46,190 the bias is set to zero and when it's set to zero 283 00:10:46,190 --> 00:10:49,060 the widget's as far left as it will go. 284 00:10:49,060 --> 00:10:51,300 Now it looks to be about 16 from the edge. 285 00:10:51,300 --> 00:10:53,470 So in other words, the margin is now only 16, 286 00:10:53,470 --> 00:10:55,560 there's no other bias moving the image 287 00:10:55,560 --> 00:10:56,783 to any other position. 288 00:10:57,720 --> 00:10:59,690 Now if we increase the margin on the lefthand 289 00:10:59,690 --> 00:11:02,098 constraint by over typing to value of 16, 290 00:11:02,098 --> 00:11:06,670 come over here, I've just clicked on that 291 00:11:06,670 --> 00:11:09,110 and you can see that we can specify several options. 292 00:11:09,110 --> 00:11:11,150 I could try 32 for argument's sake. 293 00:11:11,150 --> 00:11:14,280 When we do that, you can see that the actual image view 294 00:11:14,280 --> 00:11:16,850 moved because we increased the margin 295 00:11:16,850 --> 00:11:19,970 and because my version of Android Studio is sized up 296 00:11:19,970 --> 00:11:22,397 for video presentation, we can't actually see the numbers 297 00:11:22,397 --> 00:11:24,170 too clearly but if I actually just, 298 00:11:24,170 --> 00:11:26,360 making sure that my mouse is being, 299 00:11:26,360 --> 00:11:27,940 I've clicked into that area, 300 00:11:27,940 --> 00:11:30,900 if I type in a much larger number like 120 301 00:11:30,900 --> 00:11:34,020 and press enter, you can see it moved the image right over. 302 00:11:34,020 --> 00:11:35,650 Although you can't see the whole number, 303 00:11:35,650 --> 00:11:37,607 you can see if I'm moving my left arrow 304 00:11:37,607 --> 00:11:39,823 the number 120 is just showing in there. 305 00:11:40,730 --> 00:11:42,370 So this confirms that the margins 306 00:11:42,370 --> 00:11:44,800 used to create space around a widget, 307 00:11:44,800 --> 00:11:48,513 and forms part of the overall space occupied by that widget. 308 00:11:49,520 --> 00:11:51,790 Now if I use the horizontal slider over here 309 00:11:51,790 --> 00:11:53,653 to centre the image again, 310 00:11:54,750 --> 00:11:57,100 now, you don't have to be too precise with it 311 00:11:57,100 --> 00:11:58,840 or fight with the mouse because when you get close 312 00:11:58,840 --> 00:12:01,620 to what you want you can actually fine tune it 313 00:12:01,620 --> 00:12:02,780 using the cursor keys. 314 00:12:02,780 --> 00:12:04,080 You can see it's set to 45 315 00:12:04,080 --> 00:12:05,730 and I've just used my cursor key, 316 00:12:07,030 --> 00:12:09,190 I can get it exactly to 50. 317 00:12:09,190 --> 00:12:10,290 Now, when it's set to 50 318 00:12:10,290 --> 00:12:12,340 the image is still off to the right, 319 00:12:12,340 --> 00:12:15,190 but that's because we've got a wide margin on the left. 320 00:12:15,190 --> 00:12:16,510 What's being sent in here though, 321 00:12:16,510 --> 00:12:19,710 is the image view plus it's margin. 322 00:12:19,710 --> 00:12:22,063 So if we change the left margin back to 16 again, 323 00:12:22,063 --> 00:12:24,367 we'll select that from the drop-down this time, 324 00:12:24,367 --> 00:12:28,195 the image is now moved back and 325 00:12:28,195 --> 00:12:30,280 everything is as it should be. 326 00:12:30,280 --> 00:12:32,020 Okay, so we're gonna come back to constraints 327 00:12:32,020 --> 00:12:33,550 a little bit later. 328 00:12:33,550 --> 00:12:34,790 By the way, in case you hadn't guessed, 329 00:12:34,790 --> 00:12:37,830 that's why this is called the constraint layout. 330 00:12:37,830 --> 00:12:40,270 What I'm gonna do is finish this video by allowing you 331 00:12:40,270 --> 00:12:43,170 to experiment with this scale type property 332 00:12:43,170 --> 00:12:45,890 and that's over here in the properties pane 333 00:12:45,890 --> 00:12:46,723 on the righthand side. 334 00:12:46,723 --> 00:12:48,650 Scale type, you can see there. 335 00:12:48,650 --> 00:12:50,510 We've got a number of different options there. 336 00:12:50,510 --> 00:12:52,820 Now by the way, this used to be called the properties pane 337 00:12:52,820 --> 00:12:54,930 but Google have renamed it to attributes 338 00:12:54,930 --> 00:12:56,720 and you can see the name up there now 339 00:12:56,720 --> 00:12:59,100 in this particular version of Android Studio. 340 00:12:59,100 --> 00:13:00,530 But I did mention the old name 341 00:13:00,530 --> 00:13:02,890 because you may come across guides and tutorials 342 00:13:02,890 --> 00:13:05,779 in the Android documentation that uses the old term 343 00:13:05,779 --> 00:13:08,110 but I'll try to remember to call it attributes 344 00:13:08,110 --> 00:13:09,932 moving forward in these videos. 345 00:13:09,932 --> 00:13:11,900 Now, before we experiment with the 346 00:13:11,900 --> 00:13:14,880 scale type attribute, you want to change the layout width 347 00:13:14,880 --> 00:13:18,180 and layout height to 384 x 480. 348 00:13:18,180 --> 00:13:19,600 So let's go ahead and do that. 349 00:13:19,600 --> 00:13:21,400 Come up here and I'm gonna type 384, 350 00:13:22,460 --> 00:13:24,357 pressed enter there, and 480, 351 00:13:28,170 --> 00:13:30,760 and that causes the image view widget to fill the screen 352 00:13:30,760 --> 00:13:32,560 allowing for the margins perhaps, 353 00:13:32,560 --> 00:13:34,660 and the image is probably centred for you, 354 00:13:34,660 --> 00:13:37,810 and it is on the screen as you can see for me now. 355 00:13:37,810 --> 00:13:39,630 Now just in case it isn't though, don't worry. 356 00:13:39,630 --> 00:13:41,010 Because that positioning is what we're going to be 357 00:13:41,010 --> 00:13:43,337 looking at next, probably in the next video. 358 00:13:43,337 --> 00:13:44,880 But getting back to scale type 359 00:13:44,880 --> 00:13:46,890 before we finish this video, 360 00:13:46,890 --> 00:13:49,110 if I click on the drop-down there's actually 361 00:13:49,110 --> 00:13:51,640 eight values we can provide for the scale type 362 00:13:51,640 --> 00:13:53,560 and you can see they're all listed there 363 00:13:53,560 --> 00:13:55,580 when I've clicked on the drop-down. 364 00:13:55,580 --> 00:13:56,820 So what I'm gonna do now is 365 00:13:56,820 --> 00:13:58,820 finish this video with a mini challenge. 366 00:14:00,420 --> 00:14:02,470 So yes, it's mini challenge time. 367 00:14:02,470 --> 00:14:04,560 The idea of the challenges in this course, by the way, 368 00:14:04,560 --> 00:14:06,930 is to help you understand the particular concept 369 00:14:06,930 --> 00:14:10,100 a bit better by getting you to go into Android Studio 370 00:14:10,100 --> 00:14:12,499 and trying to solve a particular problem or challenge. 371 00:14:12,499 --> 00:14:15,280 Now we're gonna start off simply but then, 372 00:14:15,280 --> 00:14:16,340 as we go through the course, 373 00:14:16,340 --> 00:14:18,670 we'll build on the complexity of these challenges 374 00:14:18,670 --> 00:14:20,175 to really challenge you. 375 00:14:20,175 --> 00:14:22,850 The idea of this is you'll come out of this course 376 00:14:22,850 --> 00:14:25,400 with a better understanding of Android Studio 377 00:14:25,400 --> 00:14:27,110 and Android development. 378 00:14:27,110 --> 00:14:28,636 So here's the first challenge. 379 00:14:28,636 --> 00:14:32,099 I've shown you the scale type attribute drop-down. 380 00:14:32,099 --> 00:14:35,470 The challenge is to experiment with the eight scale types 381 00:14:35,470 --> 00:14:37,700 to work out what they do. 382 00:14:37,700 --> 00:14:39,172 The one that you don't need to worry about is metrics. 383 00:14:39,172 --> 00:14:42,650 So if I click on that, don't worry about metrics for now. 384 00:14:42,650 --> 00:14:44,257 Because you can't really see 385 00:14:44,257 --> 00:14:45,090 what it's doing in the designer. 386 00:14:45,090 --> 00:14:46,480 But certainly try the other ones 387 00:14:46,480 --> 00:14:49,460 and when you've done that, check your answers by searching 388 00:14:49,460 --> 00:14:52,117 online for image view scale type. 389 00:14:52,117 --> 00:14:55,700 Now if your search results throw up a developer.android.com 390 00:14:55,700 --> 00:14:58,940 site then that should be the first one that you check. 391 00:14:58,940 --> 00:15:01,530 Because that's the site of Google's documentation 392 00:15:01,530 --> 00:15:03,300 and should be considered the definitive word 393 00:15:03,300 --> 00:15:05,380 on anything Android related. 394 00:15:05,380 --> 00:15:07,160 Of course, there's no reason that you can't check 395 00:15:07,160 --> 00:15:08,970 other sites too if you want. 396 00:15:08,970 --> 00:15:09,890 So that's the challenge, 397 00:15:09,890 --> 00:15:11,070 see how you go, 398 00:15:11,070 --> 00:15:13,870 experiment with the various settings of scale type 399 00:15:13,870 --> 00:15:15,010 to see what they do, 400 00:15:15,010 --> 00:15:16,760 and I'll see you in the next video.