1 00:00:04,620 --> 00:00:06,630 Alright, so continuing on from the last 2 00:00:06,630 --> 00:00:08,610 video at this point our projects now 3 00:00:08,610 --> 00:00:10,680 been created. Now different versions of 4 00:00:10,680 --> 00:00:12,360 Android studio startups showing a 5 00:00:12,360 --> 00:00:14,850 different file but here we've got main 6 00:00:14,850 --> 00:00:17,040 activity Kotlin file open, you can see 7 00:00:17,040 --> 00:00:19,290 this here and you can also see activity 8 00:00:19,290 --> 00:00:20,910 underscore main next to it up here in the 9 00:00:20,910 --> 00:00:22,470 tab at the top. 10 00:00:22,470 --> 00:00:24,119 Now sometimes activity underscore main 11 00:00:24,119 --> 00:00:25,770 will be the one initially displayed but 12 00:00:25,770 --> 00:00:27,690 it doesn't really matter, so you just 13 00:00:27,690 --> 00:00:29,130 click on the tab to switch between them 14 00:00:29,130 --> 00:00:30,840 Now if you remember these are the names 15 00:00:30,840 --> 00:00:32,460 that we gave to the files in that last 16 00:00:32,460 --> 00:00:34,559 video or rather the names that Android 17 00:00:34,559 --> 00:00:37,440 studio suggested and we accepted. Now 18 00:00:37,440 --> 00:00:39,120 there's a lot of things to talk about on 19 00:00:39,120 --> 00:00:40,410 the screen and looking at it you might 20 00:00:40,410 --> 00:00:42,750 be thinking well when I start with all 21 00:00:42,750 --> 00:00:44,820 of this, but the thing to keep in mind 22 00:00:44,820 --> 00:00:46,890 with a lot of this is there's a lot of 23 00:00:46,890 --> 00:00:48,390 information on the screen but you don't 24 00:00:48,390 --> 00:00:49,980 really need to understand a lot of it 25 00:00:49,980 --> 00:00:51,809 straight away. Now once we go through the 26 00:00:51,809 --> 00:00:53,399 course for example, you'll understand 27 00:00:53,399 --> 00:00:55,500 what layouts are and widgets and so 28 00:00:55,500 --> 00:00:57,750 forth, we'll cover that in a later 29 00:00:57,750 --> 00:00:59,460 section of the course but just keep in 30 00:00:59,460 --> 00:01:01,020 the back of your mind that this Android 31 00:01:01,020 --> 00:01:03,539 studio application is very powerful and 32 00:01:03,539 --> 00:01:05,280 it doesn't able you to create very 33 00:01:05,280 --> 00:01:08,280 complex applications now you don't need 34 00:01:08,280 --> 00:01:09,780 to know a lot about these advanced 35 00:01:09,780 --> 00:01:11,340 things yet and in fact we're not going 36 00:01:11,340 --> 00:01:12,929 to be using some of them until later in 37 00:01:12,929 --> 00:01:14,910 the course but I will be explaining 38 00:01:14,910 --> 00:01:17,190 things as I go along so if you're keep 39 00:01:17,190 --> 00:01:18,539 in mind that you can understand 40 00:01:18,539 --> 00:01:20,459 everything at once then all of this will 41 00:01:20,459 --> 00:01:22,709 make sense eventually going through some 42 00:01:22,709 --> 00:01:23,910 of the fundamental things I'm going to 43 00:01:23,910 --> 00:01:25,080 show you how to make a few little 44 00:01:25,080 --> 00:01:27,270 changes before the next video where we 45 00:01:27,270 --> 00:01:28,500 start running this particular 46 00:01:28,500 --> 00:01:30,720 application so the first thing I like to 47 00:01:30,720 --> 00:01:31,890 mention on this slide is that a 48 00:01:31,890 --> 00:01:33,959 rendering error that you can get if 49 00:01:33,959 --> 00:01:35,640 you've installed a preview version of 50 00:01:35,640 --> 00:01:38,399 the Android SDK it's a not a good idea 51 00:01:38,399 --> 00:01:40,170 to install a preview version when you're 52 00:01:40,170 --> 00:01:41,910 learning because you can't be sure if 53 00:01:41,910 --> 00:01:44,009 the error is a result of your code or a 54 00:01:44,009 --> 00:01:46,289 bug in the SDK so here's a screenshot 55 00:01:46,289 --> 00:01:48,179 showing an error displaying the activity 56 00:01:48,179 --> 00:01:50,550 underscore main layout using the android N 57 00:01:50,550 --> 00:01:53,039 and preview version from before Android 58 00:01:53,039 --> 00:01:55,170 n was released. Now that doesn't look 59 00:01:55,170 --> 00:01:56,819 good and if that's the first thing you 60 00:01:56,819 --> 00:01:59,099 see when starting Android studio then it 61 00:01:59,099 --> 00:02:01,560 may be a bit scary and off-putting there 62 00:02:01,560 --> 00:02:04,229 are bugs in preview versions after all 63 00:02:04,229 --> 00:02:05,610 if there were no bugs they'd release it 64 00:02:05,610 --> 00:02:07,050 they wouldn't be caught a preview 65 00:02:07,050 --> 00:02:09,449 version anymore but seeing things like 66 00:02:09,449 --> 00:02:11,790 that when you're new to this is scary so 67 00:02:11,790 --> 00:02:13,049 actually if you stop and think about it 68 00:02:13,049 --> 00:02:15,299 it's obvious that the problem isn't 69 00:02:15,299 --> 00:02:16,829 something that you've done because you 70 00:02:16,829 --> 00:02:18,250 haven't entered any code yet so 71 00:02:18,250 --> 00:02:20,380 the bug can't be yours but that doesn't 72 00:02:20,380 --> 00:02:21,970 really help though because you still 73 00:02:21,970 --> 00:02:24,100 don't know what to do about it so as a 74 00:02:24,100 --> 00:02:26,290 general rule avoid preview versions 75 00:02:26,290 --> 00:02:28,270 until you've got a lot of experience and 76 00:02:28,270 --> 00:02:29,830 have become confident in sorting out 77 00:02:29,830 --> 00:02:32,230 problems now it is possible that you'll 78 00:02:32,230 --> 00:02:33,970 get a rendering error even if you're not 79 00:02:33,970 --> 00:02:35,770 using the preview version that does 80 00:02:35,770 --> 00:02:37,090 happen from time to time and the 81 00:02:37,090 --> 00:02:38,920 particular error I'm thinking of is 82 00:02:38,920 --> 00:02:40,900 similar to this that I'm showing on the 83 00:02:40,900 --> 00:02:43,959 screen now. So if you get that the fix is 84 00:02:43,959 --> 00:02:45,970 to go to the file menu and choose the 85 00:02:45,970 --> 00:02:49,680 option to invalidate caches restart 86 00:02:49,680 --> 00:02:52,630 alright so back in Android studio so if 87 00:02:52,630 --> 00:02:54,070 you do see that error that I showed you 88 00:02:54,070 --> 00:02:55,870 immediately after creating a new project 89 00:02:55,870 --> 00:02:58,480 or opening one that was previously 90 00:02:58,480 --> 00:03:00,640 working and just come up this far menu 91 00:03:00,640 --> 00:03:03,670 and select invalidate case restart this 92 00:03:03,670 --> 00:03:05,380 one here and that should actually fix 93 00:03:05,380 --> 00:03:07,450 the problem but the good news is that 94 00:03:07,450 --> 00:03:09,310 errors like that seem to be less common 95 00:03:09,310 --> 00:03:11,950 in Android studio 3 however keep in mind 96 00:03:11,950 --> 00:03:13,510 that Google changes things all the time 97 00:03:13,510 --> 00:03:15,310 and they do sometimes introduce new bugs 98 00:03:15,310 --> 00:03:17,950 all right so let's have a look now it's 99 00:03:17,950 --> 00:03:19,900 what some of these other things are so 100 00:03:19,900 --> 00:03:22,180 I'm going to start with the layout so 101 00:03:22,180 --> 00:03:23,350 I'm going to click on the activity of a 102 00:03:23,350 --> 00:03:25,239 schoolmate then bring the layout on the 103 00:03:25,239 --> 00:03:27,670 screen you can see at the top there are 104 00:03:27,670 --> 00:03:30,790 a few buttons the first one I want to 105 00:03:30,790 --> 00:03:32,530 draw your attention to is the button 106 00:03:32,530 --> 00:03:34,810 that lets you choose which version of 107 00:03:34,810 --> 00:03:37,030 Android is used for the display so it's 108 00:03:37,030 --> 00:03:38,769 the button on the left above the images 109 00:03:38,769 --> 00:03:40,900 when you're editing a layout file and 110 00:03:40,900 --> 00:03:42,340 the one with a picture of the Android 111 00:03:42,340 --> 00:03:45,940 another number 26 so this one here click 112 00:03:45,940 --> 00:03:48,340 on that, so as you can see I've got API 113 00:03:48,340 --> 00:03:54,459 26, 25, 24 I can switch to those versions if I want to do 114 00:03:54,459 --> 00:03:57,070 but generally I recommend you only need 115 00:03:57,070 --> 00:03:59,290 to specify the latest released version 116 00:03:59,290 --> 00:04:01,090 and only have that version on your 117 00:04:01,090 --> 00:04:03,340 computer and just in case it's not 118 00:04:03,340 --> 00:04:04,980 obvious you do need to install the SDK 119 00:04:04,980 --> 00:04:07,390 for any version that you want to use for 120 00:04:07,390 --> 00:04:09,400 the preview. Now the other thing is you 121 00:04:09,400 --> 00:04:11,709 may recall when we set up the wizard it 122 00:04:11,709 --> 00:04:13,660 asks for names and we left the layout 123 00:04:13,660 --> 00:04:15,579 they must a default activity underscore 124 00:04:15,579 --> 00:04:18,310 main now a layout is a file that 125 00:04:18,310 --> 00:04:20,079 specifies how the various parts of the 126 00:04:20,079 --> 00:04:23,410 screen and laid out Android studio that 127 00:04:23,410 --> 00:04:25,300 you modify the layout either by using 128 00:04:25,300 --> 00:04:27,340 this so graphical designer or by 129 00:04:27,340 --> 00:04:29,440 modifying the XML that represents all 130 00:04:29,440 --> 00:04:31,870 the objects on the screen 131 00:04:31,870 --> 00:04:33,580 so think of a layout as a screen 132 00:04:33,580 --> 00:04:35,949 definition and by changing the layout 133 00:04:35,949 --> 00:04:37,960 you define what the screen looks like 134 00:04:37,960 --> 00:04:40,840 and what it contains. Now over to the 135 00:04:40,840 --> 00:04:43,330 left here are all the various widgets 136 00:04:43,330 --> 00:04:45,940 that we can add to the screen so you can 137 00:04:45,940 --> 00:04:48,310 see there's text widgets there's various 138 00:04:48,310 --> 00:04:50,590 buttons come up here you can see there's 139 00:04:50,590 --> 00:04:52,030 a button the toggle button or radio 140 00:04:52,030 --> 00:04:54,100 button and there's other things also 141 00:04:54,100 --> 00:04:56,080 like progress bars and spinners and 142 00:04:56,080 --> 00:04:58,000 actually scrolling down you can see this 143 00:04:58,000 --> 00:05:00,490 there's quite a list of different 144 00:05:00,490 --> 00:05:02,380 widgets you can add text fuels for 145 00:05:02,380 --> 00:05:04,540 getting inputs various containers and 146 00:05:04,540 --> 00:05:07,540 image widgets and a whole host of other 147 00:05:07,540 --> 00:05:09,460 things you can use when creating the 148 00:05:09,460 --> 00:05:12,040 screens for your apps. So you can make 149 00:05:12,040 --> 00:05:13,870 a lot of changes in this design view by 150 00:05:13,870 --> 00:05:15,900 simply dragging widgets onto the layout 151 00:05:15,900 --> 00:05:18,040 so for example I can come back up to 152 00:05:18,040 --> 00:05:20,740 button and I can just come over here 153 00:05:20,740 --> 00:05:22,720 just drag literally drag the button onto 154 00:05:22,720 --> 00:05:24,940 the layout like so then release it we'll 155 00:05:24,940 --> 00:05:26,139 be doing that soon so I'm just going to 156 00:05:26,139 --> 00:05:29,380 delete that for the other you can also 157 00:05:29,380 --> 00:05:31,960 edit the XML which is the format that 158 00:05:31,960 --> 00:05:34,150 the file is stored in so if I come down 159 00:05:34,150 --> 00:05:37,240 here and click on text this is the XML 160 00:05:37,240 --> 00:05:40,840 representation of our layout now with 161 00:05:40,840 --> 00:05:44,050 Android studio 2.2 Google set out to 162 00:05:44,050 --> 00:05:45,880 make it possible to create even 163 00:05:45,880 --> 00:05:48,190 complicated layouts without ever having 164 00:05:48,190 --> 00:05:50,560 to modify the XML and they've almost 165 00:05:50,560 --> 00:05:53,260 succeeded there's still at least one 166 00:05:53,260 --> 00:05:55,419 reason that you need to edit the XML 167 00:05:55,419 --> 00:05:56,950 unless you want to scrap the entire 168 00:05:56,950 --> 00:05:59,289 layout and start again but on the whole 169 00:05:59,289 --> 00:06:01,510 you don't have to edit this XML view to 170 00:06:01,510 --> 00:06:04,180 get things done very often it could be a 171 00:06:04,180 --> 00:06:05,919 quicker way to create multiple similar 172 00:06:05,919 --> 00:06:08,050 widgets such as an array of buttons for 173 00:06:08,050 --> 00:06:10,570 a calculator app for example but you can 174 00:06:10,570 --> 00:06:12,700 achieve just about everything else when 175 00:06:12,700 --> 00:06:14,020 the help without actually having to know 176 00:06:14,020 --> 00:06:17,410 XML now if you already are familiar with 177 00:06:17,410 --> 00:06:18,460 XML then this should look pretty 178 00:06:18,460 --> 00:06:21,490 straightforward we can see that the 179 00:06:21,490 --> 00:06:23,560 basic screen is just a constraint layout 180 00:06:23,560 --> 00:06:25,780 with attributes are setting things like 181 00:06:25,780 --> 00:06:28,870 its width and height and included in the 182 00:06:28,870 --> 00:06:31,150 constraint layout is a textview with a 183 00:06:31,150 --> 00:06:35,349 text set to hullo will now this can look 184 00:06:35,349 --> 00:06:37,090 a bit complicated if you haven't seen 185 00:06:37,090 --> 00:06:39,580 XML before, I'll switch back over here to 186 00:06:39,580 --> 00:06:42,460 design view and when I do that you can 187 00:06:42,460 --> 00:06:45,350 see this component tree over to the left 188 00:06:45,350 --> 00:06:47,270 and that pretty much echoes what we saw 189 00:06:47,270 --> 00:06:49,550 in the XML view at the top is our 190 00:06:49,550 --> 00:06:52,130 activity underscore main layer the 191 00:06:52,130 --> 00:06:54,800 constraint layout and contained within 192 00:06:54,800 --> 00:06:56,470 the constraint layout is the textview 193 00:06:56,470 --> 00:06:58,310 and when I'm clicking all those things 194 00:06:58,310 --> 00:07:00,130 on the screen it gets highlighted in the 195 00:07:00,130 --> 00:07:02,540 componentry here but it also gets 196 00:07:02,540 --> 00:07:04,280 highlighted on the layout and if I click 197 00:07:04,280 --> 00:07:05,870 something on the layout it gets 198 00:07:05,870 --> 00:07:07,310 highlighted in the constraint layers as 199 00:07:07,310 --> 00:07:09,080 well so either way will work there's 200 00:07:09,080 --> 00:07:11,030 also a load of attributes for the things 201 00:07:11,030 --> 00:07:12,620 we've selected over to the far right 202 00:07:12,620 --> 00:07:14,960 over here. Now if I select the text view 203 00:07:14,960 --> 00:07:17,090 which I've got selected you can see its 204 00:07:17,090 --> 00:07:18,650 text property over here set to hello 205 00:07:18,650 --> 00:07:21,020 world I can change it here so I could 206 00:07:21,020 --> 00:07:24,470 put I was there or I was here would 207 00:07:24,470 --> 00:07:27,080 probably be more appropriate and press 208 00:07:27,080 --> 00:07:29,090 enter and you can see that was updated 209 00:07:29,090 --> 00:07:31,340 here but also updated now in the 210 00:07:31,340 --> 00:07:35,030 designer and also in the componentry now 211 00:07:35,030 --> 00:07:37,400 the textview itself expands 212 00:07:37,400 --> 00:07:40,160 automatically as I type more text so I 213 00:07:40,160 --> 00:07:44,750 come back here and at today you can see 214 00:07:44,750 --> 00:07:47,750 it's expanded to fit the text that we've 215 00:07:47,750 --> 00:07:50,150 actually selected. So I've shown you a 216 00:07:50,150 --> 00:07:52,130 way to update the text and we will be 217 00:07:52,130 --> 00:07:53,960 doing that but there are other ways that 218 00:07:53,960 --> 00:07:55,400 make it easier to make your app 219 00:07:55,400 --> 00:07:57,860 available in other languages. Now you 220 00:07:57,860 --> 00:07:59,480 probably wouldn't change it in a real 221 00:07:59,480 --> 00:08:01,370 application by just over typing what 222 00:08:01,370 --> 00:08:03,230 I've done like I did but we'll be 223 00:08:03,230 --> 00:08:05,300 covering that later in the course but 224 00:08:05,300 --> 00:08:07,700 that way will get us going for now now 225 00:08:07,700 --> 00:08:09,560 there is only a selection of properly 226 00:08:09,560 --> 00:08:11,390 showing on the screen at the moment the 227 00:08:11,390 --> 00:08:12,890 ones that tell you'd probably want to 228 00:08:12,890 --> 00:08:15,140 change most often but you can get access 229 00:08:15,140 --> 00:08:17,060 to all the properties by clicking up 230 00:08:17,060 --> 00:08:19,040 these on these double arrows here at the 231 00:08:19,040 --> 00:08:20,720 top then this version of Android studio 232 00:08:20,720 --> 00:08:23,090 defaults to showing the XML attributes 233 00:08:23,090 --> 00:08:25,790 editor when you first run it so what 234 00:08:25,790 --> 00:08:27,830 I've got here is the list that will 235 00:08:27,830 --> 00:08:28,970 rather the attributes that we're 236 00:08:28,970 --> 00:08:31,160 currently defined or have been defined 237 00:08:31,160 --> 00:08:33,770 for us by the template now in previous 238 00:08:33,770 --> 00:08:36,110 versions of Android studio all the 239 00:08:36,110 --> 00:08:37,909 attributes appeared in an alphabetical 240 00:08:37,909 --> 00:08:39,770 list and that makes life much easier 241 00:08:39,770 --> 00:08:41,840 because you can scroll through and check 242 00:08:41,840 --> 00:08:43,130 out any attributes that sound 243 00:08:43,130 --> 00:08:44,720 interesting but with the release of 244 00:08:44,720 --> 00:08:46,670 Android studio 3 that we're using here 245 00:08:46,670 --> 00:08:48,820 that list doesn't appear straight away 246 00:08:48,820 --> 00:08:50,900 instead we've got the attributes that 247 00:08:50,900 --> 00:08:52,910 we've changed even if we change them 248 00:08:52,910 --> 00:08:54,890 without being aware of it so you can see 249 00:08:54,890 --> 00:08:56,480 things here like layout underscore width 250 00:08:56,480 --> 00:08:59,540 and layout height there's also a text attribute 251 00:08:59,540 --> 00:09:02,720 and the constraints as well which you 252 00:09:02,720 --> 00:09:04,310 may not have been aware that you changed. 253 00:09:04,310 --> 00:09:05,900 so this isn't in other words a very 254 00:09:05,900 --> 00:09:08,270 concise view of the attributes being 255 00:09:08,270 --> 00:09:10,670 used at the moment now if you know which 256 00:09:10,670 --> 00:09:12,290 attributes you want to change it's also 257 00:09:12,290 --> 00:09:14,660 very easy to set it here just type it 258 00:09:14,660 --> 00:09:16,640 into the blank row at the bottom down 259 00:09:16,640 --> 00:09:18,830 here so this concise view is really 260 00:09:18,830 --> 00:09:20,390 great is great when you know what you 261 00:09:20,390 --> 00:09:22,460 want to change but isn't very helpful 262 00:09:22,460 --> 00:09:24,530 when you're learning about all this but 263 00:09:24,530 --> 00:09:26,330 fortunately Google have made the 264 00:09:26,330 --> 00:09:28,760 complete list available so you can click 265 00:09:28,760 --> 00:09:31,850 on this cog drop-down up here and select 266 00:09:31,850 --> 00:09:34,340 all attributes table once we do that 267 00:09:34,340 --> 00:09:36,110 this changes to the same view that 268 00:09:36,110 --> 00:09:38,000 earlier versions of Android studio had 269 00:09:38,000 --> 00:09:39,680 and we can scroll right down the list 270 00:09:39,680 --> 00:09:42,410 and see literally all the attributes we 271 00:09:42,410 --> 00:09:43,790 can actually choose which view to use 272 00:09:43,790 --> 00:09:46,130 here getting it more experienced you may 273 00:09:46,130 --> 00:09:47,750 want to use the XML attribute editor 274 00:09:47,750 --> 00:09:50,150 layout view that we had before just use 275 00:09:50,150 --> 00:09:52,610 the same cog menu up here to change back 276 00:09:52,610 --> 00:09:54,320 to that mode if you want to do that. 277 00:09:54,320 --> 00:09:55,700 Now there's all sorts of things that you can 278 00:09:55,700 --> 00:09:57,710 change here as well so let's scroll up 279 00:09:57,710 --> 00:10:00,020 and have a look I can spare this little 280 00:10:00,020 --> 00:10:02,420 arrow next to constraints you can see 281 00:10:02,420 --> 00:10:04,760 that there's quite a lot of them so you 282 00:10:04,760 --> 00:10:06,560 can make that pain wider by dragging its 283 00:10:06,560 --> 00:10:10,430 edge over here dragged it over but if 284 00:10:10,430 --> 00:10:12,320 you can't see the full names or if 285 00:10:12,320 --> 00:10:14,240 you're short of screen space you can 286 00:10:14,240 --> 00:10:15,950 switch off the design or blueprint modes 287 00:10:15,950 --> 00:10:18,620 using the Select design surface but just 288 00:10:18,620 --> 00:10:21,770 above, so you come up here and we can 289 00:10:21,770 --> 00:10:23,780 just select for example design only to 290 00:10:23,780 --> 00:10:26,090 give us a bit more space then move that 291 00:10:26,090 --> 00:10:28,100 over to get a bit of good more concise 292 00:10:28,100 --> 00:10:29,240 list of all the editors 293 00:10:29,240 --> 00:10:31,250 attributes and we can use that button to 294 00:10:31,250 --> 00:10:33,470 also toggle I can go back into is just 295 00:10:33,470 --> 00:10:34,940 the blueprint different one or two as 296 00:10:34,940 --> 00:10:37,160 well and of course we can also display 297 00:10:37,160 --> 00:10:40,820 them both and obviously depending on the 298 00:10:40,820 --> 00:10:42,050 amount of screen real estate we've got 299 00:10:42,050 --> 00:10:43,580 here remaining to me things are rare to 300 00:10:43,580 --> 00:10:45,380 see them all in their large enough size 301 00:10:45,380 --> 00:10:47,630 to work with do each pane in Android 302 00:10:47,630 --> 00:10:50,120 studio has a button that can be used to 303 00:10:50,120 --> 00:10:52,130 shrink it out of the way so that you can 304 00:10:52,130 --> 00:10:53,600 use the full space on your screen to 305 00:10:53,600 --> 00:10:55,850 focus on what you're doing now at the 306 00:10:55,850 --> 00:10:57,950 moment we're designing a layout and we 307 00:10:57,950 --> 00:10:59,510 don't need to see all the files of the 308 00:10:59,510 --> 00:11:01,550 project you'll notice that each separate 309 00:11:01,550 --> 00:11:03,490 pane has a button that looks like a bar 310 00:11:03,490 --> 00:11:05,720 that's just little one up here and I'll 311 00:11:05,720 --> 00:11:06,920 just zoom in so you can see that a 312 00:11:06,920 --> 00:11:08,690 little bit better it's got a little bar 313 00:11:08,690 --> 00:11:10,460 with an arrow pointing left right or 314 00:11:10,460 --> 00:11:12,440 down now clicking up 315 00:11:12,440 --> 00:11:14,149 which order will shrink the pipe in the 316 00:11:14,149 --> 00:11:15,949 direction of the arrow so that also 317 00:11:15,949 --> 00:11:17,990 gives you an indication of where to look 318 00:11:17,990 --> 00:11:20,029 to get it back again so if you can see 319 00:11:20,029 --> 00:11:21,649 that now a zoom in again that's got a 320 00:11:21,649 --> 00:11:23,750 little arrow pointing to the left if I 321 00:11:23,750 --> 00:11:25,879 click on that you can see that paint is 322 00:11:25,879 --> 00:11:28,129 now closed you can see the button to get 323 00:11:28,129 --> 00:11:29,629 the paint back again in this case it's 324 00:11:29,629 --> 00:11:31,519 the project click on that then that 325 00:11:31,519 --> 00:11:33,500 opens it out again, so you can do the 326 00:11:33,500 --> 00:11:35,000 same with the panes that open up along 327 00:11:35,000 --> 00:11:36,529 the bottom of the Android studio window 328 00:11:36,529 --> 00:11:39,740 down here I can click on log cat and 329 00:11:39,740 --> 00:11:41,060 don't worry about what that means at the 330 00:11:41,060 --> 00:11:43,399 moment but this is all about controlling 331 00:11:43,399 --> 00:11:44,899 the individual page and you'll be seeing 332 00:11:44,899 --> 00:11:47,329 that what they all do a little bit later 333 00:11:47,329 --> 00:11:49,939 so at the far right again I can shrink 334 00:11:49,939 --> 00:11:51,709 the pane and if I have a look doing that 335 00:11:51,709 --> 00:11:53,269 up you can see that it's the arrow 336 00:11:53,269 --> 00:11:56,360 pointing down I click on that point it 337 00:11:56,360 --> 00:11:57,769 goes down and I can click my here to 338 00:11:57,769 --> 00:11:59,990 click on log cat and open it again and 339 00:11:59,990 --> 00:12:01,850 incidentally I can just click on the tab 340 00:12:01,850 --> 00:12:03,769 if I wanna open or close it as well so 341 00:12:03,769 --> 00:12:05,689 in other words it toggled so if I open a 342 00:12:05,689 --> 00:12:06,980 block cat again and this time come over 343 00:12:06,980 --> 00:12:09,860 here and click on event log they're both 344 00:12:09,860 --> 00:12:11,720 next to each other, again I can just use 345 00:12:11,720 --> 00:12:13,970 the buttons to shrink them the closing 346 00:12:13,970 --> 00:12:16,939 down as needed, so there's a lot going on 347 00:12:16,939 --> 00:12:18,529 in Android studio and it can look very 348 00:12:18,529 --> 00:12:20,990 confusing but you can try which panes 349 00:12:20,990 --> 00:12:22,579 you see and you can shrink any that 350 00:12:22,579 --> 00:12:24,170 you're not interested in then it's 351 00:12:24,170 --> 00:12:26,000 Liberty lets you focus on the work that 352 00:12:26,000 --> 00:12:28,490 you want to doing so I've closed down 353 00:12:28,490 --> 00:12:30,170 those two bottom panes I'm also going to 354 00:12:30,170 --> 00:12:31,730 shrink the project pane over here again 355 00:12:31,730 --> 00:12:34,550 so we can focus on this layout and I was 356 00:12:34,550 --> 00:12:37,069 looking at the constraints before before 357 00:12:37,069 --> 00:12:39,410 I started opening and closing paints now 358 00:12:39,410 --> 00:12:41,600 these constraints look a bit confusing 359 00:12:41,600 --> 00:12:43,550 let's expand this out a little bit so I 360 00:12:43,550 --> 00:12:46,519 can see a little bit more but those long 361 00:12:46,519 --> 00:12:48,139 names are intended to describe what each 362 00:12:48,139 --> 00:12:50,480 one does so for example the first one 363 00:12:50,480 --> 00:12:52,699 starts with bottom underscore to bottom 364 00:12:52,699 --> 00:12:54,889 of which tells you that it'll be lining 365 00:12:54,889 --> 00:12:56,990 up the bottom of the textview with 366 00:12:56,990 --> 00:12:59,149 something then you can line the bottom 367 00:12:59,149 --> 00:13:01,040 of our texts you up with the bottom of 368 00:13:01,040 --> 00:13:02,959 something else which is what this first 369 00:13:02,959 --> 00:13:05,209 constraint does but you can also line 370 00:13:05,209 --> 00:13:06,740 the bottom of it up with the top of 371 00:13:06,740 --> 00:13:08,750 something so that's there there's a 372 00:13:08,750 --> 00:13:12,740 bottom to top of here for that reason as 373 00:13:12,740 --> 00:13:14,750 well you don't want to line the bottom 374 00:13:14,750 --> 00:13:16,189 of the textview with the top of another 375 00:13:16,189 --> 00:13:18,589 object on the screen you also lie on the 376 00:13:18,589 --> 00:13:20,180 left or right of a widget with the left 377 00:13:20,180 --> 00:13:22,040 or right of another widget to position 378 00:13:22,040 --> 00:13:24,350 things where you need them. Now lining 379 00:13:24,350 --> 00:13:26,420 everything up in here would soon get TD 380 00:13:26,420 --> 00:13:28,220 and there's a much easier way that I'm 381 00:13:28,220 --> 00:13:29,240 gonna show you shortly 382 00:13:29,240 --> 00:13:31,040 we've got a few more controls on the 383 00:13:31,040 --> 00:13:32,839 screen. So you want to come in here 384 00:13:32,839 --> 00:13:34,790 perhaps to check and maybe change a few 385 00:13:34,790 --> 00:13:36,649 things though especially on a slow 386 00:13:36,649 --> 00:13:37,999 computer or if you've only got a small 387 00:13:37,999 --> 00:13:40,369 screen so for now that I don't worry too 388 00:13:40,369 --> 00:13:41,899 much about what these constraints mean 389 00:13:41,899 --> 00:13:43,519 you don't have to remember them all 390 00:13:43,519 --> 00:13:45,019 once you've lined up a few things 391 00:13:45,019 --> 00:13:46,939 they'll make a lot more sense and 392 00:13:46,939 --> 00:13:48,139 they're gonna be coming back to this and 393 00:13:48,139 --> 00:13:49,879 we will be using this lamp you a lot 394 00:13:49,879 --> 00:13:51,499 throughout the course, so you'll get 395 00:13:51,499 --> 00:13:53,929 plenty of practice for now I just wanted 396 00:13:53,929 --> 00:13:55,579 to quickly show you where you'd go to 397 00:13:55,579 --> 00:13:57,439 make changes to the lands for your apps 398 00:13:57,439 --> 00:13:58,999 well that's we're gonna come over here 399 00:13:58,999 --> 00:14:01,189 click on this double arrow again to go 400 00:14:01,189 --> 00:14:03,350 back to the common properties I get some 401 00:14:03,350 --> 00:14:06,769 screen real estate back and if you did 402 00:14:06,769 --> 00:14:08,779 have both the design and blueprint 403 00:14:08,779 --> 00:14:10,699 selected you can select that now and see 404 00:14:10,699 --> 00:14:12,459 that it'll fit a little bit better. 405 00:14:12,459 --> 00:14:15,290 Now over to the left of those buttons is one 406 00:14:15,290 --> 00:14:17,149 that you can use to toggle the layered 407 00:14:17,149 --> 00:14:18,649 into landscape let's just little button 408 00:14:18,649 --> 00:14:20,869 here so we can click on that and that's 409 00:14:20,869 --> 00:14:22,339 great for checking how things or look 410 00:14:22,339 --> 00:14:23,899 when the device is rotated so I can 411 00:14:23,899 --> 00:14:26,569 click on that and you can see that it's 412 00:14:26,569 --> 00:14:30,139 moved the screen to landscape mode there 413 00:14:30,139 --> 00:14:31,220 we'll be coming back to this layout 414 00:14:31,220 --> 00:14:33,829 editor in the next video the other thing 415 00:14:33,829 --> 00:14:35,029 that I wanted to show you though is the 416 00:14:35,029 --> 00:14:37,249 project pane this is where you choose 417 00:14:37,249 --> 00:14:40,069 which files you want to work on over the 418 00:14:40,069 --> 00:14:43,639 project pane again and I might just grab 419 00:14:43,639 --> 00:14:44,839 a little bit of screen real estate back 420 00:14:44,839 --> 00:14:46,689 and the more also set this back to 421 00:14:46,689 --> 00:14:49,850 portrait but over here in the project 422 00:14:49,850 --> 00:14:53,059 pane I can expand app and expand Java as 423 00:14:53,059 --> 00:14:55,100 I've done here and finally our package 424 00:14:55,100 --> 00:14:57,230 shows up in this case Academy don't 425 00:14:57,230 --> 00:14:59,899 learn programming dot HelloWorld and we 426 00:14:59,899 --> 00:15:02,809 can then see the Kotlin files now under 427 00:15:02,809 --> 00:15:04,579 res there's a layout folder we have a 428 00:15:04,579 --> 00:15:07,429 look at that res layout and that's where 429 00:15:07,429 --> 00:15:09,709 our layouts are stored so basically in 430 00:15:09,709 --> 00:15:10,850 here are all the files that are 431 00:15:10,850 --> 00:15:13,670 associated with the project and they'll 432 00:15:13,670 --> 00:15:15,079 make a lot more sense as we go through 433 00:15:15,079 --> 00:15:16,910 the course but the clever thing is that 434 00:15:16,910 --> 00:15:18,769 Android studio is created in all this 435 00:15:18,769 --> 00:15:21,410 forests saving a lot of time. Now the 436 00:15:21,410 --> 00:15:23,990 common file main activity is one here 437 00:15:23,990 --> 00:15:26,269 I've got selected that's got the card 438 00:15:26,269 --> 00:15:28,790 that Android studio generated for us I went 439 00:15:28,790 --> 00:15:30,199 through this briefly in the video and 440 00:15:30,199 --> 00:15:31,939 templates that's his fault here if we 441 00:15:31,939 --> 00:15:33,709 open it up now there's not much in this 442 00:15:33,709 --> 00:15:35,749 one because we chose an empty activity 443 00:15:35,749 --> 00:15:37,639 template but you can see that's aligned 444 00:15:37,639 --> 00:15:39,049 here is where it uses the activity 445 00:15:39,049 --> 00:15:40,040 underscore main layer 446 00:15:40,040 --> 00:15:43,100 it's code along 10 so that's one way 447 00:15:43,100 --> 00:15:45,380 that the layout files are used to create 448 00:15:45,380 --> 00:15:47,840 the display for our apps so Android 449 00:15:47,840 --> 00:15:49,970 studio has created the basic code for 450 00:15:49,970 --> 00:15:52,070 our app with a layout to define the 451 00:15:52,070 --> 00:15:54,740 screen and the code to display it when 452 00:15:54,740 --> 00:15:56,930 we run the app that's part of the beauty 453 00:15:56,930 --> 00:15:59,150 of Android studio it does a lot of this 454 00:15:59,150 --> 00:16:01,880 work for us saving us a lot of time when 455 00:16:01,880 --> 00:16:03,920 we were creating our applications so 456 00:16:03,920 --> 00:16:05,360 that was a very quick tour of Android 457 00:16:05,360 --> 00:16:07,220 studio and we will be looking at it in 458 00:16:07,220 --> 00:16:09,410 much greater detail as we go through 459 00:16:09,410 --> 00:16:11,510 this course, but before you can do much 460 00:16:11,510 --> 00:16:13,340 experimenting though you need to be able 461 00:16:13,340 --> 00:16:15,260 to run your app to see how the things 462 00:16:15,260 --> 00:16:17,390 we're trying out really behave. So in the 463 00:16:17,390 --> 00:16:18,440 next video we're going to be running 464 00:16:18,440 --> 00:16:20,810 this app in an emulator and I'll be 465 00:16:20,810 --> 00:16:22,160 showing you also how to set up the 466 00:16:22,160 --> 00:16:24,800 emulator as well, then in the video after 467 00:16:24,800 --> 00:16:25,970 that one I'm going to show you how it 468 00:16:25,970 --> 00:16:28,040 runs on a physical Android device so 469 00:16:28,040 --> 00:16:31,960 let's move on now to the next video.