1 00:00:05,480 --> 00:00:10,590 So continuing on from the last video, where I showed you that video presentation from Google. You can 2 00:00:10,590 --> 00:00:15,750 see that on the right of each of these colour charts, so I'll scroll down to display a few more, 3 00:00:16,020 --> 00:00:18,130 there's a hex code for each colour. 4 00:00:18,500 --> 00:00:19,920 Now it's that value 5 00:00:19,920 --> 00:00:25,620 the computer ultimately needs, when you use a certain colour in your app. Now the hex codes are three hex 6 00:00:25,620 --> 00:00:30,020 bytes, representing the amount of red, green and blue in each colour. 7 00:00:30,300 --> 00:00:35,190 So up in the reds, if we start up in there, there's the first two digits which can be quite large compared 8 00:00:35,190 --> 00:00:36,420 to the next two. 9 00:00:36,840 --> 00:00:44,880 But as we move down to the blues, over here to the right, the last pair of digits are dominant and in the greens, 10 00:00:44,970 --> 00:00:50,590 if we scroll down even further, the middle pair are larger because there's more green in those colors. 11 00:00:50,590 --> 00:00:56,170 Now the numbers on the left by the way, are Google indicating possible uses of each colour. 12 00:00:56,380 --> 00:01:00,050 So if I picked the plain blue, going back up to blue again, 13 00:01:01,630 --> 00:01:10,020 so the plain blue, the 500 colour over here, would be used for the toolbar, with the status bar using the 700 14 00:01:10,020 --> 00:01:10,490 colour 15 00:01:10,530 --> 00:01:12,360 down here, for example. 16 00:01:12,360 --> 00:01:13,570 Now the short video 17 00:01:13,580 --> 00:01:16,920 gave a good idea of what they had in mind with these colours. 18 00:01:16,930 --> 00:01:23,230 So again, 500 you'd use that code, 700 you'd use this hex code. 19 00:01:23,310 --> 00:01:28,750 Now looking at these examples a little bit further down the page, in the color system section, if I come down to 20 00:01:28,780 --> 00:01:29,560 there and have a look, 21 00:01:31,300 --> 00:01:37,740 Color system section as you can see there, there's examples of different colour schemes. Now take some time to read through 22 00:01:37,740 --> 00:01:43,610 at least the basics, because it gives you a good idea of how things like accent colours will help you 23 00:01:43,640 --> 00:01:45,150 to create great looking apps. 24 00:01:46,650 --> 00:01:52,140 So I think personally it's great that Google have done this, because they're giving us a set of criteria 25 00:01:52,440 --> 00:01:56,730 to design our apps, to make sure they fit in with the general Android styling. 26 00:01:56,820 --> 00:02:00,500 And it's a good unifying experience from a user's perspective. 27 00:02:00,720 --> 00:02:05,000 So in other words, your app isn't going to look out of place compared to other apps. 28 00:02:05,060 --> 00:02:10,240 Now you can imagine if you don't use these philosophies or these principles, and do things your own way, 29 00:02:10,440 --> 00:02:16,030 your apps can look very funky and very out there, and not fit in with the overall theme that pretty well all 30 00:02:16,050 --> 00:02:18,090 the other apps are actually following. 31 00:02:18,090 --> 00:02:24,480 So that's what this website's for. The design colour guidelines are there to help you with those color choices 32 00:02:24,480 --> 00:02:25,430 and so forth, 33 00:02:25,770 --> 00:02:29,110 and there's actually so much information on this website. 34 00:02:29,130 --> 00:02:31,240 Now we'll look at how to use these principles, 35 00:02:31,380 --> 00:02:36,420 when we set the colours for our Flickr browser app, and you'll see that we don't normally set colours or individual 36 00:02:36,420 --> 00:02:37,420 widgets. 37 00:02:37,500 --> 00:02:43,140 Instead we just choose the colours for our theme, and let Android apply the colours. And it'll do that in 38 00:02:43,140 --> 00:02:44,540 a consistent way, 39 00:02:44,700 --> 00:02:49,460 so we don't have to worry about changing the colour of everything that we want to display on the screen. 40 00:02:49,810 --> 00:02:51,140 Alright, so we've talked about colour, 41 00:02:51,390 --> 00:02:54,420 but under Style over here to the left in the menu, 42 00:02:54,420 --> 00:02:59,640 we can see what they suggest about icons. I'm going to click on that, and they actually 43 00:02:59,670 --> 00:03:00,360 give 44 00:03:00,530 --> 00:03:05,410 design guidelines about icons, which is great if you're designing your own icons. 45 00:03:05,720 --> 00:03:07,950 Now typography is also interesting. 46 00:03:07,970 --> 00:03:12,810 In fact it's all interesting. There's great information on this website. Now with Android Oreo, 47 00:03:12,950 --> 00:03:18,620 Google have made it much easier to use different fonts in your apps. They've made a font installation a lot 48 00:03:18,620 --> 00:03:21,800 easier, and you don't have to package loads of fonts with your apps. 49 00:03:21,840 --> 00:03:23,820 They can actually be downloaded as needed. 50 00:03:23,980 --> 00:03:27,160 Now by the way I don't want you to think you need to memorise all of this. 51 00:03:27,290 --> 00:03:32,660 However it is a great place to start, to just sort of get your head around a little bit of what some of 52 00:03:32,660 --> 00:03:39,350 the things are, what Material Design is in more detail, but also what Google is expecting you 53 00:03:39,350 --> 00:03:41,900 to use from a material design point of view 54 00:03:41,900 --> 00:03:49,500 for Android apps. Alright so I'm going to finish by going into Components, over here in the menu. Down here you 55 00:03:49,500 --> 00:03:55,360 can see they even go into things like cards, and click on that. Now they talk about several layouts and show you 56 00:03:55,410 --> 00:04:03,080 lots of examples of usages of various cards, as you can see down there, as I'm scrolling down. 57 00:04:03,330 --> 00:04:09,090 You can't really go wrong, in the sense that Google have done a lot of the work, and given you the design 58 00:04:09,090 --> 00:04:12,830 principles to use to make your apps look really good. 59 00:04:12,960 --> 00:04:17,519 Now of course if you've got user design experience then you're free to do what you want, but as soon 60 00:04:17,519 --> 00:04:22,830 as you move away from using Material Design, then you'll have a lot more work to do because you'll have 61 00:04:22,830 --> 00:04:26,430 to set the colours on everything that you display on the screen. 62 00:04:26,430 --> 00:04:30,020 So at this point you might be wondering is Material Design really worth it. 63 00:04:30,420 --> 00:04:36,120 Well in our opinion, it's very much something that you should be using in your apps. So it's not just for 64 00:04:36,120 --> 00:04:41,160 Android Lollipop and above either. One of the really cool things which we'll be talking about next is 65 00:04:41,160 --> 00:04:42,870 app compatibility. 66 00:04:42,930 --> 00:04:46,860 Before that though, I want to show you another site that's great for sorting out all this material design 67 00:04:46,880 --> 00:04:48,490 colour stuff. 68 00:04:48,540 --> 00:04:50,380 So I'm going to go to the site now. 69 00:04:50,670 --> 00:04:52,720 Let's open a new tab. 70 00:04:52,780 --> 00:04:54,660 You can see it's materialpalette dot com. 71 00:04:55,990 --> 00:04:58,120 Now this is a really useful site. 72 00:04:58,120 --> 00:05:03,070 It lets you choose your main color and the accent color that you think will go well with it, 73 00:05:03,180 --> 00:05:10,690 then it gives you a preview of how they'll look together. So the link at the top right takes you into more material design, 74 00:05:10,800 --> 00:05:16,040 and there's a ton of resources on there that you can use for inspiration. 75 00:05:16,090 --> 00:05:20,530 Now not all of this is actually free, but if you're not very good at graphics then it can be worth paying 76 00:05:20,530 --> 00:05:21,670 for resources. 77 00:05:21,760 --> 00:05:26,140 Don't be put off though when you get to a page showing prices either, because there's a lot of free sources 78 00:05:26,140 --> 00:05:27,010 still available here. 79 00:05:27,180 --> 00:05:30,220 Now the site layout changes from time to time. 80 00:05:30,340 --> 00:05:35,530 So you may find the navigation is different when you come to visit, but at the moment the market menu 81 00:05:35,530 --> 00:05:39,850 at the top right gives you an Android option, so click on that. You can see we've got Android down here. 82 00:05:41,040 --> 00:05:46,880 So I click on Android. We get a large selection of resources. 83 00:05:47,090 --> 00:05:52,420 Now the menu at the left over here can be used to filter the content, so click the Show all link down the 84 00:05:52,420 --> 00:05:53,110 bottom here. 85 00:05:54,810 --> 00:06:01,320 And when we do that the Java category's a good one to look at. Click on that now. 86 00:06:01,360 --> 00:06:04,000 Now remember the Java code can be mixed with Kotlin, 87 00:06:04,120 --> 00:06:09,040 if you're watching this video in my Kotlin Android course. Now you can find things like a user interface 88 00:06:09,040 --> 00:06:13,000 for a chat app, that's available to download for free for personal use. 89 00:06:13,060 --> 00:06:15,990 Now you have to register with the site before you can download it though. 90 00:06:16,410 --> 00:06:18,530 OK so that site opened in a new tab, 91 00:06:18,730 --> 00:06:21,560 so I'm going to go back to the palette tab up here. 92 00:06:23,210 --> 00:06:31,360 I'm going to start by clicking on amber as the main colour, down here, and maybe let's go with lime for the second, for the accent. 93 00:06:33,250 --> 00:06:37,900 So the first colour you click becomes the primary color and the second becomes the accent. 94 00:06:37,900 --> 00:06:43,690 So as soon as I click lime for the accent, you saw that a palette preview appeared on the right, and I think you'd 95 00:06:43,690 --> 00:06:45,400 probably agree that that's pretty hideous. 96 00:06:45,550 --> 00:06:48,220 Well I guess to be fair it's not that bad. 97 00:06:48,220 --> 00:06:50,130 So Google have chosen these colours 98 00:06:50,170 --> 00:06:53,180 so that it's just about impossible to end up with anything really 99 00:06:53,720 --> 00:06:54,950 really really bad, 100 00:06:55,120 --> 00:06:57,390 but I'm still not too sure about this choice. 101 00:06:57,460 --> 00:06:59,400 So as I click on different colour sets, 102 00:07:01,890 --> 00:07:04,450 the preview shows what they look like in Material Design, 103 00:07:04,500 --> 00:07:05,710 so how they'll appear, 104 00:07:05,850 --> 00:07:11,160 if we just let Android sort out where to use each colour for the palette we chose. So if we try light blue for 105 00:07:11,340 --> 00:07:13,980 another one, and yellow. 106 00:07:14,760 --> 00:07:16,700 Well I guess that that's not brilliant either. 107 00:07:17,070 --> 00:07:20,830 Maybe I should have had a bit more contrast, so perhaps orange might be better than yellow. 108 00:07:21,000 --> 00:07:24,570 It's a light blue and choose orange. 109 00:07:26,110 --> 00:07:28,730 So again if I go to light blue and yellow again, 110 00:07:30,170 --> 00:07:31,880 and if I come down and click on orange, 111 00:07:31,880 --> 00:07:33,830 of course it changes that to be the primary colour, 112 00:07:33,850 --> 00:07:38,990 not the accent, so it takes a couple of clicks to get used to how selecting works. 113 00:07:38,990 --> 00:07:42,950 So I've now got orange and yellow rather than light blue and orange, but once you've clicked on things a 114 00:07:42,950 --> 00:07:46,420 few times, you get used to how to choose your primary colour. 115 00:07:46,680 --> 00:07:49,730 So to choose orange as the accent I'm going to click on light blue again. 116 00:07:52,090 --> 00:07:57,250 So click light blue twice as you can see there, clicking on orange, and now we're back to how we were before now, with 117 00:07:57,250 --> 00:08:00,670 blue and orange as the accent. 118 00:08:01,180 --> 00:08:05,080 So basically the bottom line is the tick, the tick that you know what you've selected, and you can always click 119 00:08:05,080 --> 00:08:08,160 on this colour a second time as I did to untick it. 120 00:08:08,450 --> 00:08:13,960 But what's really useful and interesting at the bottom, at the box at the bottom right showing your palette, 121 00:08:15,070 --> 00:08:20,950 down here if I scroll down a little bit, it gives you, it actually gives you the codes for the colours we've chosen. 122 00:08:21,200 --> 00:08:25,420 And they're also named quite well, consistent with the terms used in material design. 123 00:08:25,790 --> 00:08:28,220 So once you've got a palette that you're happy with, 124 00:08:28,220 --> 00:08:30,970 you can download it in a number of different formats. 125 00:08:30,980 --> 00:08:33,909 Now the useful one, the most useful one for us is XML. 126 00:08:34,100 --> 00:08:36,590 So I'm going to download a couple of palettes. 127 00:08:36,679 --> 00:08:40,370 Now the orange and yellow didn't look too bad, so I'm going to choose orange first, 128 00:08:42,520 --> 00:08:49,870 then yellow, so you can see up here in our resources. Then come down here and click on download, and I can choose 129 00:08:49,880 --> 00:08:58,160 XML, and I can actually save that. So I'm just going to save that to my desktop. Let's also go and do another one. I'm 130 00:08:58,160 --> 00:09:04,000 going to select, let's go with teal, and we'll also go with deep orange, 131 00:09:07,500 --> 00:09:08,910 and you can see what that looks like. 132 00:09:09,120 --> 00:09:12,840 Let's actually save that one as well, so I'll come down here now that I've clicked on download. This menu's 133 00:09:12,840 --> 00:09:14,390 already open, I'm going to click on XML, and you can see we've got 134 00:09:17,090 --> 00:09:20,890 colours, teal, deep orange. Save that. 135 00:09:20,920 --> 00:09:22,720 So we've downloaded both of those files. 136 00:09:22,760 --> 00:09:24,900 Now we're going to use these two files when we come to style 137 00:09:24,990 --> 00:09:26,240 our app in a later video. 138 00:09:26,500 --> 00:09:31,100 Now you'll probably want to download two colour schemes that you're happy with, and we'll use them when we come 139 00:09:31,100 --> 00:09:32,830 to style our app as I've mentioned. 140 00:09:32,840 --> 00:09:37,900 So this is a pretty neat site and you'll see how these files will save us a bit of time later. 141 00:09:37,980 --> 00:09:42,240 Now I'm going to stop this video here now, and then in the next one we're going to talk about compatibility, 142 00:09:42,410 --> 00:09:47,480 and how we can use the principles of Material Design for versions of Android before Lollipop. 143 00:09:47,680 --> 00:09:49,010 So I'll see you in the next video.