So continuing on from the last video, where I showed you that video presentation from Google. You can
see that on the right of each of these colour charts, so I'll scroll down to display a few more,
there's a hex code for each colour.
Now it's that value
the computer ultimately needs, when you use a certain colour in your app. Now the hex codes are three hex
bytes, representing the amount of red, green and blue in each colour.
So up in the reds, if we start up in there, there's the first two digits which can be quite large compared
to the next two.
But as we move down to the blues, over here to the right, the last pair of digits are dominant and in the greens,
if we scroll down even further, the middle pair are larger because there's more green in those colors.
Now the numbers on the left by the way, are Google indicating possible uses of each colour.
So if I picked the plain blue, going back up to blue again,
so the plain blue, the 500 colour over here, would be used for the toolbar, with the status bar using the 700
colour
down here, for example.
Now the short video
gave a good idea of what they had in mind with these colours.
So again, 500 you'd use that code, 700 you'd use this hex code.
Now looking at these examples a little bit further down the page, in the color system section, if I come down to
there and have a look,
Color system section as you can see there, there's examples of different colour schemes. Now take some time to read through
at least the basics, because it gives you a good idea of how things like accent colours will help you
to create great looking apps.
So I think personally it's great that Google have done this, because they're giving us a set of criteria
to design our apps, to make sure they fit in with the general Android styling.
And it's a good unifying experience from a user's perspective.
So in other words, your app isn't going to look out of place compared to other apps.
Now you can imagine if you don't use these philosophies or these principles, and do things your own way,
your apps can look very funky and very out there, and not fit in with the overall theme that pretty well all
the other apps are actually following.
So that's what this website's for. The design colour guidelines are there to help you with those color choices
and so forth,
and there's actually so much information on this website.
Now we'll look at how to use these principles,
when we set the colours for our Flickr browser app, and you'll see that we don't normally set colours or individual
widgets.
Instead we just choose the colours for our theme, and let Android apply the colours. And it'll do that in
a consistent way,
so we don't have to worry about changing the colour of everything that we want to display on the screen.
Alright, so we've talked about colour,
but under Style over here to the left in the menu,
we can see what they suggest about icons. I'm going to click on that, and they actually
give
design guidelines about icons, which is great if you're designing your own icons.
Now typography is also interesting.
In fact it's all interesting. There's great information on this website. Now with Android Oreo,
Google have made it much easier to use different fonts in your apps. They've made a font installation a lot
easier, and you don't have to package loads of fonts with your apps.
They can actually be downloaded as needed.
Now by the way I don't want you to think you need to memorise all of this.
However it is a great place to start, to just sort of get your head around a little bit of what some of
the things are, what Material Design is in more detail, but also what Google is expecting you
to use from a material design point of view
for Android apps. Alright so I'm going to finish by going into Components, over here in the menu. Down here you
can see they even go into things like cards, and click on that. Now they talk about several layouts and show you
lots of examples of usages of various cards, as you can see down there, as I'm scrolling down.
You can't really go wrong, in the sense that Google have done a lot of the work, and given you the design
principles to use to make your apps look really good.
Now of course if you've got user design experience then you're free to do what you want, but as soon
as you move away from using Material Design, then you'll have a lot more work to do because you'll have
to set the colours on everything that you display on the screen.
So at this point you might be wondering is Material Design really worth it.
Well in our opinion, it's very much something that you should be using in your apps. So it's not just for
Android Lollipop and above either. One of the really cool things which we'll be talking about next is
app compatibility.
Before that though, I want to show you another site that's great for sorting out all this material design
colour stuff.
So I'm going to go to the site now.
Let's open a new tab.
You can see it's materialpalette dot com.
Now this is a really useful site.
It lets you choose your main color and the accent color that you think will go well with it,
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,
and there's a ton of resources on there that you can use for inspiration.
Now not all of this is actually free, but if you're not very good at graphics then it can be worth paying
for resources.
Don't be put off though when you get to a page showing prices either, because there's a lot of free sources
still available here.
Now the site layout changes from time to time.
So you may find the navigation is different when you come to visit, but at the moment the market menu
at the top right gives you an Android option, so click on that. You can see we've got Android down here.
So I click on Android. We get a large selection of resources.
Now the menu at the left over here can be used to filter the content, so click the Show all link down the
bottom here.
And when we do that the Java category's a good one to look at. Click on that now.
Now remember the Java code can be mixed with Kotlin,
if you're watching this video in my Kotlin Android course. Now you can find things like a user interface
for a chat app, that's available to download for free for personal use.
Now you have to register with the site before you can download it though.
OK so that site opened in a new tab,
so I'm going to go back to the palette tab up here.
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.
So the first colour you click becomes the primary color and the second becomes the accent.
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
probably agree that that's pretty hideous.
Well I guess to be fair it's not that bad.
So Google have chosen these colours
so that it's just about impossible to end up with anything really
really really bad,
but I'm still not too sure about this choice.
So as I click on different colour sets,
the preview shows what they look like in Material Design,
so how they'll appear,
if we just let Android sort out where to use each colour for the palette we chose. So if we try light blue for
another one, and yellow.
Well I guess that that's not brilliant either.
Maybe I should have had a bit more contrast, so perhaps orange might be better than yellow.
It's a light blue and choose orange.
So again if I go to light blue and yellow again,
and if I come down and click on orange,
of course it changes that to be the primary colour,
not the accent, so it takes a couple of clicks to get used to how selecting works.
So I've now got orange and yellow rather than light blue and orange, but once you've clicked on things a
few times, you get used to how to choose your primary colour.
So to choose orange as the accent I'm going to click on light blue again.
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
blue and orange as the accent.
So basically the bottom line is the tick, the tick that you know what you've selected, and you can always click
on this colour a second time as I did to untick it.
But what's really useful and interesting at the bottom, at the box at the bottom right showing your palette,
down here if I scroll down a little bit, it gives you, it actually gives you the codes for the colours we've chosen.
And they're also named quite well, consistent with the terms used in material design.
So once you've got a palette that you're happy with,
you can download it in a number of different formats.
Now the useful one, the most useful one for us is XML.
So I'm going to download a couple of palettes.
Now the orange and yellow didn't look too bad, so I'm going to choose orange first,
then yellow, so you can see up here in our resources. Then come down here and click on download, and I can choose
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
going to select, let's go with teal, and we'll also go with deep orange,
and you can see what that looks like.
Let's actually save that one as well, so I'll come down here now that I've clicked on download. This menu's
already open, I'm going to click on XML, and you can see we've got
colours, teal, deep orange. Save that.
So we've downloaded both of those files.
Now we're going to use these two files when we come to style
our app in a later video.
Now you'll probably want to download two colour schemes that you're happy with, and we'll use them when we come
to style our app as I've mentioned.
So this is a pretty neat site and you'll see how these files will save us a bit of time later.
Now I'm going to stop this video here now, and then in the next one we're going to talk about compatibility,
and how we can use the principles of Material Design for versions of Android before Lollipop.
So I'll see you in the next video.