1 00:00:04,200 --> 00:00:05,500 Good day, everyone. Welcome back. 2 00:00:06,300 --> 00:00:09,400 Our app's going to allow the user to filter the records 3 00:00:09,400 --> 00:00:13,400 to display just a single day or the timings for a whole week. 4 00:00:14,200 --> 00:00:17,300 We'll also give them a better way to delete their old timing data. 5 00:00:17,960 --> 00:00:21,960 To do that, we'll provide the report screen with its own menu, 6 00:00:21,960 --> 00:00:23,460 containing three options. 7 00:00:24,230 --> 00:00:28,730 We've already seen how to create menus so I'm not going to spend time on the details. 8 00:00:29,130 --> 00:00:32,630 What i will do though is to take this opportunity 9 00:00:32,630 --> 00:00:36,430 to show you how to use vector graphics for the icons in your menus. 10 00:00:38,330 --> 00:00:41,330 We've seen image asset studio earlier 11 00:00:41,330 --> 00:00:43,630 when we used it to create the app icons. 12 00:00:44,510 --> 00:00:48,210 When we created the app icons android studio generated 13 00:00:48,210 --> 00:00:51,210 png images at different resolutions. 14 00:00:52,210 --> 00:00:55,810 We can see them in the res/bitmap folder. 15 00:01:00,060 --> 00:01:04,660 The png files are in ic_launcher. 16 00:01:05,019 --> 00:01:08,720 If you're using bitmap images, png, jpg 17 00:01:08,720 --> 00:01:09,620 and so forth, 18 00:01:10,170 --> 00:01:13,170 you should provide the image at different resolutions. 19 00:01:13,570 --> 00:01:17,170 That makes them display well on different density screens. 20 00:01:17,370 --> 00:01:21,070 The reason for needing to provide images at different resolutions 21 00:01:21,070 --> 00:01:25,070 is that png and jpg images don't scale very well. 22 00:01:25,470 --> 00:01:29,670 We can demonstrate that by viewing the mdpi image. 23 00:01:30,660 --> 00:01:33,360 You can view the images in android studio 24 00:01:33,360 --> 00:01:35,160 by double clicking to open them. 25 00:01:37,560 --> 00:01:42,060 The mdpi image has a resolution of 48 x 48 pixels. 26 00:01:42,860 --> 00:01:46,460 The file size is 2.62 kilobytes, 27 00:01:47,010 --> 00:01:49,810 which we can see at the top right of the image when it's opened. 28 00:01:50,510 --> 00:01:53,410 The image will look fine on a low res device. 29 00:01:54,070 --> 00:01:58,370 As we can see if I use the minus button a couple of times to shrink it down. 30 00:02:02,360 --> 00:02:05,360 That's fine. But on a high res device, 31 00:02:05,610 --> 00:02:07,210 it won't look very good. 32 00:02:07,210 --> 00:02:09,910 I'll use the plus button a few times to enlarge it. 33 00:02:13,910 --> 00:02:17,210 By the way, if it disappears when you try that, 34 00:02:17,210 --> 00:02:19,570 use the 1:1 button 35 00:02:21,110 --> 00:02:22,810 to size it to normal first. 36 00:02:25,810 --> 00:02:28,110 Sometimes the image preview plays up a bit. 37 00:02:28,810 --> 00:02:31,800 When it's larger, the image gets very grainy. 38 00:02:32,160 --> 00:02:35,860 The circular clock face, for example, is quite steppy 39 00:02:35,860 --> 00:02:37,660 rather than being a smooth circle. 40 00:02:38,060 --> 00:02:41,660 Including different resolution images is a good solution 41 00:02:41,660 --> 00:02:44,160 to coping with vastly different device screens, 42 00:02:44,660 --> 00:02:45,860 but it comes at a cost. 43 00:02:46,520 --> 00:02:49,120 We're deploying the same image five times 44 00:02:49,620 --> 00:02:52,180 that obviously takes up more room on the device 45 00:02:52,580 --> 00:02:54,780 and makes our apk file larger. 46 00:02:55,660 --> 00:02:58,360 Google do some clever things with compression and so on. 47 00:02:59,020 --> 00:03:02,820 There are a couple of very good videos from google IO 2016 48 00:03:02,820 --> 00:03:04,020 that are worth watching. 49 00:03:04,570 --> 00:03:07,570 These presentations were given by Google's engineers 50 00:03:07,570 --> 00:03:09,870 the people who work on android code. 51 00:03:10,530 --> 00:03:14,030 They definitely know how it all works because they wrote it. 52 00:03:14,580 --> 00:03:18,380 So those IO videos are a great way to learn more about android. 53 00:03:18,930 --> 00:03:23,230 One video that talks about image formats in image compression 54 00:03:23,230 --> 00:03:29,430 is at www.youtube.com/watch?v= 55 00:03:30,030 --> 00:03:33,030 why don't I just show you. It's probably easier. 56 00:03:40,730 --> 00:03:45,180 That's well worth watching, especially if you use a lot of images in your app. 57 00:03:45,680 --> 00:03:48,180 The lecture after that is also interesting. 58 00:03:55,180 --> 00:03:59,280 Wojtek Kalicinski talks about api file sizes 59 00:03:59,280 --> 00:04:02,080 and how android studio tries to compress them. 60 00:04:02,880 --> 00:04:04,880 That covers images as well, 61 00:04:04,880 --> 00:04:09,430 and there's also a good introduction to what's going on inside your apk file. 62 00:04:09,830 --> 00:04:12,030 Okay. Why am I telling you all this? 63 00:04:12,630 --> 00:04:15,230 We're going to need some icons for our menu items, 64 00:04:15,230 --> 00:04:19,380 and android studio has a neat feature to produce vector drawables. 65 00:04:19,880 --> 00:04:22,880 Unlike the bitmap images we've been using so far, 66 00:04:23,180 --> 00:04:27,180 vector drawables work by describing how an image should be drawn 67 00:04:27,180 --> 00:04:29,780 rather than storing all the pictures needed to draw it. 68 00:04:30,380 --> 00:04:32,880 That makes them great for things like icons. 69 00:04:33,380 --> 00:04:36,980 You wouldn't use vector drawables for photographs or complex images 70 00:04:36,980 --> 00:04:41,080 but they can save a lot of space for simpler images like icons. 71 00:04:41,630 --> 00:04:45,230 Because vector drawables describe how the image should be drawn, 72 00:04:45,730 --> 00:04:48,530 it can scale up or down to different resolutions. 73 00:04:49,190 --> 00:04:52,690 Importantly, it scales without losing quality. 74 00:04:53,390 --> 00:04:55,990 We've seen image asset studio earlier 75 00:04:55,990 --> 00:04:58,490 when we used it to generate the app icon. 76 00:04:59,290 --> 00:05:02,290 Vector asset studio is launched in a similar way. 77 00:05:03,170 --> 00:05:07,420 Right click on the res folder, and choose New, Vector Asset. 78 00:05:14,120 --> 00:05:17,520 Android studio loads up with the default android icon. 79 00:05:18,220 --> 00:05:20,020 This isn't at all obvious, 80 00:05:20,020 --> 00:05:23,320 but you can choose any of the material design icons 81 00:05:23,620 --> 00:05:26,220 by clicking on the small android icon, 82 00:05:26,220 --> 00:05:28,220 the one just below the name field. 83 00:05:31,320 --> 00:05:34,420 There's a host of pre-defined icons available 84 00:05:34,420 --> 00:05:36,920 categorized to make them easier to find. 85 00:05:37,580 --> 00:05:40,940 If your icon is going to represent a standard android feature, 86 00:05:41,240 --> 00:05:45,240 take a look in here before taking time to create your own icon. 87 00:05:45,790 --> 00:05:49,090 We're going to let the user toggle between showing one day 88 00:05:49,090 --> 00:05:51,090 or a full week on the report. 89 00:05:51,340 --> 00:05:54,140 Two icons that will be good for these options 90 00:05:54,140 --> 00:05:55,740 are in the image category. 91 00:05:58,740 --> 00:06:01,740 Click the filter one icon, 92 00:06:03,340 --> 00:06:04,340 then click okay. 93 00:06:06,740 --> 00:06:08,040 You can change the name 94 00:06:08,700 --> 00:06:10,600 but I like to leave them unchanged. 95 00:06:11,040 --> 00:06:14,340 The names are a bit horrible, so certainly rename them if you want. 96 00:06:15,000 --> 00:06:17,900 It's useful to have a reminder of where they came from 97 00:06:18,260 --> 00:06:20,560 and what the google original's called, 98 00:06:21,110 --> 00:06:23,310 which is why I tend to leave the name as it is. 99 00:06:23,810 --> 00:06:24,810 Click next, 100 00:06:26,410 --> 00:06:29,310 and the drawable folder should already be selected. 101 00:06:29,670 --> 00:06:32,870 If it isn't, select it, then click finish. 102 00:06:34,770 --> 00:06:38,870 The vector drawable for the icon's being created in our drawable folder. 103 00:06:41,570 --> 00:06:43,770 When you double click to open this file, 104 00:06:43,770 --> 00:06:47,760 we get the xml that's used to define what the image will look like. 105 00:06:49,360 --> 00:06:51,960 Fortunately, there's a preview available. 106 00:06:52,460 --> 00:06:56,860 Click the preview button on the far right of the window to see the image. 107 00:07:00,060 --> 00:07:04,260 If you could zoom this vector image up, the lines would remain sharp. 108 00:07:04,660 --> 00:07:07,660 There's none of the stepping that we got with the bitmap image. 109 00:07:08,260 --> 00:07:11,060 Google have removed the zoom feature from this preview, 110 00:07:11,460 --> 00:07:13,960 but you can see the icons displaying at a large size 111 00:07:14,320 --> 00:07:16,120 and it has very smooth lines. 112 00:07:16,780 --> 00:07:20,080 Okay. Let's create the other drawables we'll need, 113 00:07:20,580 --> 00:07:22,380 then we'll look at how to use them in our app. 114 00:07:22,820 --> 00:07:24,220 Close all the images, 115 00:07:28,620 --> 00:07:31,620 then right click on the res folder and choose 116 00:07:31,620 --> 00:07:33,220 New, Vector Asset again. 117 00:07:38,220 --> 00:07:39,520 Click the icon, 118 00:07:41,420 --> 00:07:44,920 select filter 7 from the image category, 119 00:07:44,920 --> 00:07:46,020 and click okay. 120 00:07:47,210 --> 00:07:50,200 The icon that was the stock android icon 121 00:07:50,200 --> 00:07:52,800 will probably be filter 1 now. 122 00:07:53,160 --> 00:07:57,390 Asset studio remembers the last image that you selected. That's fine. 123 00:07:57,890 --> 00:08:00,250 Click whatever icon is showing and select the new one. 124 00:08:01,020 --> 00:08:04,520 The category selection seems to be a bit unreliable, 125 00:08:04,960 --> 00:08:06,960 but the icons are arranged alphabetically 126 00:08:07,460 --> 00:08:09,960 if you don't get the right category appearing straight away. 127 00:08:10,510 --> 00:08:12,610 Leave the name the same, and click next. 128 00:08:13,070 --> 00:08:17,060 It should be placed in the drawable folder automatically, so click finish. 129 00:08:18,560 --> 00:08:21,560 Repeat the process to choose the date range icon 130 00:08:21,560 --> 00:08:24,220 from the action category, then click OK. 131 00:08:39,520 --> 00:08:43,919 Before I move on, we've got clip art selected in the asset type. 132 00:08:44,580 --> 00:08:49,180 You can also convert an existing svg file or a psd file, 133 00:08:49,480 --> 00:08:51,880 which is the format produced by adobe photoshop. 134 00:08:52,540 --> 00:08:56,650 That lets you create your own vector graphics and use them in your android apps. 135 00:08:57,550 --> 00:09:00,750 I won't do this but you can select local file 136 00:09:00,750 --> 00:09:02,950 and then browse to your existing images. 137 00:09:03,940 --> 00:09:07,040 I'll say a bit more about svg files in a moment. 138 00:09:07,590 --> 00:09:10,950 For now, make sure you've clicked next and finish. 139 00:09:12,750 --> 00:09:15,850 The last one is delete, also from the action category. 140 00:09:34,850 --> 00:09:36,650 We've got our four icons now. 141 00:09:37,420 --> 00:09:40,520 And if we're targeting api21 and above, 142 00:09:40,520 --> 00:09:41,880 that's all we need to do. 143 00:09:42,380 --> 00:09:45,680 Support for vector drawables was added in api21, 144 00:09:46,120 --> 00:09:48,620 but we're targeting api17. 145 00:09:49,390 --> 00:09:53,790 Google have included vector drawable support though in the support library. 146 00:09:54,390 --> 00:09:56,990 It does need a small change to our build files 147 00:09:57,290 --> 00:09:59,290 and that's explained in the documentation. 148 00:09:59,840 --> 00:10:02,500 There's a guide to vector drawables at 149 00:10:02,500 --> 00:10:07,200 developer.android.com/studio/write 150 00:10:07,600 --> 00:10:13,590 /vector-asset-studio.html. 151 00:10:14,190 --> 00:10:16,190 It's worth having a read through that page. 152 00:10:16,740 --> 00:10:18,420 I'll point out some important bits now. 153 00:10:20,920 --> 00:10:24,580 Api20 and below don't support vector drawables directly. 154 00:10:25,130 --> 00:10:27,490 If we leave our build set as it is, 155 00:10:27,490 --> 00:10:30,790 android studio will use the xml files to create 156 00:10:30,790 --> 00:10:34,350 png files at each of the resolutions from 157 00:10:34,350 --> 00:10:37,950 mdpi to xxxhdpi. 158 00:10:38,940 --> 00:10:42,600 That can save us time having to create all those variants manually, 159 00:10:43,100 --> 00:10:45,760 but it will mean that there will be five different copies 160 00:10:45,760 --> 00:10:48,260 of the png file in our apk. 161 00:10:48,920 --> 00:10:53,020 So that's not bad, we save some time but it's not perfect. 162 00:10:53,680 --> 00:10:57,680 That process is described in the about vector asset studio section 163 00:10:57,980 --> 00:10:59,480 at the start of this guide. 164 00:11:00,080 --> 00:11:01,680 It gives us two options. 165 00:11:02,180 --> 00:11:03,980 The first is to do nothing 166 00:11:03,980 --> 00:11:07,340 and have five different png files generated for us 167 00:11:07,340 --> 00:11:08,840 just as I've mentioned. 168 00:11:09,540 --> 00:11:12,900 The other option involves changing the build.gradle file. 169 00:11:13,400 --> 00:11:15,700 We can tell it to use a support library 170 00:11:16,060 --> 00:11:19,060 and all android versions back to api7 171 00:11:19,060 --> 00:11:23,560 can then use the vector drawables without having copies of png files. 172 00:11:24,260 --> 00:11:28,360 The link in the document support library backward compatibility 173 00:11:28,360 --> 00:11:30,060 shows the change we need make. 174 00:11:30,760 --> 00:11:33,260 Copy that line from the guide. 175 00:11:38,360 --> 00:11:41,350 Then open build.gradle, 176 00:11:41,850 --> 00:11:42,850 the app module 177 00:11:48,550 --> 00:11:53,050 and paste the line in at the end of the DefaultConfig section. 178 00:12:00,550 --> 00:12:04,760 Whenever you change the build files, you'll get a prompt to sync the project. 179 00:12:05,060 --> 00:12:07,560 Click the Sync Now link at the top right 180 00:12:10,220 --> 00:12:12,220 and gradle will rebuild the project. 181 00:12:12,770 --> 00:12:13,770 We're done here, 182 00:12:14,170 --> 00:12:16,370 so we can close build.gradle. 183 00:12:19,730 --> 00:12:23,230 There's one other thing I want to say about these vector drawables. 184 00:12:23,780 --> 00:12:27,080 We saw that the vector asset studio can import 185 00:12:27,080 --> 00:12:31,580 svg files and convert them to android's vector drawable format. 186 00:12:32,180 --> 00:12:35,540 Vector drawable are google's own format for vector graphics, 187 00:12:36,040 --> 00:12:40,340 the svg specification, which stands for scalable vector graphics, 188 00:12:40,740 --> 00:12:44,740 is quite complex, and Google have created their own format 189 00:12:44,740 --> 00:12:46,100 that's a lot simpler. 190 00:12:46,700 --> 00:12:50,700 That means you can't include svg images directly in your app. 191 00:12:51,100 --> 00:12:54,300 You have to use android studio to convert them into Google's 192 00:12:54,300 --> 00:12:55,800 vector drawable format. 193 00:12:56,400 --> 00:12:59,700 If your svg image contains things that can't be converted, 194 00:13:00,000 --> 00:13:01,600 asset studio will let you know. 195 00:13:02,400 --> 00:13:04,600 Okay. In the next video, 196 00:13:04,600 --> 00:13:08,400 we'll create the menus that will use these vector drawables in their icons. 197 00:13:08,400 --> 00:13:09,500 I'll see you there.