1 00:00:03,700 --> 00:00:08,360 G'day everyone and welcome back. The next dialogue that we'll add to the app 2 00:00:08,360 --> 00:00:13,760 is an About dialogue, to give some basic information about the app; version 3 00:00:13,760 --> 00:00:19,340 number and so forth. We're going to display the app's icon in the dialogue, to 4 00:00:19,340 --> 00:00:23,690 provide a consistent look throughout the app, but the standard Android launcher 5 00:00:23,690 --> 00:00:29,240 icon gets a bit boring if everybody uses it. In this video, we'll look at how to 6 00:00:29,240 --> 00:00:35,060 add our very own icon. It used to be very simple - you just copied the icon files 7 00:00:35,080 --> 00:00:40,900 into the drawable directories. Google now suggest using the mipmap directories instead. 8 00:00:40,910 --> 00:00:46,220 Things are further complicated by the new adaptive icons that we 9 00:00:46,220 --> 00:00:51,660 introduced in Android Oreo API 26. 10 00:00:51,660 --> 00:00:54,620 Fortunately, Android studio makes it all 11 00:00:54,620 --> 00:01:01,220 quite easy. Android studio includes Image Assets Studio, to create our image assets 12 00:01:01,220 --> 00:01:06,520 for our apps. We're going to need an image to use, and there are a number of 13 00:01:06,520 --> 00:01:10,940 sites to provide images in the public domain. That means you're free to use 14 00:01:10,940 --> 00:01:20,460 them in your projects. One such site is https://publicdomainvectors.org. 15 00:01:24,920 --> 00:01:29,480 They have a good selection of images in various categories. For this 16 00:01:29,480 --> 00:01:41,440 app we downloaded a public domain icon from https://openclipart.org. 17 00:01:41,440 --> 00:01:46,280 Unfortunately, as you can see, the owners of that site decided to do some 18 00:01:46,280 --> 00:01:51,200 maintenance, just at the time when I came to record the video. That does happen. 19 00:01:51,200 --> 00:01:56,100 Sites on the internet go offline for maintenance from time to time. The one we 20 00:01:56,100 --> 00:02:02,020 chose to base our launcher icon on is analog clock. Hopefully, the site will 21 00:02:02,020 --> 00:02:07,040 be back up when you're watching this video. We changed the icon slightly and you can 22 00:02:07,040 --> 00:02:09,340 download it from the resources for this video. 23 00:02:09,460 --> 00:02:15,600 Now, before you download any resources from the internet, to use in your own programs, 24 00:02:15,600 --> 00:02:19,099 it's important to check the License Agreement. I'll switch back to 25 00:02:19,100 --> 00:02:24,290 the publicdomainvectors.org site, and right at the bottom of the page is a 26 00:02:24,290 --> 00:02:33,620 link to a license for this image. 27 00:02:33,620 --> 00:02:36,700 The links will often be called license, but 28 00:02:36,709 --> 00:02:42,760 this one's called Public domain. And that's about as permissive a license as 29 00:02:42,769 --> 00:02:47,269 you'll find. Basically you can do just about anything you can think of doing 30 00:02:47,269 --> 00:02:52,310 with these images. One thing you certainly should not do is pass them off 31 00:02:52,310 --> 00:02:57,500 as your own work. You are free to modify them to form the basis of another image, 32 00:02:57,500 --> 00:03:02,870 though. All we've done is color it in. So I'm not going to claim any credit for 33 00:03:02,870 --> 00:03:09,080 our icon. You can download the base image file from the resources section of this video. 34 00:03:09,080 --> 00:03:15,470 Download the file, and make a note of where you've downloaded it to to. 35 00:03:15,470 --> 00:03:23,540 To launch Image Assets Studio, right click on the res folder in the project pane, and 36 00:03:23,540 --> 00:03:31,720 choose New, Image Asset. 37 00:03:31,720 --> 00:03:35,720 Over on the right hand side are previews of all the icons 38 00:03:35,720 --> 00:03:41,060 that Image Asset Studio can generate for us. The top row shows an 39 00:03:41,060 --> 00:03:47,100 adaptive icon in a circle, squircle, rounded square and square shapes. 40 00:03:47,109 --> 00:03:51,440 On Android Oreo and above, the launcher will choose the shape to match the 41 00:03:51,440 --> 00:03:59,400 normal icons on the device. Samsung launchers, for example, often use a squircle. 42 00:03:59,400 --> 00:04:01,570 You can read more about adaptive icons 43 00:04:01,570 --> 00:04:14,020 at developer.android.com/guides/practices/ui_guidelines/icon_design_adaptive 44 00:04:14,020 --> 00:04:17,680 You'll find some other links in there, to articles explaining why google have 45 00:04:17,680 --> 00:04:20,579 switched to adaptive icons. 46 00:04:20,579 --> 00:04:26,020 Image Asset Studio also generates a 512 by 512 icon 47 00:04:26,020 --> 00:04:31,480 for you to use in the Google Play Store. Alright, we're changing the default app 48 00:04:31,480 --> 00:04:37,690 icon, so we don't have to change any of the names. We want to use our own icon, 49 00:04:37,700 --> 00:04:43,360 though, so make sure that the asset type is set to Image. 50 00:04:43,360 --> 00:04:45,180 To select a new image, 51 00:04:45,180 --> 00:04:52,540 click the folder next to path for the Source Asset. 52 00:04:52,540 --> 00:04:59,900 Browse to where you saved our clock icon that you downloaded. 53 00:04:59,940 --> 00:05:02,380 Be careful there, because Assets Studio will 54 00:05:02,380 --> 00:05:07,740 display the Android studio templates directory to begin with. 55 00:05:07,740 --> 00:05:11,140 Once you've loaded the icon, 56 00:05:11,180 --> 00:05:14,640 you'll have to wait a while for Android Studio to convert and 57 00:05:14,640 --> 00:05:20,500 render all the different icons. That can take a while, even on a fast computer, so 58 00:05:20,500 --> 00:05:25,240 be patient. We'll come back to this foreground layer. I want to change the 59 00:05:25,240 --> 00:05:29,620 background layer first, because the current background makes it hard to see 60 00:05:29,620 --> 00:05:36,520 the circular guideline that we'll want. Click the background layer tab 61 00:05:36,520 --> 00:05:41,860 and we're going to set the background to white. 62 00:05:41,860 --> 00:05:44,380 You may have a background image that you 63 00:05:44,380 --> 00:05:48,160 want to use, as Google are doing here, but often you'll change the background 64 00:05:48,160 --> 00:05:54,340 source asset to color and use a solid color instead. After changing the asset 65 00:05:54,340 --> 00:06:01,470 type to color, click the color box and choose white by typing F-F-F-F-F-F, 66 00:06:01,470 --> 00:06:08,500 that six F's, in the box on the far right. You could enter 255 for each of the RGB 67 00:06:08,500 --> 00:06:14,920 colors, or 0 for H and S, if you prefer working with HSB. You can 68 00:06:14,920 --> 00:06:19,390 switch between them using the drop-down. I'm not a graphic artist and I prefer 69 00:06:19,390 --> 00:06:24,360 working with red, green, blue, rather than hue, saturation and brightness, but the 70 00:06:24,360 --> 00:06:30,920 choice is yours. Choose the color and our clock's displayed on the white background. 71 00:06:31,500 --> 00:06:37,940 Back in the foreground layer, it's easier to see the SafeZone guideline now. 72 00:06:37,940 --> 00:06:50,440 Use the resize slider to shrink the image until it fits inside the circular marker. 73 00:06:50,440 --> 00:06:56,320 A size of about 60% should fit within the guide, but obviously that depends on 74 00:06:56,320 --> 00:07:00,860 the icon file you've used. Alright, click Next when you've finished setting 75 00:07:00,880 --> 00:07:08,900 the size up, and Asset Studio now shows us all the files that it's going to change. 76 00:07:08,900 --> 00:07:12,520 We've got a warning because our existing icon files are going to be 77 00:07:12,520 --> 00:07:17,530 overwritten, but we didn't want that stock Android icon anyway. You'll get a 78 00:07:17,530 --> 00:07:24,360 chance to check out the various files that it'll produce. 79 00:07:24,360 --> 00:07:29,440 At the top is the ic_launcher_web, 80 00:07:29,440 --> 00:07:33,160 which is a 512 by 512 image for use on your 81 00:07:33,160 --> 00:07:40,210 website and the Play Store. The next one's probably not obvious. In res/values 82 00:07:40,210 --> 00:07:45,380 is an XML file that defines the color for our background, 83 00:07:45,380 --> 00:07:51,820 ic_launcher_background.xml. If you click it 84 00:07:51,820 --> 00:07:56,060 you'll see that it's just a standard color declaration. 85 00:07:56,060 --> 00:08:04,900 In each of the mipmap-x directories, such as mipmap-xxxhdpi, 86 00:08:05,260 --> 00:08:07,420 we've got a bit of duplication. 87 00:08:07,420 --> 00:08:13,840 ic_launcher.png is used for devices before Oreo. 88 00:08:13,880 --> 00:08:19,320 Asset Studio is going to create those files because we asked for legacy icons. 89 00:08:19,320 --> 00:08:24,540 I'll launch Asset Studio again in a moment and you'll see where that was requested. 90 00:08:24,540 --> 00:08:30,580 ic_ launcher_foreground is used on Oreo and later, 91 00:08:30,580 --> 00:08:38,600 and you'll see it referenced in the ic_launcher.xml file 92 00:08:38,600 --> 00:08:43,299 Click on ic_launcher.xml. You can make 93 00:08:43,299 --> 00:08:47,480 the window wider, if you need to to see the full XML over on the right. 94 00:08:47,480 --> 00:08:52,500 Notice that the background is the color XML file and the foreground will be the 95 00:08:52,500 --> 00:08:57,240 ic_launcher_foreground image for the devices screen 96 00:08:57,240 --> 00:09:03,640 resolution. Some launchers will request a round icon instead, which results in 97 00:09:03,640 --> 00:09:09,460 three copies of the icon in each mipmap directory. Don't worry that this is going 98 00:09:09,460 --> 00:09:14,620 to make your APK file larger. When users download your app from the Play Store, 99 00:09:14,620 --> 00:09:19,800 Google only send down assets that apply for the device that they are using. 100 00:09:19,800 --> 00:09:27,580 Okay, click finish and Asset Studio generates the files for us. 101 00:09:27,580 --> 00:09:33,620 You can see the new files in res/mipmap. 102 00:09:33,620 --> 00:09:42,380 Double-click an icon, to view the image in Android Studio. 103 00:09:42,380 --> 00:09:47,820 The mdpi icon looks a bit blurry, but I'm viewing it on a high resolution 104 00:09:47,830 --> 00:09:56,050 Apple monitor. Use the minus button to shrink it down a bit, to get a more 105 00:09:56,050 --> 00:10:00,280 realistic idea of what it will look like on a low resolution phone, 106 00:10:00,280 --> 00:10:09,120 and it's not that bad. The anydpi - v26 icon appears as XML 107 00:10:10,920 --> 00:10:15,320 There's a preview tab over on the far right, that will show what Android will 108 00:10:15,380 --> 00:10:19,440 display on Oreo and higher. It looks pretty good, 109 00:10:19,440 --> 00:10:25,660 even on my high-res monitor. Asset Studio creates images at different sizes, so 110 00:10:25,660 --> 00:10:30,160 they'll look good on the screens that they'll appear on. Asset Studio is very 111 00:10:30,160 --> 00:10:34,540 visual and you can normally see the effect that a change will have, as you 112 00:10:34,540 --> 00:10:38,850 experiment with it. I'll finish this video by going back in. 113 00:10:38,850 --> 00:10:47,420 Right-click the res folder and choose New, Image Asset again. 114 00:10:47,420 --> 00:10:53,040 Notice it's remembered your settings from last time. I didn't mention that first drop-down 115 00:10:53,050 --> 00:11:00,150 when we came here earlier. You can choose which icon type you want to generate. 116 00:11:01,220 --> 00:11:12,620 Google explain all this at developer.android.com/studio/write/image-asset-studio 117 00:11:12,620 --> 00:11:15,310 What's not obvious is that you 118 00:11:15,310 --> 00:11:22,980 can come back in here and choose Launcher icons legacy only, to generate 119 00:11:22,980 --> 00:11:29,880 just the legacy icon. That's the ic_launcher.png files. 120 00:11:29,880 --> 00:11:34,840 Any adaptive icons that you've already generated won't be overwritten. 121 00:11:34,860 --> 00:11:42,580 Why might you want to do that? I'll select Launcher icons adaptive and legacy for the icon type, 122 00:11:42,580 --> 00:11:48,760 and then switch to the background layer. We specified a color for the 123 00:11:48,760 --> 00:11:53,380 background but you can use a transparent image instead. That allows you to have 124 00:11:53,380 --> 00:11:59,290 icons with transparent backgrounds, but only on Oreo and above. If you want to 125 00:11:59,290 --> 00:12:03,320 generate icons with transparent backgrounds for earlier versions, you'll 126 00:12:03,340 --> 00:12:08,880 need to regenerate the legacy icons. I'll do that before finishing this video. 127 00:12:08,880 --> 00:12:15,620 Change the icon type to Launcher icons legacy only, 128 00:12:15,620 --> 00:12:20,160 and then change the asset type to image. 129 00:12:20,160 --> 00:12:23,260 Use the browser at the right of path to 130 00:12:23,260 --> 00:12:35,320 browse to the clock icon file we downloaded earlier. 131 00:12:35,320 --> 00:12:37,440 Be patient again here. 132 00:12:37,440 --> 00:12:43,080 It can take Asset Studio a while to render the images, even on a fast system. 133 00:12:43,080 --> 00:12:52,020 When they load, notice they've got a square background. Change the shape to none, 134 00:12:52,020 --> 00:13:00,720 and wait again. Now we've got icons with a transparent background. Click next, 135 00:13:00,720 --> 00:13:05,980 and you'll see that only the legacy icons, the ic_launcher.png files, 136 00:13:05,980 --> 00:13:12,040 will be generated and replaced. I don't want to save them 137 00:13:12,040 --> 00:13:16,660 so I'm going to click cancel. I suggest you do the same. 138 00:13:16,660 --> 00:13:19,160 You can come back in here later 139 00:13:19,160 --> 00:13:22,480 and generate the legacy icons again, if you want to see the difference 140 00:13:22,480 --> 00:13:28,510 on a pre-Oreo emulator. The app will look the same but the launcher icon on 141 00:13:28,510 --> 00:13:33,760 the device will be different. I'll stop this video here. In the next video, we'll 142 00:13:33,760 --> 00:13:39,900 create the layout for our About dialogue. See you in that one.