1 00:00:00,025 --> 00:00:02,732 (upbeat music) 2 00:00:02,732 --> 00:00:05,530 (computer keys clicking) 3 00:00:05,530 --> 00:00:08,000 Alright, so we've still got the image to add 4 00:00:08,000 --> 00:00:09,010 but before doing that, 5 00:00:09,010 --> 00:00:12,120 let's run the programme and see how it behaves. 6 00:00:12,120 --> 00:00:13,440 And that'll also gives us a chance 7 00:00:13,440 --> 00:00:16,630 to see how the layout and the code work together. 8 00:00:16,630 --> 00:00:17,610 Now, what we need to do though, 9 00:00:17,610 --> 00:00:19,070 is make a change to the code, 10 00:00:19,070 --> 00:00:21,960 so expand the project pane if it's not open. 11 00:00:21,960 --> 00:00:23,270 We want to come down here and make sure 12 00:00:23,270 --> 00:00:25,460 that we're in the Java folder, 13 00:00:25,460 --> 00:00:28,140 'cause if you recall, the Java folder contain 14 00:00:28,140 --> 00:00:31,080 the source files, which ultimately contain our code. 15 00:00:31,080 --> 00:00:32,870 So, we wanna open up the package, 16 00:00:32,870 --> 00:00:36,067 in this case, academy.learnprogramming.activity 17 00:00:36,067 --> 00:00:37,640 and there's this main activity. 18 00:00:37,640 --> 00:00:39,660 Now there's only the one class here at this time, 19 00:00:39,660 --> 00:00:40,950 but in more complicated apps, 20 00:00:40,950 --> 00:00:43,990 you'd see that there would be a lot more classes. 21 00:00:43,990 --> 00:00:46,941 So, I'm going to double click that now to open it. 22 00:00:46,941 --> 00:00:50,040 And in main activity, the layout is used 23 00:00:50,040 --> 00:00:53,330 by this setContentView statement on line 10 24 00:00:53,330 --> 00:00:56,580 and that tells the app which layout to use when it runs. 25 00:00:56,580 --> 00:00:58,830 Now, I guess that's a slight oversimplification, 26 00:00:58,830 --> 00:01:01,640 but with only one class it's totally accurate. 27 00:01:01,640 --> 00:01:05,550 So, instead of using R.layout.activity_main, 28 00:01:05,550 --> 00:01:09,589 we need to change that to R.layout.note_layout 29 00:01:09,589 --> 00:01:11,520 to use the layout that we've been working on 30 00:01:11,520 --> 00:01:14,100 and just created in the previous video. 31 00:01:14,100 --> 00:01:15,227 So I'm going to delete that, 32 00:01:15,227 --> 00:01:19,270 and I'll just press the period or dot 33 00:01:19,270 --> 00:01:20,180 and notice when I've done that, 34 00:01:20,180 --> 00:01:22,540 we've automatically got an option here. 35 00:01:22,540 --> 00:01:24,160 Android Studio knows which layouts 36 00:01:24,160 --> 00:01:25,740 are available in your project 37 00:01:25,740 --> 00:01:27,330 and it's suggesting the note layout, 38 00:01:27,330 --> 00:01:29,270 literally as soon as I'd entered that period, 39 00:01:29,270 --> 00:01:30,400 or typed that period. 40 00:01:30,400 --> 00:01:33,040 And sometimes it doesn't do it that quickly. 41 00:01:33,040 --> 00:01:34,450 If you type the first few letters 42 00:01:34,450 --> 00:01:36,030 of the layout you're looking for, 43 00:01:36,030 --> 00:01:38,070 it'll find it in the drop down. 44 00:01:38,070 --> 00:01:41,820 And obviously, using a drop down is more convenient 45 00:01:41,820 --> 00:01:42,920 because it saves typing 46 00:01:42,920 --> 00:01:45,230 but also helps you to guard against typing errors. 47 00:01:45,230 --> 00:01:46,147 So, instead of typing it all out, 48 00:01:46,147 --> 00:01:48,270 I'm just gonna press enter there. 49 00:01:48,270 --> 00:01:49,710 Alright, so that's really the only change 50 00:01:49,710 --> 00:01:51,430 we need to make at this time to the code. 51 00:01:51,430 --> 00:01:54,590 So, we've told the app now which layout to use when it runs. 52 00:01:54,590 --> 00:01:56,640 I'm gonna close down the Kotlin class, 53 00:01:56,640 --> 00:01:59,460 and I'm gonna close the project pane again, 54 00:01:59,460 --> 00:02:02,540 and I'm gonna make sure that note_layout is selected again, 55 00:02:02,540 --> 00:02:03,440 which it is. 56 00:02:03,440 --> 00:02:05,436 And let's just run that, 57 00:02:05,436 --> 00:02:06,320 (computer keys clicking) 58 00:02:06,320 --> 00:02:07,519 to see what it looks like. 59 00:02:07,519 --> 00:02:10,520 (computer keys clicking) 60 00:02:10,520 --> 00:02:12,840 Alright, so there is the app running. 61 00:02:12,840 --> 00:02:14,160 Now, it doesn't look too bad at all, 62 00:02:14,160 --> 00:02:15,300 although I still need to change 63 00:02:15,300 --> 00:02:18,550 the text in the text view in the top right hand corner. 64 00:02:18,550 --> 00:02:20,000 But, there is a problem though, 65 00:02:20,000 --> 00:02:22,500 and it'll become apparent as soon as I start trying 66 00:02:22,500 --> 00:02:24,820 to type something into the edit text. 67 00:02:24,820 --> 00:02:28,210 But first thing, when I click in the edit text, 68 00:02:28,210 --> 00:02:30,830 you can see the on-screen keyboard appears 69 00:02:30,830 --> 00:02:32,600 and things go a bit wrong. 70 00:02:32,600 --> 00:02:35,890 Now, the keyboard is partially obscuring the edit text, 71 00:02:35,890 --> 00:02:37,210 so I can't actually get to the end. 72 00:02:37,210 --> 00:02:38,403 I can try scrolling, 73 00:02:39,670 --> 00:02:42,420 so I'm trying to scroll, simulating like a scroll, 74 00:02:42,420 --> 00:02:44,230 but I can't actually get to the end of the text. 75 00:02:44,230 --> 00:02:45,790 You can see it's sort of just jumping around, 76 00:02:45,790 --> 00:02:48,140 and just generally not quite working correctly, 77 00:02:48,140 --> 00:02:51,400 not really allowing us to get to the end. 78 00:02:51,400 --> 00:02:54,130 Now, this might appear to be two problems 79 00:02:54,130 --> 00:02:55,593 but the cause is the same. 80 00:02:56,510 --> 00:02:58,360 So, I can't scroll the text right to the end 81 00:02:58,360 --> 00:03:00,670 and I also can't add any more text to the end 82 00:03:00,670 --> 00:03:01,503 for that reason. 83 00:03:01,503 --> 00:03:04,770 So I can't get down there to do that, but as it happens, 84 00:03:04,770 --> 00:03:06,980 fixing that issue also prevents the keyboard 85 00:03:06,980 --> 00:03:09,240 from obscuring the edit text widget 86 00:03:09,240 --> 00:03:11,390 and that's really the real cause here. 87 00:03:11,390 --> 00:03:13,030 Now, one thing I want to point out though, 88 00:03:13,030 --> 00:03:15,320 is that I can't give you all the answers. 89 00:03:15,320 --> 00:03:18,520 I can show you a good variety of layouts in this course 90 00:03:18,520 --> 00:03:20,410 but I can't predict every layout 91 00:03:20,410 --> 00:03:22,150 that you want to create in your own apps, 92 00:03:22,150 --> 00:03:23,540 nor how they'll have to interact 93 00:03:23,540 --> 00:03:25,170 with things like the keyboard. 94 00:03:25,170 --> 00:03:26,590 What I will do is try and show you 95 00:03:26,590 --> 00:03:28,980 as many potential problems as I can, 96 00:03:28,980 --> 00:03:30,380 such as this one here, 97 00:03:30,380 --> 00:03:33,890 and we'll also look at different ways to get the same effect 98 00:03:33,890 --> 00:03:36,210 by changing the constraints we use. 99 00:03:36,210 --> 00:03:37,300 But it's important that you really 100 00:03:37,300 --> 00:03:39,730 get the hang of the layout designer yourself 101 00:03:39,730 --> 00:03:42,070 and also important, well it is important, 102 00:03:42,070 --> 00:03:45,180 to think about your layouts not as fixed things 103 00:03:45,180 --> 00:03:47,820 but more as fluid designs that move around 104 00:03:47,820 --> 00:03:50,640 as the user does things on the phone or tablet. 105 00:03:50,640 --> 00:03:52,600 Now, this layout is a great example 106 00:03:52,600 --> 00:03:54,460 of one that looks good in theory 107 00:03:54,460 --> 00:03:56,920 but falls over slightly in practice. 108 00:03:56,920 --> 00:03:58,980 So, let's actually see what we can do about it. 109 00:03:58,980 --> 00:04:01,530 So, I'm just gonna go back into Android Studio now. 110 00:04:02,840 --> 00:04:04,150 Now, I've clicked on editText, 111 00:04:04,150 --> 00:04:05,890 or it was already selected anyway. 112 00:04:05,890 --> 00:04:07,460 One thing to notice here is 113 00:04:07,460 --> 00:04:10,400 that it's set to be centred vertically 114 00:04:10,400 --> 00:04:12,220 in the available space. 115 00:04:12,220 --> 00:04:14,360 Now, that doesn't really make sense here. 116 00:04:14,360 --> 00:04:17,140 It should really always be positioned at the top, 117 00:04:17,140 --> 00:04:18,880 just below the title 118 00:04:18,880 --> 00:04:21,180 and then grade downwards as it needs to. 119 00:04:21,180 --> 00:04:23,900 So, I need to set the vertical bias to zero 120 00:04:23,900 --> 00:04:27,750 and the same's true for the horizontal bias. 121 00:04:27,750 --> 00:04:30,100 Now, it's visually obvious which way you need to go, 122 00:04:30,100 --> 00:04:33,890 so I'm gonna drag the vertical bias to the top, 123 00:04:33,890 --> 00:04:35,880 as I mentioned, and set that to zero 124 00:04:35,880 --> 00:04:39,760 and also, I'm going to drag the horizontal slider 125 00:04:39,760 --> 00:04:42,390 to the left as well, to make that zero. 126 00:04:42,390 --> 00:04:44,210 So, now we've got both the vertical 127 00:04:44,210 --> 00:04:46,540 and horizontal biases set to zero. 128 00:04:46,540 --> 00:04:49,730 Now, we do get questions about what difference this makes 129 00:04:49,730 --> 00:04:52,810 and often it doesn't make any difference. 130 00:04:52,810 --> 00:04:55,690 With less text and the layout_height or layout 131 00:04:55,690 --> 00:04:57,830 _width set to wrap_content, 132 00:04:57,830 --> 00:04:59,970 it will, however, make a difference. 133 00:04:59,970 --> 00:05:00,930 But that's actually got nothing 134 00:05:00,930 --> 00:05:02,930 to do with our problems though. 135 00:05:02,930 --> 00:05:04,110 What we need to do, 136 00:05:04,110 --> 00:05:08,010 is to make the edit text scrollable, vertically. 137 00:05:08,010 --> 00:05:10,280 Now, the edit text could already be scrolled, 138 00:05:10,280 --> 00:05:12,460 but without the scroll bars attribute being set, 139 00:05:12,460 --> 00:05:13,607 the layout doesn't collapse it 140 00:05:13,607 --> 00:05:15,810 out of the way of the keyboard. 141 00:05:15,810 --> 00:05:18,320 So, to turn on the vertical scroll bar, 142 00:05:18,320 --> 00:05:21,900 what we need to do is expand the full set of properties 143 00:05:21,900 --> 00:05:23,110 and we do this by clicking 144 00:05:23,110 --> 00:05:26,780 on these two little arrows up here in the Inspector, 145 00:05:26,780 --> 00:05:27,930 and then we're gonna search through 146 00:05:27,930 --> 00:05:29,350 the largely alphabetical list 147 00:05:29,350 --> 00:05:31,390 until we find the scroll bar setting. 148 00:05:31,390 --> 00:05:34,190 Now, remember that you might need to use this cog over here 149 00:05:34,190 --> 00:05:35,890 to select all attributes. 150 00:05:35,890 --> 00:05:39,230 So, if I click on that, and you might be in that mode there. 151 00:05:39,230 --> 00:05:41,220 So, if you see a mode that looks similar to that 152 00:05:41,220 --> 00:05:43,870 just come back here and click on All attributes table 153 00:05:44,740 --> 00:05:46,540 and you'll get the right view. 154 00:05:46,540 --> 00:05:48,080 Alright, so let's scroll down now 155 00:05:48,080 --> 00:05:50,213 so we can see this scrollable attribute. 156 00:05:53,080 --> 00:05:54,333 And there's scroll bars. 157 00:05:55,370 --> 00:05:57,300 Now, expand that so you can see. 158 00:05:57,300 --> 00:05:59,690 And we want to set that to vertical, 159 00:05:59,690 --> 00:06:01,829 so I wanna click on vertical 160 00:06:01,829 --> 00:06:04,040 and you can see it updates over here now. 161 00:06:04,040 --> 00:06:06,360 Now, we're also going to set the scroll indicators, 162 00:06:06,360 --> 00:06:09,190 that's these a little bit further up, which I'll expand. 163 00:06:09,190 --> 00:06:11,400 Now, we're doing that to provide a visual cue 164 00:06:11,400 --> 00:06:13,770 that the contents are scrollable. 165 00:06:13,770 --> 00:06:15,180 Now, we wanna click over here 166 00:06:15,180 --> 00:06:17,580 or come over here and click on right. 167 00:06:17,580 --> 00:06:19,450 Select that and also end. 168 00:06:19,450 --> 00:06:22,190 And you can see that we've got both selected now. 169 00:06:22,190 --> 00:06:26,090 Now, start and end properties were introduced in API17. 170 00:06:26,090 --> 00:06:28,560 And they're designed to provide the expected behaviour 171 00:06:28,560 --> 00:06:31,290 with languages that are written from right to left, 172 00:06:31,290 --> 00:06:33,520 Arabic and Persian for example. 173 00:06:33,520 --> 00:06:37,340 So, by using start instead of left and end instead of right, 174 00:06:37,340 --> 00:06:38,310 you're allowing your app 175 00:06:38,310 --> 00:06:40,940 to cope with right to left languages. 176 00:06:40,940 --> 00:06:44,490 Now, if you're targeting Android versions prior to API17, 177 00:06:44,490 --> 00:06:48,260 as we are, then you should also set left or right as well, 178 00:06:48,260 --> 00:06:51,010 so that those earlier versions also work. 179 00:06:51,010 --> 00:06:54,540 Now, the scroll indicators provide a visual indication 180 00:06:54,540 --> 00:06:56,077 that a widget can be scrolled 181 00:06:56,077 --> 00:06:58,730 and also indicate how far through the contents 182 00:06:58,730 --> 00:07:00,150 you've already scrolled. 183 00:07:00,150 --> 00:07:02,920 Now, note that they were introduced in API23, 184 00:07:02,920 --> 00:07:04,450 so this setting won't have any effect 185 00:07:04,450 --> 00:07:06,480 on earlier versions of Android. 186 00:07:06,480 --> 00:07:08,660 Alright, so now that we've enabled scrolling, 187 00:07:08,660 --> 00:07:10,750 the edit text widget should be scrollable, 188 00:07:10,750 --> 00:07:13,570 so let's run the app again to test that. 189 00:07:13,570 --> 00:07:16,280 But first I'm gonna change the text in the text view 190 00:07:16,280 --> 00:07:17,250 to constraint layout, 191 00:07:17,250 --> 00:07:19,538 so, I'm just gonna click over here 192 00:07:19,538 --> 00:07:20,560 and I'm gonna close down this mode 193 00:07:20,560 --> 00:07:22,170 and go back to our normal mode. 194 00:07:22,170 --> 00:07:23,940 And let's change the text there 195 00:07:23,940 --> 00:07:25,883 and we'll call it Constraint Layout. 196 00:07:25,883 --> 00:07:30,080 (computer keys clicking) 197 00:07:30,080 --> 00:07:32,730 Now, notice how the width of the edit text changes 198 00:07:32,730 --> 00:07:34,020 and that's because it's constrained 199 00:07:34,020 --> 00:07:36,730 to the right-hand edge of the text view. 200 00:07:36,730 --> 00:07:38,350 And keep in mind also that sometimes 201 00:07:38,350 --> 00:07:40,960 it takes a little while for the blue print to update 202 00:07:40,960 --> 00:07:42,470 after a change like this. 203 00:07:42,470 --> 00:07:45,340 So, that causes the edit text to become narrower 204 00:07:45,340 --> 00:07:46,280 because it's constrained 205 00:07:46,280 --> 00:07:48,896 to the right-hand edge of the text view. 206 00:07:48,896 --> 00:07:51,213 Alright, so let's try running the programme again. 207 00:07:52,719 --> 00:07:56,136 (computer keys clicking) 208 00:07:58,920 --> 00:08:00,510 So, now that I've run it again, 209 00:08:00,510 --> 00:08:02,780 Android Studio's instant run will install the changes 210 00:08:02,780 --> 00:08:04,560 and restart the application. 211 00:08:04,560 --> 00:08:06,610 And that's actually quite a nice feature 212 00:08:06,610 --> 00:08:09,870 that first appeared in Android Studio 1.5. 213 00:08:09,870 --> 00:08:13,050 Now, it could cause a few problems with apps not restarting, 214 00:08:13,050 --> 00:08:15,977 but the bugs seem to have been ironed out now 215 00:08:15,977 --> 00:08:18,340 and it makes the whole process of testing changes 216 00:08:18,340 --> 00:08:20,340 a lot faster than it use to be. 217 00:08:20,340 --> 00:08:22,510 So, you can see here now, we've got a different layout now. 218 00:08:22,510 --> 00:08:23,840 Well, it looks different now 219 00:08:23,840 --> 00:08:26,700 because we've added the scrolling capability 220 00:08:26,700 --> 00:08:27,550 and you can see that the app 221 00:08:27,550 --> 00:08:30,830 is now functioning differently to what it was before. 222 00:08:30,830 --> 00:08:33,419 Firstly, we're now automatically at the bottom. 223 00:08:33,419 --> 00:08:35,600 We can see the bottom of the edit text 224 00:08:35,600 --> 00:08:39,770 and also the keyboard is now not obscuring the text 225 00:08:39,770 --> 00:08:41,437 and I should be able to scroll up and down now. 226 00:08:41,437 --> 00:08:44,190 And you can also see over here, if you look carefully, 227 00:08:44,190 --> 00:08:47,260 the visual representation of us scrolling up 228 00:08:47,260 --> 00:08:50,210 and also where we are in the text. 229 00:08:50,210 --> 00:08:51,910 So, that's all working nicely now. 230 00:08:53,488 --> 00:08:54,580 And again, as you saw, I can get right down 231 00:08:54,580 --> 00:08:56,510 to the bottom as well. 232 00:08:56,510 --> 00:08:58,580 Now, keep in mind as I mentioned, it's scrollable 233 00:08:58,580 --> 00:09:00,030 and you saw that it was scrollable 234 00:09:00,030 --> 00:09:02,290 and the scroll indicators are appearing on the right, 235 00:09:02,290 --> 00:09:04,540 but those scrolling indicators only will appear 236 00:09:04,540 --> 00:09:07,180 on devices running Android Marshmallow or later. 237 00:09:07,180 --> 00:09:09,550 Now, it still can be scrolled in all versions 238 00:09:09,550 --> 00:09:12,160 but it's only the indicators that don't appear. 239 00:09:12,160 --> 00:09:13,910 And again scrolling the text, the edit text, 240 00:09:13,910 --> 00:09:15,840 also fixed the other problem we had 241 00:09:15,840 --> 00:09:18,160 and you can see now that we can scroll right to the end 242 00:09:18,160 --> 00:09:21,090 of the text and I can actually add more, 243 00:09:21,090 --> 00:09:22,520 Tim was here, (computer keys clicking) 244 00:09:22,520 --> 00:09:23,747 if I so desire. 245 00:09:23,747 --> 00:09:26,530 Alight, so there's just the image to add now. 246 00:09:26,530 --> 00:09:29,280 So, what we want to do is go back to Android Studio 247 00:09:30,290 --> 00:09:32,040 and we wanna drag an image view 248 00:09:32,040 --> 00:09:35,780 on to the left of the design, just below the title. 249 00:09:35,780 --> 00:09:39,260 So, we come over here and click on Images, ImageView, 250 00:09:39,260 --> 00:09:41,830 and we're gonna put that just below the title. 251 00:09:41,830 --> 00:09:43,030 I'll put it about there. 252 00:09:45,090 --> 00:09:46,260 And what we wanna do is, 253 00:09:46,260 --> 00:09:47,930 'cause that's come up automatically, 254 00:09:47,930 --> 00:09:51,548 is you wanna select the ball_100x100. 255 00:09:51,548 --> 00:09:53,410 (computer keys clicking) Select that. 256 00:09:53,410 --> 00:09:54,243 Okay. 257 00:09:55,397 --> 00:09:57,260 Now, we wanna constrain the top of the image view 258 00:09:57,260 --> 00:09:58,520 to the bottom of the text view, 259 00:09:58,520 --> 00:09:59,863 so let's do that first. 260 00:10:04,470 --> 00:10:06,950 Now, the left edge of the image view should be constrained 261 00:10:06,950 --> 00:10:08,597 to the left edge of the screen 262 00:10:08,597 --> 00:10:11,150 and the right edge of the image view should be constrained 263 00:10:11,150 --> 00:10:14,000 to the left edge of the edit text widget. 264 00:10:14,000 --> 00:10:15,650 So, let's go ahead and do that. 265 00:10:15,650 --> 00:10:16,830 We can see that in this case, 266 00:10:16,830 --> 00:10:19,470 the left constraint has already been added. 267 00:10:19,470 --> 00:10:22,170 So, if yours hasn't been added, then do that. 268 00:10:22,170 --> 00:10:23,860 But we also want to constrain, as I mentioned, 269 00:10:23,860 --> 00:10:25,720 the right edge of the image view 270 00:10:25,720 --> 00:10:27,350 to the left edge of the edit text. 271 00:10:27,350 --> 00:10:28,950 So, we can go ahead and do that. 272 00:10:31,380 --> 00:10:33,250 Now, the other thing to do is also make sure 273 00:10:33,250 --> 00:10:36,380 that the layout_width is set to match_constraint, 274 00:10:37,480 --> 00:10:40,500 otherwise the image may run off the left edge of the screen. 275 00:10:40,500 --> 00:10:41,333 And you can see, at the moment, 276 00:10:41,333 --> 00:10:42,990 I've got that set to wrap_content, 277 00:10:42,990 --> 00:10:44,100 so, I'm gonna change layout_width 278 00:10:44,100 --> 00:10:46,810 to set to match_constraint. 279 00:10:46,810 --> 00:10:48,077 Alright, so let's actually run the app again 280 00:10:48,077 --> 00:10:50,005 and see how it behaves. 281 00:10:50,005 --> 00:10:53,560 (computer keys clicking) 282 00:10:53,560 --> 00:10:54,393 And you can see that... 283 00:10:54,393 --> 00:10:56,180 I'm just gonna move it over a little bit, 284 00:10:56,180 --> 00:10:57,100 that looks pretty good, 285 00:10:57,100 --> 00:10:59,873 and you can see that we've got our text there. 286 00:10:59,873 --> 00:11:01,723 We can still scroll that up and down. 287 00:11:02,800 --> 00:11:03,970 I can hide the keyboard 288 00:11:05,010 --> 00:11:07,970 and see more of the edit text now, 289 00:11:07,970 --> 00:11:08,850 and that's still looking good. 290 00:11:08,850 --> 00:11:11,335 So let's just move it over to landscape and have a look. 291 00:11:11,335 --> 00:11:12,630 (computer keys clicking) 292 00:11:12,630 --> 00:11:14,090 So we're in the landscape. 293 00:11:14,090 --> 00:11:15,820 And by the way, you should always test your layouts 294 00:11:15,820 --> 00:11:17,400 in both portrait and landscape, 295 00:11:17,400 --> 00:11:19,210 as well as on a range of different devices, 296 00:11:19,210 --> 00:11:21,340 such as a phone and a tablet. 297 00:11:21,340 --> 00:11:22,530 So, you can see that it looks pretty good 298 00:11:22,530 --> 00:11:24,370 in portrait and landscape. 299 00:11:24,370 --> 00:11:26,480 Now, the two buttons on the side of the emulator, 300 00:11:26,480 --> 00:11:28,120 by the way, let you rotate the device, 301 00:11:28,120 --> 00:11:29,370 as you saw me click. 302 00:11:29,370 --> 00:11:30,860 So, I can go back and click it the other way 303 00:11:30,860 --> 00:11:32,760 and go back to portrait again. 304 00:11:32,760 --> 00:11:35,370 And it really makes a great way to easily test layouts 305 00:11:35,370 --> 00:11:38,680 without having to run it on a physical Android device. 306 00:11:38,680 --> 00:11:39,620 Alright, so that's the end 307 00:11:39,620 --> 00:11:41,800 of our introduction to the layout designer 308 00:11:41,800 --> 00:11:44,500 that google had produced for Android Studio. 309 00:11:44,500 --> 00:11:46,490 Now, we've actually covered quite a lot, 310 00:11:46,490 --> 00:11:48,430 including some of the widgets available 311 00:11:48,430 --> 00:11:50,880 and how to place them on the design. 312 00:11:50,880 --> 00:11:52,830 Now, we also saw how to use constraints 313 00:11:52,830 --> 00:11:56,030 to make sure that the widgets appear where we want them, 314 00:11:56,030 --> 00:11:59,300 even when screen size and orientation change. 315 00:11:59,300 --> 00:12:01,840 Now, we've covered the different types of constraint 316 00:12:01,840 --> 00:12:03,890 and how they affect the behaviour of widgets 317 00:12:03,890 --> 00:12:06,190 that are constrained to each other. 318 00:12:06,190 --> 00:12:08,620 Now, the Inspector is very useful and we've seen how 319 00:12:08,620 --> 00:12:11,490 to use that to change the sizing of widgets, 320 00:12:11,490 --> 00:12:14,670 as well as their position within the constraints. 321 00:12:14,670 --> 00:12:16,920 The margins on the vertical and horizontal sliders 322 00:12:16,920 --> 00:12:20,830 can also be used to set the bias from the Inspector. 323 00:12:20,830 --> 00:12:22,630 Google's aim with this new layout designer 324 00:12:22,630 --> 00:12:25,580 was to make it possible to do everything you need to do 325 00:12:25,580 --> 00:12:27,600 without having to edit xml. 326 00:12:27,600 --> 00:12:29,900 And I'd say, they've largely succeeded. 327 00:12:29,900 --> 00:12:31,710 There is one time when you definitely need 328 00:12:31,710 --> 00:12:33,700 to view the xml though. 329 00:12:33,700 --> 00:12:34,553 Now, you've noticed that... 330 00:12:34,553 --> 00:12:37,230 I'll just put this back on the screen, 331 00:12:37,230 --> 00:12:39,670 neither the blueprint nor the design make it easy 332 00:12:39,670 --> 00:12:41,830 to check all the constraints at once, 333 00:12:41,830 --> 00:12:44,090 and there's no way to display all the properties 334 00:12:44,090 --> 00:12:45,873 on the screen at once, not 335 00:12:45,873 --> 00:12:48,190 unless you've got a three metre high screen. 336 00:12:48,190 --> 00:12:50,340 So, if you have problems with a layout 337 00:12:50,340 --> 00:12:52,260 and you wanna post a question about it, 338 00:12:52,260 --> 00:12:54,120 a screen shot alone will probably not help us 339 00:12:54,120 --> 00:12:55,950 to work out what's going on. 340 00:12:55,950 --> 00:12:58,310 In that case, if you do want help with a layout 341 00:12:58,310 --> 00:12:59,740 that's not doing what you want, 342 00:12:59,740 --> 00:13:03,880 please select all the xml and paste it into your question. 343 00:13:03,880 --> 00:13:05,958 That way we can see everything that's set in it 344 00:13:05,958 --> 00:13:07,270 and we're gonna be coming back to that later 345 00:13:07,270 --> 00:13:09,530 and give you some tips to make it easier 346 00:13:09,530 --> 00:13:12,570 to compare your xml with mine. 347 00:13:12,570 --> 00:13:14,460 Alright, so that's the end of this video. 348 00:13:14,460 --> 00:13:16,510 In the next one, what we're gonna do is create an app 349 00:13:16,510 --> 00:13:19,400 that does more than just display things on the screen. 350 00:13:19,400 --> 00:13:20,850 We'll get it so that clicking a button 351 00:13:20,850 --> 00:13:22,470 actually does something. 352 00:13:22,470 --> 00:13:24,450 I'm gonna start that app with a challenge though. 353 00:13:24,450 --> 00:13:27,210 Just to warn you, the next video will start with a challenge 354 00:13:27,210 --> 00:13:29,830 to design the layout that we're gonna be using in the app. 355 00:13:29,830 --> 00:13:31,723 So, I'll see you in that next video.