1 00:00:00,000 --> 00:00:03,990 So up until this point in the course, when we've created applications, you've 2 00:00:04,000 --> 00:00:08,990 just been using the default icon that comes with Android. And we can see that if 3 00:00:09,000 --> 00:00:12,990 we go into our resources folder, into each of the drawable folders, we have that 4 00:00:13,000 --> 00:00:15,990 icon, you know the little green icon. 5 00:00:16,000 --> 00:00:17,990 It's just the generic application icon. 6 00:00:18,000 --> 00:00:21,990 Now obviously if you are building an application, you are going to want your own 7 00:00:22,000 --> 00:00:26,990 custom icon that the users see when they go into the App drawer, and this is 8 00:00:27,000 --> 00:00:28,990 known as the launcher icon. 9 00:00:29,000 --> 00:00:31,990 Now, I just want to highlight, on the STK site, 10 00:00:32,000 --> 00:00:37,990 if we go into Dev Guide and then come down under Best Practices, to Icon Design, 11 00:00:38,000 --> 00:00:40,990 it will list all of the various icons that exist in Android. 12 00:00:41,000 --> 00:00:44,990 Launcher Icon is the most well-known one. 13 00:00:45,000 --> 00:00:46,990 It's the icon that represents your application. 14 00:00:47,000 --> 00:00:52,990 Menu icons are the ones that appear in option menus and context menus. 15 00:00:53,000 --> 00:00:56,990 Status bar icons obviously show up in the status bar, and so on and on forth. 16 00:00:57,000 --> 00:01:00,990 So you want to come in here and look at the design guidelines for all of these 17 00:01:01,000 --> 00:01:01,990 different types of icons. 18 00:01:02,000 --> 00:01:04,990 So we're going to focus on launcher icons. 19 00:01:05,000 --> 00:01:09,990 I did want to highlight this Icon Templates pack, and this is essentially a set 20 00:01:10,000 --> 00:01:15,990 of Photoshop files with some icons already created for you, which you can 21 00:01:16,000 --> 00:01:17,990 override to create your own designs. 22 00:01:18,000 --> 00:01:21,990 If we click on Launcher Icons, it will give us the details about how to 23 00:01:22,000 --> 00:01:23,990 create launcher icons. 24 00:01:24,000 --> 00:01:32,990 So now you will need a 512x512 icon to upload to the developer console. 25 00:01:33,000 --> 00:01:35,990 This is used in various locations in the Android Market. 26 00:01:36,000 --> 00:01:40,990 So in best practice, I like to start at that size, and then we can create 27 00:01:41,000 --> 00:01:45,990 smaller sizes for the other sizes that are required. And here it will give you 28 00:01:46,000 --> 00:01:49,990 some information about recommended styles and approaches to creating icons, 29 00:01:50,000 --> 00:01:55,990 but you can see we're going to have to create three sizes in addition to the 512-pixel one. 30 00:01:56,000 --> 00:02:00,990 For the high-density screens, we're going to want to create one that's 72x72; 31 00:02:01,000 --> 00:02:08,990 for the medium DPI, it's going to be 48x48; and then for low-DPI screens, 36x36. 32 00:02:09,000 --> 00:02:13,990 Now, you're probably wondering why couldn't I just put the density one in there, 33 00:02:14,000 --> 00:02:17,990 and then the Android system will automatically create a scaled version for 34 00:02:18,000 --> 00:02:18,990 those other screens? 35 00:02:19,000 --> 00:02:22,990 Now that is absolutely true, but the problem is, first of all, you're going 36 00:02:23,000 --> 00:02:27,990 to take a performance hit, because Android has to go through the business of scaling that. 37 00:02:28,000 --> 00:02:32,990 The other thing is you might necessarily not want just a simple scale-down 38 00:02:33,000 --> 00:02:33,990 for the smaller sizes. 39 00:02:34,000 --> 00:02:35,990 You might want to sharpen it. 40 00:02:36,000 --> 00:02:38,990 You may even want to change the contents of the icon, so you're definitely 41 00:02:39,000 --> 00:02:42,990 recommended to create each of these individual versions. 42 00:02:43,000 --> 00:02:47,990 Now if you look in the exercise files, in the assets folder, you'll see this 43 00:02:48,000 --> 00:02:52,990 icon_template.psd, which I pulled out of that icon templates pack, and just 44 00:02:53,000 --> 00:02:53,990 removed a couple of things. 45 00:02:54,000 --> 00:02:59,990 But this is essentially a 512x512 Photoshop document, and here is an example 46 00:03:00,000 --> 00:03:04,990 icon. So we have this square layer that contains this red square, and you can 47 00:03:05,000 --> 00:03:05,990 see some guides in here. 48 00:03:06,000 --> 00:03:10,990 So you don't want to create your icon all the way to the edge. 49 00:03:11,000 --> 00:03:14,990 You want to give it some breathing room, so you basically don't want to have it 50 00:03:15,000 --> 00:03:16,990 extend this outer guide. 51 00:03:17,000 --> 00:03:21,990 Now this other little guide is if you want to put a drop shadow or glow around 52 00:03:22,000 --> 00:03:26,990 it, which is also good, it will help it to pop out, depending on what the 53 00:03:27,000 --> 00:03:28,990 background is on the user's phone. 54 00:03:29,000 --> 00:03:33,990 And then we have another layer here called example_content, which just has a 55 00:03:34,000 --> 00:03:37,990 letter A in here, and it has a light theme and a dark theme. We're just going 56 00:03:38,000 --> 00:03:39,990 to use the light theme. 57 00:03:40,000 --> 00:03:44,990 So what were going to want to do is we're going to want to first save out a 58 00:03:45,000 --> 00:03:48,990 512x512 version of this. 59 00:03:49,000 --> 00:03:50,990 I am not going to it here, because it is not really important to the project. 60 00:03:51,000 --> 00:03:54,990 That is for when you are actually going to want to upload your application 61 00:03:55,000 --> 00:03:55,990 to the Android Market. 62 00:03:56,000 --> 00:04:00,990 What we are going to want to do is to create those various icons sizes, so 63 00:04:01,000 --> 00:04:04,990 what I am going to do is I am going to go to Image > Image Size, and we're first 64 00:04:05,000 --> 00:04:11,990 going to create the high-DPI icon, and this is going to be 72x72. And now we can 65 00:04:12,000 --> 00:04:13,990 look at that. Okay, that looks pretty good. 66 00:04:14,000 --> 00:04:17,990 We can actually turn off the guides so we can see it a little bit better. 67 00:04:18,000 --> 00:04:21,990 So that looks good to me, so I am going to go File > Save for the Web. Now this 68 00:04:22,000 --> 00:04:26,990 is important, because if you just save it as a PNG, normally, it will put some 69 00:04:27,000 --> 00:04:29,990 metadata in there that you don't really want to have in there. 70 00:04:30,000 --> 00:04:31,990 So you want to do Save for the Web. Okay. 71 00:04:32,000 --> 00:04:34,990 So from here, I am going to want to choose PNG, and so I will get a nice alpha 72 00:04:35,000 --> 00:04:39,990 channel. I am going to click Save, and now I am going to navigate to my 73 00:04:40,000 --> 00:04:41,990 directory for my project. 74 00:04:42,000 --> 00:04:50,990 So I am going to go to C:/Users/ Lee Brimelow/workspace/Icons/Resource 75 00:04:51,000 --> 00:04:56,990 folder/ HDPI drawable folder, and all I am going to is I am going to 76 00:04:57,000 --> 00:05:00,990 override that default icon. 77 00:05:01,000 --> 00:05:03,990 So I will click Save. Yes, I want to replace it. 78 00:05:04,000 --> 00:05:07,990 And now what I wanted to do is to basically create those other sizes. 79 00:05:08,000 --> 00:05:14,990 Well, let's, really quick, see if that had an effect, because remember my emulator is emulating a high-DPI device. 80 00:05:15,000 --> 00:05:17,990 And what I am going to do is I am going to refresh the project, right-click, and 81 00:05:18,000 --> 00:05:21,990 refresh, just to make sure that icon shows up properly. 82 00:05:22,000 --> 00:05:24,990 So I am going to run this, and we're not going to see it really when it 83 00:05:25,000 --> 00:05:28,990 launches up, because we're not seeing the icon. But once it gets installed, we 84 00:05:29,000 --> 00:05:33,990 will be able to tell. So we just have a blank project, but if I come out of here and go into the App 85 00:05:34,000 --> 00:05:40,990 drawer, you can see I have my custom icon now for my application. 86 00:05:41,000 --> 00:05:45,990 Remember, it's showing because I am emulating a high-DPI device, and this is 87 00:05:46,000 --> 00:05:50,990 where it is handy to actually create different emulators for different screen 88 00:05:51,000 --> 00:05:54,990 densities, and we can see how the icon will look on a medium-density screen and 89 00:05:55,000 --> 00:05:56,990 a low-density screen. 90 00:05:57,000 --> 00:06:00,990 So at this point, basically I want to go through and create the other sizes, so 91 00:06:01,000 --> 00:06:06,990 I am going to go to image size, and I am going to create one 48x48, and that still looks good. 92 00:06:07,000 --> 00:06:10,990 File > Save for the Web, PNG again, and now I want to save this into the 93 00:06:11,000 --> 00:06:12,990 medium DPI directory, 94 00:06:13,000 --> 00:06:17,990 so I am going to overwrite that. And then lastly, I am going to create the low- 95 00:06:18,000 --> 00:06:20,990 DPI one, which is 36x36. 96 00:06:21,000 --> 00:06:23,990 At this point, these are actually vectors, so there are actually scaling down 97 00:06:24,000 --> 00:06:27,990 really nicely, but let's say this looks a little blurry. 98 00:06:28,000 --> 00:06:31,990 Well, I could come in and I could tweak this so it looked good at the smaller size. 99 00:06:32,000 --> 00:06:37,990 I don't have to it here, but I am just going to save this out into the low-DPI folder. 100 00:06:38,000 --> 00:06:41,990 We will replace that, and now I have custom icons. Regardless of the type of 101 00:06:42,000 --> 00:06:44,990 screen that user has, it's going to show the correct one. 102 00:06:45,000 --> 00:06:47,990 If you are wondering where to set the icon for your application, 103 00:06:48,000 --> 00:06:50,990 well, it's actually in the manifest file. 104 00:06:51,000 --> 00:06:53,990 I'll just go to the code, and we can see in the application tag we have this 105 00:06:54,000 --> 00:06:57,990 icon property, which we can set to any drawable that we have. 106 00:06:58,000 --> 00:06:59,990 We just overrode those icons. 107 00:07:00,000 --> 00:07:04,990 It's easy to do here. But definitely very simple, but very important that you 108 00:07:05,000 --> 00:07:09,990 actually create these assets correctly, because again, you could just have 109 00:07:10,000 --> 00:07:13,990 this icon here and nothing in the other two folders, but then you're relying 110 00:07:14,000 --> 00:07:18,990 on the Android system to do the scaling for you, which doesn't always produce 111 00:07:19,000 --> 00:08:19,990 the best results.