1 00:00:02,115 --> 00:00:04,762 (typing) 2 00:00:04,762 --> 00:00:06,977 Now there are a number of different layouts that 3 00:00:06,977 --> 00:00:10,844 you can use to create app screens in Android Studio, 4 00:00:10,844 --> 00:00:12,179 and we're gonna have a quick look 5 00:00:12,179 --> 00:00:14,390 at a few others a little bit later. 6 00:00:14,390 --> 00:00:16,473 Using layouts to position items on the screen 7 00:00:16,473 --> 00:00:18,284 used to be quite complicated, 8 00:00:18,284 --> 00:00:20,345 when you wanted to line things up horizontally 9 00:00:20,345 --> 00:00:23,859 and vertically, to get the screen just the way you want. 10 00:00:23,859 --> 00:00:25,949 But when they released Android Nougat, 11 00:00:25,949 --> 00:00:28,688 Google introduced the ConstraintLayout, 12 00:00:28,688 --> 00:00:31,593 and that basically replaces the old RelativeLayout 13 00:00:31,593 --> 00:00:35,442 and is also a good alternative to many of the older layouts. 14 00:00:35,442 --> 00:00:37,826 Now we're going to discuss the older layouts later 15 00:00:37,826 --> 00:00:39,358 so that you're familiar with them. 16 00:00:39,358 --> 00:00:41,517 You may have to work on updating older code 17 00:00:41,517 --> 00:00:43,252 so it's good to at least be familiar with 18 00:00:43,252 --> 00:00:44,981 some of these other layouts. 19 00:00:44,981 --> 00:00:47,335 But for most of the examples in this course, 20 00:00:47,335 --> 00:00:49,659 I'm gonna be using the new ConstraintLayout 21 00:00:49,659 --> 00:00:53,712 and the trusty LinearLayout, when creating layout screens. 22 00:00:53,712 --> 00:00:56,640 Now Google didn't just introduce a new type of layout, 23 00:00:56,640 --> 00:00:59,176 they also completely revamped the Android Studio 24 00:00:59,176 --> 00:01:01,182 Layout Designer to handle it. 25 00:01:01,182 --> 00:01:02,737 So we're gonna start a new project 26 00:01:02,737 --> 00:01:06,623 and get into discovering how to use the Layout Designer. 27 00:01:06,623 --> 00:01:08,238 Now the first project we're gonna create 28 00:01:08,238 --> 00:01:11,400 isn't our button click app, it's just something 29 00:01:11,400 --> 00:01:13,423 that we're gonna have a play with the designer, 30 00:01:13,423 --> 00:01:15,641 and probably get it into a right mess. 31 00:01:15,641 --> 00:01:17,543 Now the only way, though, to learn how 32 00:01:17,543 --> 00:01:20,418 to use the designer is to try it out. 33 00:01:20,418 --> 00:01:22,682 So I'm not even going to run this app, 34 00:01:22,682 --> 00:01:24,690 I'm just gonna be placing things on the screen, 35 00:01:24,690 --> 00:01:26,463 moving them around, and showing you 36 00:01:26,463 --> 00:01:28,516 how to put things where you want them 37 00:01:28,516 --> 00:01:29,972 and have them stay there. 38 00:01:29,972 --> 00:01:32,005 And that's why I said we were going to play with it. 39 00:01:32,005 --> 00:01:34,506 So make sure you do have fun. 40 00:01:34,506 --> 00:01:37,306 But before we start that, I just wanted to point out that 41 00:01:37,306 --> 00:01:39,940 one of the best widgets for demonstrating this 42 00:01:39,940 --> 00:01:42,038 is an ImageView, and that's because 43 00:01:42,038 --> 00:01:43,789 it's a very visual component 44 00:01:43,789 --> 00:01:46,249 and you can easily see it on the screen. 45 00:01:46,249 --> 00:01:49,183 So I'm going to be adding an ImageView to our layout. 46 00:01:49,183 --> 00:01:51,093 Now an ImageView without an image 47 00:01:51,093 --> 00:01:52,640 isn't very interesting, though. 48 00:01:52,640 --> 00:01:54,013 So the first thing you'll want to do 49 00:01:54,013 --> 00:01:56,685 is start by downloading the sample images 50 00:01:56,685 --> 00:02:00,488 that I've included in the resources section for this video. 51 00:02:00,488 --> 00:02:02,314 Now you can actually get them by moving your mouse 52 00:02:02,314 --> 00:02:04,110 up to the top left of this video 53 00:02:04,110 --> 00:02:06,442 and clicking on the 3-bar menu icon 54 00:02:06,442 --> 00:02:08,600 above Resources available. 55 00:02:08,600 --> 00:02:10,924 And that will slide out a panel and you'll see 56 00:02:10,924 --> 00:02:13,912 the two resources, in this case 57 00:02:13,912 --> 00:02:15,245 ball_640x480.jpg 58 00:02:16,290 --> 00:02:18,457 and also ball_100x100.jpg. 59 00:02:20,860 --> 00:02:22,581 So download those files and save them 60 00:02:22,581 --> 00:02:25,239 onto your hard drive, and then click the X above 61 00:02:25,239 --> 00:02:26,248 the tooltip when you've done that 62 00:02:26,248 --> 00:02:29,402 and you're ready to continue with this video. 63 00:02:29,402 --> 00:02:32,519 Now you can, of course, use any image that you want. 64 00:02:32,519 --> 00:02:33,575 So by all means use one 65 00:02:33,575 --> 00:02:36,186 of your own pictures, images, if you'd prefer. 66 00:02:36,186 --> 00:02:37,333 One thing to note, though, is that 67 00:02:37,333 --> 00:02:39,469 there's a really odd peculiarity 68 00:02:39,469 --> 00:02:42,232 in Android Studio, and that's that it doesn't like 69 00:02:42,232 --> 00:02:44,849 images that have capital letters in the filename. 70 00:02:44,849 --> 00:02:47,309 Now you can only use the characters 0 to 9 71 00:02:47,309 --> 00:02:50,221 and lowercase a to z, as well as the dash, 72 00:02:50,221 --> 00:02:52,478 underscore, and full stop. 73 00:02:52,478 --> 00:02:54,644 Now you might be wondering why that is the case 74 00:02:54,644 --> 00:02:56,817 but in fact there's a good reason for this. 75 00:02:56,817 --> 00:02:58,356 And the reason is that filenames 76 00:02:58,356 --> 00:03:00,793 in Windows aren't case sensitive, 77 00:03:00,793 --> 00:03:04,001 in other words Ball.jpg with a capital B 78 00:03:04,001 --> 00:03:08,332 would be the same file as ball.jpg with a lowercase b. 79 00:03:08,332 --> 00:03:11,343 However, on Linux or OS X, Mac OS X, 80 00:03:11,343 --> 00:03:14,271 they would actually be two different files. 81 00:03:14,271 --> 00:03:16,460 So it would be very easy to produce 82 00:03:16,460 --> 00:03:18,626 a project on one operating system 83 00:03:18,626 --> 00:03:21,916 that ultimately wouldn't work on another operating system. 84 00:03:21,916 --> 00:03:25,018 So rather than building a complex set of checking, 85 00:03:25,018 --> 00:03:27,176 Google just made the rule that upper-case letters 86 00:03:27,176 --> 00:03:30,587 aren't allowed, which makes everyone's life easier. 87 00:03:30,587 --> 00:03:32,541 So bear that in mind when you create any type 88 00:03:32,541 --> 00:03:35,537 of resource in Android Studio, including your images. 89 00:03:35,537 --> 00:03:38,443 You should really be using just lowercase letters. 90 00:03:38,443 --> 00:03:41,401 Now I'd also suggest if you are intending to use 91 00:03:41,401 --> 00:03:44,405 your own images, that you don't use a full HD, 92 00:03:44,405 --> 00:03:46,827 in other words a 1920 by 1080 image, 93 00:03:46,827 --> 00:03:48,715 remembering this is gonna be viewed 94 00:03:48,715 --> 00:03:50,715 on a 3 inch wide screen. 95 00:03:51,957 --> 00:03:53,209 Alright so hopefully at this point 96 00:03:53,209 --> 00:03:54,864 you've got the image file ready. 97 00:03:54,864 --> 00:03:57,185 It's time to create our test project. 98 00:03:57,185 --> 00:03:59,155 So I've got Android Studio started now 99 00:03:59,155 --> 00:04:00,279 as you can see on the screen. 100 00:04:00,279 --> 00:04:04,309 I'm going to click on Start a new Android Studio project. 101 00:04:04,309 --> 00:04:06,022 Now we're going to be playing with a designer 102 00:04:06,022 --> 00:04:08,216 a bit like a child with a box of crayons. 103 00:04:08,216 --> 00:04:12,805 So for that reason I'm gonna call this project Playing. 104 00:04:12,805 --> 00:04:14,533 Now if you make a right mess, and 105 00:04:14,533 --> 00:04:16,185 frankly I hope that you do 106 00:04:16,185 --> 00:04:19,363 because it shows that you've been experimenting, 107 00:04:19,363 --> 00:04:21,083 then you can create a new project and call it 108 00:04:21,083 --> 00:04:23,815 Playing 2 or Playing 3, etc. 109 00:04:23,815 --> 00:04:26,245 And also you can make a note of the project location 110 00:04:26,245 --> 00:04:29,279 which you can see over here at the bottom of the screen 111 00:04:29,279 --> 00:04:30,479 and you can use your file manager 112 00:04:30,479 --> 00:04:32,697 to delete the entire Playing directory 113 00:04:32,697 --> 00:04:34,500 if you wish before starting again. 114 00:04:34,500 --> 00:04:36,446 That's entirely up to you. 115 00:04:36,446 --> 00:04:39,057 Now the company domain should have been remembered 116 00:04:39,057 --> 00:04:40,815 from last time so I'm going to leave 117 00:04:40,815 --> 00:04:43,917 that as to what it was, learnprogramming.academy. 118 00:04:43,917 --> 00:04:46,354 Now you of course are free to use your own domain 119 00:04:46,354 --> 00:04:48,648 there if you prefer, but one thing to bear in mind 120 00:04:48,648 --> 00:04:49,977 is that my sample code 121 00:04:49,977 --> 00:04:52,852 will be using learnprogramming.academy. 122 00:04:52,852 --> 00:04:55,259 So using something different can make it harder 123 00:04:55,259 --> 00:04:56,799 for you to use differencing tools 124 00:04:56,799 --> 00:05:00,375 on the projects when comparing your source code with mine. 125 00:05:00,375 --> 00:05:02,186 Now I'm going to be covering that later in this course, 126 00:05:02,186 --> 00:05:03,854 so if you want to keep things simple 127 00:05:03,854 --> 00:05:05,220 then use the same domain name 128 00:05:05,220 --> 00:05:08,133 that I'm using here, learnprogramming.academy. 129 00:05:08,133 --> 00:05:10,103 So the project location should have been filled in 130 00:05:10,103 --> 00:05:12,095 for you as it was for me on the screen then, 131 00:05:12,095 --> 00:05:12,928 but you can change that 132 00:05:12,928 --> 00:05:16,457 to any suitable directory, if you prefer. 133 00:05:16,457 --> 00:05:18,819 Now the last thing you have to check on this screen 134 00:05:18,819 --> 00:05:22,019 is the box labelled Include Kotlin support, 135 00:05:22,019 --> 00:05:23,392 and you can see over here that, 136 00:05:23,392 --> 00:05:25,113 that is checked by default. 137 00:05:25,113 --> 00:05:27,603 If you don't tick that box, Android Studio's 138 00:05:27,603 --> 00:05:31,678 gonna generate Java code instead of Kotlin. 139 00:05:31,678 --> 00:05:33,618 Now there's no difference in designing layouts 140 00:05:33,618 --> 00:05:35,467 whether you're using Java or Kotlin, 141 00:05:35,467 --> 00:05:36,674 so this video is the same for 142 00:05:36,674 --> 00:05:39,308 my Java and Kotlin Android courses. 143 00:05:39,308 --> 00:05:42,326 So if you're actually in my Java Android course, 144 00:05:42,326 --> 00:05:44,794 then in fact you'd want to take the checkbox off, 145 00:05:44,794 --> 00:05:46,575 but if you're in the Kotlin course you want to 146 00:05:46,575 --> 00:05:48,990 click that to include Kotlin support. 147 00:05:48,990 --> 00:05:50,778 And by the way it's perfectly possible to mix 148 00:05:50,778 --> 00:05:53,329 Java and Kotlin in the same project, 149 00:05:53,329 --> 00:05:55,125 in which case you'd tick the box 150 00:05:55,125 --> 00:05:57,434 if you were deciding to use a Java project 151 00:05:57,434 --> 00:05:59,298 to also include Kotlin support. 152 00:05:59,298 --> 00:06:01,125 For now though I suggest that if you are 153 00:06:01,125 --> 00:06:03,555 in the Java course you leave it un-ticked for Java 154 00:06:03,555 --> 00:06:05,381 and ticked for Kotlin. 155 00:06:05,381 --> 00:06:08,264 So I'm going to click on Next. 156 00:06:08,264 --> 00:06:09,350 So on this screen I'm going 157 00:06:09,350 --> 00:06:12,014 to choose API 17 as the default, 158 00:06:12,014 --> 00:06:14,897 as I've explained in a previous video. 159 00:06:14,897 --> 00:06:16,897 Now we don't want any of these other options, 160 00:06:16,897 --> 00:06:19,689 so leave them all unchecked and click on Next. 161 00:06:19,689 --> 00:06:21,689 Now for our purposes here, we're going to use 162 00:06:21,689 --> 00:06:23,757 the Empty Activity and that's highlighted 163 00:06:23,757 --> 00:06:26,212 by default, but if not, check on that 164 00:06:26,212 --> 00:06:28,578 and click on Next again. 165 00:06:28,578 --> 00:06:30,397 Now there's nothing to change on this next screen 166 00:06:30,397 --> 00:06:33,204 but you do want to make sure that the two boxes, 167 00:06:33,204 --> 00:06:36,230 Generate Layout File. the check box to the left there, 168 00:06:36,230 --> 00:06:38,992 and Backwards Compatibility (AppCompat), 169 00:06:38,992 --> 00:06:40,524 you want to make sure that they're both checked, 170 00:06:40,524 --> 00:06:42,365 as they are in this case. 171 00:06:42,365 --> 00:06:43,731 And in terms of what they do, 172 00:06:43,731 --> 00:06:45,369 well Generate Layout function 173 00:06:45,369 --> 00:06:48,113 creates a layout file for you, and if you 174 00:06:48,113 --> 00:06:49,387 un-tick it, you'll just have 175 00:06:49,387 --> 00:06:51,520 to create the layout from scratch. 176 00:06:51,520 --> 00:06:52,586 Now that actually isn't hard to do, 177 00:06:52,586 --> 00:06:54,548 and in fact in future videos we'll be 178 00:06:54,548 --> 00:06:56,589 creating another layout later, 179 00:06:56,589 --> 00:06:59,670 but why create work at this stage of the course. 180 00:06:59,670 --> 00:07:03,587 And the Backwards Compatibility box, or the checked box, 181 00:07:03,587 --> 00:07:07,239 that causes Android Studio to use the AppCompat library 182 00:07:07,239 --> 00:07:08,658 and that's so that your code will work 183 00:07:08,658 --> 00:07:11,065 on earlier versions of Android, even if they use 184 00:07:11,065 --> 00:07:14,084 features that were introduced in later versions. 185 00:07:14,084 --> 00:07:16,499 There's very rarely a reason to un-tick this, 186 00:07:16,499 --> 00:07:18,785 so I'm going to leave it checked. 187 00:07:18,785 --> 00:07:21,766 Now the suggested names for the Activity and Layout, 188 00:07:21,766 --> 00:07:24,574 MainActivity and activity_main, are fine. 189 00:07:24,574 --> 00:07:28,222 So I'm now going to click on Finish. 190 00:07:28,222 --> 00:07:30,663 Now Android Studio is now in the process of 191 00:07:30,663 --> 00:07:32,467 creating the project and you can see 192 00:07:32,467 --> 00:07:34,414 that the build progress, or 193 00:07:34,414 --> 00:07:36,618 the build progress rather, as it does that. 194 00:07:36,618 --> 00:07:38,481 And I'm running at this stage, as you can see, 195 00:07:38,481 --> 00:07:41,115 a beta version of Android Studio 3. 196 00:07:41,115 --> 00:07:42,285 So it's a little bit slower than 197 00:07:42,285 --> 00:07:44,051 what the final release will be, 198 00:07:44,051 --> 00:07:47,134 but we'll give it a moment to finish. 199 00:07:50,420 --> 00:07:52,231 Alright, so you can see down the bottom right hand corner 200 00:07:52,231 --> 00:07:55,519 that it's working away and the gradle build is running 201 00:07:55,519 --> 00:07:57,936 and it's actually indexing a few files. 202 00:07:57,936 --> 00:07:59,566 It actually does quite a bit of stuff, 203 00:07:59,566 --> 00:08:01,996 even after the editing window has appeared. 204 00:08:01,996 --> 00:08:03,498 And it's a good idea not to do too much 205 00:08:03,498 --> 00:08:04,539 until all that's finished. 206 00:08:04,539 --> 00:08:06,033 And you can see now, down the bottom right hand corner 207 00:08:06,033 --> 00:08:08,772 of the screen, the progress bar has disappeared 208 00:08:08,772 --> 00:08:12,802 and for all intents and purposes now, it's finished 209 00:08:12,802 --> 00:08:16,220 setting things up and we're ready to go. 210 00:08:16,220 --> 00:08:17,737 Alright so, there's a few things now 211 00:08:17,737 --> 00:08:20,235 that I want to talk about with the Layout Designer. 212 00:08:20,235 --> 00:08:23,540 And firstly, experiment and try things out. 213 00:08:23,540 --> 00:08:26,506 Make a mess of it all and start again, maybe more than once. 214 00:08:26,506 --> 00:08:28,348 You won't actually do any harm and you 215 00:08:28,348 --> 00:08:30,725 can always delete the project directories 216 00:08:30,725 --> 00:08:32,717 when you've made a right mess of things. 217 00:08:32,717 --> 00:08:33,841 And if you're going to do that you'd obviously 218 00:08:33,841 --> 00:08:35,169 want to shut down Android Studio 219 00:08:35,169 --> 00:08:36,988 before you deleted anything. 220 00:08:36,988 --> 00:08:39,462 Now it's particularly important to experiment 221 00:08:39,462 --> 00:08:40,957 with the Layout Designer and 222 00:08:40,957 --> 00:08:43,386 that's because it changes so much. 223 00:08:43,386 --> 00:08:45,764 Now Google introduced this new Layout Designer 224 00:08:45,764 --> 00:08:48,764 in Android Studio 2.2, back in 2016. 225 00:08:49,983 --> 00:08:52,684 And personally. I've lost count of how many changes 226 00:08:52,684 --> 00:08:55,650 they've made to it through to version 2.3.3, 227 00:08:55,650 --> 00:08:58,903 and now, what we're running, Android Studio 3. 228 00:08:58,903 --> 00:08:59,736 Now we're actually working 229 00:08:59,736 --> 00:09:02,329 at the cutting edge of mobile technology 230 00:09:02,329 --> 00:09:05,038 and Google are constantly changing things. 231 00:09:05,038 --> 00:09:07,491 Now something that works in a certain way today, 232 00:09:07,491 --> 00:09:09,415 may very well not work in that way 233 00:09:09,415 --> 00:09:11,573 or may work differently tomorrow. 234 00:09:11,573 --> 00:09:14,486 Now we do record videos frequently in this course, 235 00:09:14,486 --> 00:09:16,388 but if we try to keep up with all the changes, 236 00:09:16,388 --> 00:09:18,531 we'd never get any new content added. 237 00:09:18,531 --> 00:09:20,757 As it turns out I'm re-recording these videos 238 00:09:20,757 --> 00:09:23,338 in August and September because Android Studio's 239 00:09:23,338 --> 00:09:25,383 Layout Designer is now very different 240 00:09:25,383 --> 00:09:28,598 to what it was back in February 2017. 241 00:09:28,598 --> 00:09:32,696 Now that very well may make life "interesting" 242 00:09:32,696 --> 00:09:34,627 but I don't want you to feel sorry for me. 243 00:09:34,627 --> 00:09:36,813 It's far harder for you! 244 00:09:36,813 --> 00:09:37,954 Now you're having to learn how 245 00:09:37,954 --> 00:09:39,675 to use a development environment that's changing 246 00:09:39,675 --> 00:09:42,882 all the time, and frankly that's certainly not easy, 247 00:09:42,882 --> 00:09:44,822 when you're learning 248 00:09:44,822 --> 00:09:46,731 something new like Android. 249 00:09:46,731 --> 00:09:48,934 Myself and JP, we're so used to all this, 250 00:09:48,934 --> 00:09:51,206 sometimes we barely notice a change. 251 00:09:51,206 --> 00:09:52,677 But when you're starting out and you haven't 252 00:09:52,677 --> 00:09:55,583 had much experience in the software 253 00:09:55,583 --> 00:09:58,481 or in Android in general, it can get very confusing. 254 00:09:58,481 --> 00:10:01,605 Now there's not really a lot you can do about this, 255 00:10:01,605 --> 00:10:05,786 other than learning to live with it and experimenting. 256 00:10:05,786 --> 00:10:07,559 Now there is something we can do to help, 257 00:10:07,559 --> 00:10:09,785 and that's to explain what's going on. 258 00:10:09,785 --> 00:10:12,064 So in these videos in this section of the course, 259 00:10:12,064 --> 00:10:14,464 I won't just be showing you a series of keys to press 260 00:10:14,464 --> 00:10:16,570 or operations to perform, I'm going 261 00:10:16,570 --> 00:10:19,211 to be explaining why you're doing what you're doing. 262 00:10:19,211 --> 00:10:20,864 That way you'll develop an understanding 263 00:10:20,864 --> 00:10:23,618 of what's going on, why you're doing certain things, 264 00:10:23,618 --> 00:10:25,844 and what's happening when you do. 265 00:10:25,844 --> 00:10:28,688 Now when you really understand how it's all working, 266 00:10:28,688 --> 00:10:31,180 change is much easier to deal with. 267 00:10:31,180 --> 00:10:33,041 Alright, so that's what I'm going to be doing. 268 00:10:33,041 --> 00:10:36,302 What you can do though, is experiment, try things out. 269 00:10:36,302 --> 00:10:38,210 You know, if you're not sure what a button 270 00:10:38,210 --> 00:10:40,794 on the toolbar does, one of these button up here, 271 00:10:40,794 --> 00:10:43,285 then just click one and see what happens when you click it. 272 00:10:43,285 --> 00:10:45,398 What actually pops up on the screen when that happens, 273 00:10:45,398 --> 00:10:48,416 and just really experiment with the various buttons 274 00:10:48,416 --> 00:10:50,046 to see what happens when you do it. 275 00:10:50,046 --> 00:10:51,835 What I can guarantee, is one thing. 276 00:10:51,835 --> 00:10:53,623 It won't damage your computer. 277 00:10:53,623 --> 00:10:55,465 The very worst thing that will happen 278 00:10:55,465 --> 00:10:57,895 is that you will do strange things to the project 279 00:10:57,895 --> 00:11:00,287 and may have to start over again from scratch. 280 00:11:00,287 --> 00:11:01,834 But when you're learning, going through it 281 00:11:01,834 --> 00:11:03,336 all again is a good thing. 282 00:11:03,336 --> 00:11:05,011 Alright, now for the good news. 283 00:11:05,011 --> 00:11:07,335 What I've been saying really only applies 284 00:11:07,335 --> 00:11:09,063 to the Layout Designer. 285 00:11:09,063 --> 00:11:11,871 The Android code base is far more stable, 286 00:11:11,871 --> 00:11:14,112 and that changes far less frequently. 287 00:11:14,112 --> 00:11:15,991 Now there are changes that affect the code, 288 00:11:15,991 --> 00:11:18,248 things like annotations that we'll be looking at. 289 00:11:18,248 --> 00:11:20,715 But generally, the code side of things, 290 00:11:20,715 --> 00:11:22,723 well that doesn't change very often. 291 00:11:22,723 --> 00:11:23,900 So it's not going to be as difficult 292 00:11:23,900 --> 00:11:25,447 as I may have implied just now. 293 00:11:25,447 --> 00:11:27,401 It's just that this visual Layout Designer 294 00:11:27,401 --> 00:11:29,311 is the thing that changes so often. 295 00:11:29,311 --> 00:11:31,341 Alright, so let's finish this video here, 296 00:11:31,341 --> 00:11:34,042 and in the next video we'll start getting stuck in 297 00:11:34,042 --> 00:11:37,635 and talking more about, and using, the Layout Designer. 298 00:11:37,635 --> 00:11:39,310 See you in the next video.