OK.
So let's have a look at Material Design, which Google introduced originally with Android Lollipop.
Now I want to give you a bit of an overview on what material design is, because Google has been pushing
it now for some time. Certainly since they talked about Android Lollipop initially.
So just why is this such an important part of Android since Lollipop?
Well the concept of a material design is that it's interactive, and designed so that we have a set of
principles or guidelines from Google. And it relates to the look of the applications that we create, and
also how our users, the people playing or downloading and using how apps, interact with those apps.
Material Design is really the stuff for want of a better term, that the buttons, fields and other things
are really constructed with.
So why would we bother using the Material Design principles.
Well it's very cool, and makes your app look and become more engaging.
And obviously, if you're using material design, your apps are going to be more blended in, and fit in with
the look and feel of Android apps in general.
So let's actually check out a couple of really cool apps,
and you can do this whether your device is running Android lollipop or later, or even an earlier version like
KitKat or Jelly Bean.
Now one of the good things that Google did with Material Design, was to make it backwards compatible.
So what that means is that we can have our apps running on older devices and still look much like the current
version of Android. So we can retain the colours the styles and so forth,
because Google gave us the ability to do that.
So even if you have an older version of Android,
check these out anyway, just to see what they look like in an older version, because you'll then know when you're
creating apps using Material Design, that they'll still look pretty cool on older Android versions as well.
So let's actually go ahead and check out these two apps.
Now the apps in question are the Google Play App, and that's the app that you download apps from if you're using Google Play,
and also the Gmail app.
So let's check these out now. I'm going to go through and show you Gmail first.
So this is an example of a pretty cool app, but unfortunately, it's not Open Source. So in other words,
you can't get to the source code to see exactly what they've done,
but they have done it really well though.
So here I am in my emulator, so I'm going to start up Gmail. You can see that it's a nice looking up app, and that's
what we really are trying to see here.
You've got drawers for starters that opens, and click over here,
the drawer slides across as you can see there, and although you can't see the email address or name associated
with this Gmail account,
you can see various information,
and it's quite a cool looking interface. You can scroll through the various In Box folders and options as well,
so go up and down there, and I can come back here and take that off.
I can scroll down my list of emails,
scroll back up again, and back to settings and go back into here, and we can come down.
There's a dropdown list there.
We can manage accounts and select additional accounts if we want to,
and come down here to settings. We can find the various settings relating to this account, and going back to the main interface,
again we can click into a particular email. And we've got various toolbars where we can do various things
like delete, archive, and even there's another submenu, we can move it,
and all sorts of other things that you'd see in a normal email application.
So basically it's just a nice looking app and that's what we're really trying to say here.
So this is like an Android compliant app, and actually one of the first that Google produced using Material
Design, so I really like what they've actually done with it.
So let's now close that down. I want to have a look at another one, which is the Google Play Store.
So click over here for Play Store. I'm just going to click on Accept to that, because it's the first time that I've been in there
on my emulator.
So this is the Play Store app and I like the design of this one as well.
So we've got that drawer approach again.
Click and open it up.
We can open it up and get access to the various options from that, from there if we actually want, so I can go
into My Apps for example over here, and there's also other things like there's a Wishlist capability down here.
We can Wishlist particular apps. We've got options to get into our account settings, and the various apps, games, movies
and TV, music, books and so on.
I'm not going to bother with a lot of that now,
but just the look of this app I think is pretty neat, and I think it looks great
personally. And if we wanted to we can go into particular apps, go home, click on games for argument's sake, and
click on a particular game and go into there, and we can install apps from there. I can scroll down, scroll
up. We can go back again, and we can swipe over here to move to different categories, which is pretty cool.
And we'll just go back because you don't want to go into there right now, swiping again to the left, to go back where
we were before, and we can also scroll down, not doing too good a job here with the mouse and swiping.
But we'll just go back to where we were, go home.
We've got our apps here,
and click on more, and again we can swipe down, scroll down, swipe to the left or to the right. We can't now because
we've got this fully opened. And also if we just go back, I'll go back up to the top again, we've also got this search
capability here. I could search for something like Clash of Clans, select that, and the tool bar also, if we go
back again.
You can see that the toolbar at the top's raised.
It's meant to be looked at as if it's over the top of the screen.
So the design principles of Material Design have been applied to this app, so it's very easy to use because
things like navigation elements are distinct from the content.
You don't have to stop and think about what you can tap and what you can slide. It all sort of just
makes sense and feels natural.
So it's very much something that people are used to.
So they'll expect the same sort of interface when using your app,
that's the bottom line,
and consequently if you're using Material Design in your app, it's going to fit in quite nicely.
So there you go.
That's just a quick overview, and definitely worthwhile checking if you're running Android Lollipop or above
or on your physical Android device.
But even if you aren't, you can see that I'm running it on an emulator.
Still check these apps out, because on the previous versions of Android Kit Kat or whatever you're running,
those apps have still been updated.
Now obviously you won't have all the Material Design in those older versions, but you still
will see that the look is very much the same. OK so let's move on.
The next thing that's a good point of reference is Google's website.
Now you can google material design specsheet, which I'm going to do,
or even material design, and you'll get to the following page.
You'll get this page here, material dot
io forward slash guidelines.
So basically it's Google's sort of a manifesto, for want of a better term, on what Material Design's
all about.
So let's just have a look at that in a little bit more detail now.
Now Google have created this material.io domain to host their Material Design content,
so this is actually a Google site. But just going back to the Google search engine again, I can do a
search also for material design.
You can see we get the sight where our material.io guidelines, and that's where we were, so
again this is an official Google site just in case you're wondering. So I'm just going to go back now into the
guidelines.
Now you certainly don't need to know everything that's on this site, but it can be a really good way
to introduce yourself to the concepts of Material Design at a high level, and you can always come back
and go into more detail at a later time.
Now this is an overview of what Material Design is and what it's all about.
Now the website doesn't talk about programming.
It's more the concept of the layout, or the concepts of the layouts. So it goes into the sizing of various parts
of the screen in density independent pixels,
suggestions for margins and that sort of thing.
So it's more of a graphical user interface type of thing, rather than a programming thing.
Now it's also worth noting that it covers design for Chromebook as well as Android,
and in fact the Material Design principles have been applied to this website as well.
So as an example of that, watch what happens when I scroll down the page. Notice how we've got the toolbar at the top there.
So basically it collapses to make more room for the content,
and that's something you can actually do as well in your Android apps.
So let's just go through quickly and click a few things. So I can actually select from the menu to the left
here.
A good place to start is Layout
so I'm going to click on that,
and once you get on there click on, or once that opens I should say, click on Principles.
So this actually shows Google's interpretation.
So they refer to screens effectively as paper, and the elements that you're drawing on top of, are actually
on top of a piece of paper.
So the analogy is that the screen is paper, and they're giving you overviews as we scroll down, of toolbars,
what the menu options should be,
Seams as you can see there, the various steps, Floating Action Buttons and so on.
Now although nothing's explicitly stated in our apps, how many app developers have written detailed
instructions, and who bothers reading instruction manuals anyway.
Users quickly get used to the visual cues without thinking about it.
Now these Seams and Steps though, if you go back to those again, Seams and Steps as you can see there, they give a good
visual indication of the behavior you can expect when you interact with them.
I'm going to come over here and click on Structure on the left hand menu. So as we go down the page here
now, they go into more and more detail and give you some good dos and don'ts. So it'll really help you solidify
your understanding of what material design is,
if you take the time to go through this website. Now it does get into all sorts of details,
even for example that toolbars, if you scroll down to that section, toolbars down here as you can see, it talks about
toolbars having a standard height of 56 density independent pixels on a mobile. Now there are
good reasons for a lot of this. An average human finger, when it taps a screen,
will tap an area about 48 dp,
and that's why we set that as the minimum size for our buttons in the calculator app.
So it's good to have a one stop shop to find out about these things.
So as we get through the course and we create apps, I'll probably be referring back to here as appropriate,
and I'll be reminding you of some of the guidelines and so forth.
So really this is a good website to give you some of the principles, but there's lots more details on
this site. So we can go to Style for example, up here,
and have a look at the colour page. Now with the introduction of Android Lollipop,
Google brightened everything up and made the screens more vibrant, and that's carried on through to Marshmallow,
Nougat and now into Android
Oreo. Screens are very vibrant and bright and the colours are chosen to work well together.
So if I scroll down this page a little bit, Google have created this colour palette.
I see I can click it from here to get there quickly,
and these are colours that have been chosen to work well together.
Now if you're into creating your own graphics, using perhaps Adobe Illustrator or Photoshop,
then you can actually download a zip file containing colour swatches for use in those programs.
But back in the top of the video, there's this video, and it's fairly short and it's a pallette
perfect video showing how Google intended the colours to be used.
Now it runs for less than two minutes so it's worth a look, and it does a good job of explaining the meaning
of those numbers on the left hand side of each color.
So I'm going to play this video because it's a great introduction,
so let's go ahead and play that now.
There are no wrong colours. What matters most is how you use them, but with such a broad spectrum to choose from,
how do you know which colours will work for you?
The Material Design palette provides a simple smart approach to building with colour. Starting with the
primary 500s, it scales from light to dark, offering a variety of carefully chosen values. These colour ranges are then
applied to different elements in the
UI. The 500s are perfect for describing the dominant theme in your product, and are great for toolbox. From there, scale up to the 700s
for status box, or down to 300 for secondary information.
Accent colours are brighter and more saturating. They encourage user interaction, giving your
UI subtle but considered colour pops. They are perfect for
highlighting primary
action buttons, or fabs, standard buttons, switches, sliders and more.
This system for thinking about colour is powerful, immersive and completely adaptable to any application.
Whether your brand is poppy and bright or seriously subdued, Material Design makes colour work for you.
Start building. Get to know the fundamentals of colour in google.com/design.
Alright so I'm going to finish the video here at this point. In the next video,
we'll talk a little more about Material Design and then we're going to make a start on using some of
the concepts in our Flickr app.
So I'll see you in the next video.