1
00:00:05,510 --> 00:00:05,770
OK.

2
00:00:05,900 --> 00:00:12,260
So let's have a look at Material Design, which Google introduced originally with Android Lollipop.

3
00:00:12,260 --> 00:00:17,600
Now I want to give you a bit of an overview on what material design is, because Google has been pushing

4
00:00:17,600 --> 00:00:22,850
it now for some time. Certainly since they talked about Android Lollipop initially.

5
00:00:22,850 --> 00:00:27,140
So just why is this such an important part of Android since Lollipop?

6
00:00:27,470 --> 00:00:33,530
Well the concept of a material design is that it's interactive, and designed so that we have a set of

7
00:00:33,530 --> 00:00:40,040
principles or guidelines from Google. And it relates to the look of the applications that we create, and

8
00:00:40,040 --> 00:00:46,060
also how our users, the people playing or downloading and using how apps, interact with those apps.

9
00:00:46,370 --> 00:00:51,470
Material Design is really the stuff for want of a better term, that the buttons, fields and other things

10
00:00:51,800 --> 00:00:53,950
are really constructed with.

11
00:00:54,530 --> 00:00:57,790
So why would we bother using the Material Design principles.

12
00:00:58,130 --> 00:01:02,070
Well it's very cool, and makes your app look and become more engaging.

13
00:01:02,210 --> 00:01:07,880
And obviously, if you're using material design, your apps are going to be more blended in, and fit in with

14
00:01:07,880 --> 00:01:10,340
the look and feel of Android apps in general.

15
00:01:10,670 --> 00:01:13,880
So let's actually check out a couple of really cool apps,

16
00:01:13,960 --> 00:01:18,950
and you can do this whether your device is running Android lollipop or later, or even an earlier version like

17
00:01:18,950 --> 00:01:21,190
KitKat or Jelly Bean.

18
00:01:21,270 --> 00:01:26,610
Now one of the good things that Google did with Material Design, was to make it backwards compatible.

19
00:01:26,780 --> 00:01:32,870
So what that means is that we can have our apps running on older devices and still look much like the current

20
00:01:32,870 --> 00:01:37,370
version of Android. So we can retain the colours the styles and so forth,

21
00:01:37,490 --> 00:01:40,370
because Google gave us the ability to do that.

22
00:01:40,400 --> 00:01:42,580
So even if you have an older version of Android,

23
00:01:42,710 --> 00:01:48,770
check these out anyway, just to see what they look like in an older version, because you'll then know when you're

24
00:01:48,770 --> 00:01:54,390
creating apps using Material Design, that they'll still look pretty cool on older Android versions as well.

25
00:01:54,410 --> 00:01:57,170
So let's actually go ahead and check out these two apps.

26
00:01:57,200 --> 00:02:03,100
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,

27
00:02:03,320 --> 00:02:04,900
and also the Gmail app.

28
00:02:05,030 --> 00:02:09,759
So let's check these out now. I'm going to go through and show you Gmail first.

29
00:02:09,770 --> 00:02:14,600
So this is an example of a pretty cool app, but unfortunately, it's not Open Source. So in other words,

30
00:02:14,600 --> 00:02:18,100
you can't get to the source code to see exactly what they've done,

31
00:02:18,290 --> 00:02:20,150
but they have done it really well though.

32
00:02:20,740 --> 00:02:28,430
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

33
00:02:28,430 --> 00:02:30,300
what we really are trying to see here.

34
00:02:30,540 --> 00:02:33,430
You've got drawers for starters that opens, and click over here,

35
00:02:33,650 --> 00:02:39,020
the drawer slides across as you can see there, and although you can't see the email address or name associated

36
00:02:39,020 --> 00:02:40,350
with this Gmail account,

37
00:02:40,400 --> 00:02:41,900
you can see various information,

38
00:02:41,940 --> 00:02:47,490
and it's quite a cool looking interface. You can scroll through the various In Box folders and options as well,

39
00:02:47,480 --> 00:02:51,620
so go up and down there, and I can come back here and take that off.

40
00:02:51,830 --> 00:02:54,590
I can scroll down my list of emails,

41
00:02:54,980 --> 00:03:00,070
scroll back up again, and back to settings and go back into here, and we can come down.

42
00:03:00,420 --> 00:03:01,720
There's a dropdown list there.

43
00:03:02,000 --> 00:03:05,320
We can manage accounts and select additional accounts if we want to,

44
00:03:07,890 --> 00:03:16,410
and come down here to settings. We can find the various settings relating to this account, and going back to the main interface,

45
00:03:16,410 --> 00:03:22,660
again we can click into a particular email. And we've got various toolbars where we can do various things

46
00:03:22,660 --> 00:03:27,540
like delete, archive, and even there's another submenu, we can move it,

47
00:03:27,730 --> 00:03:31,540
and all sorts of other things that you'd see in a normal email application.

48
00:03:31,600 --> 00:03:35,760
So basically it's just a nice looking app and that's what we're really trying to say here.

49
00:03:35,920 --> 00:03:41,990
So this is like an Android compliant app, and actually one of the first that Google produced using Material

50
00:03:42,000 --> 00:03:44,550
Design, so I really like what they've actually done with it.

51
00:03:44,710 --> 00:03:50,110
So let's now close that down. I want to have a look at another one, which is the Google Play Store.

52
00:03:50,130 --> 00:03:57,350
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

53
00:03:57,510 --> 00:03:58,610
on my emulator.

54
00:03:59,120 --> 00:04:02,280
So this is the Play Store app and I like the design of this one as well.

55
00:04:02,300 --> 00:04:04,290
So we've got that drawer approach again.

56
00:04:04,720 --> 00:04:05,450
Click and open it up.

57
00:04:05,460 --> 00:04:10,410
We can open it up and get access to the various options from that, from there if we actually want, so I can go

58
00:04:10,450 --> 00:04:18,440
into My Apps for example over here, and there's also other things like there's a Wishlist capability down here.

59
00:04:18,459 --> 00:04:27,240
We can Wishlist particular apps. We've got options to get into our account settings, and the various apps, games, movies

60
00:04:27,240 --> 00:04:29,820
and TV, music, books and so on.

61
00:04:29,960 --> 00:04:31,190
I'm not going to bother with a lot of that now,

62
00:04:31,280 --> 00:04:35,190
but just the look of this app I think is pretty neat, and I think it looks great

63
00:04:35,220 --> 00:04:43,020
personally. And if we wanted to we can go into particular apps, go home, click on games for argument's sake, and

64
00:04:43,280 --> 00:04:48,730
click on a particular game and go into there, and we can install apps from there. I can scroll down, scroll

65
00:04:48,730 --> 00:04:56,430
up. We can go back again, and we can swipe over here to move to different categories, which is pretty cool.

66
00:04:56,490 --> 00:05:00,850
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

67
00:05:00,850 --> 00:05:07,080
we were before, and we can also scroll down, not doing too good a job here with the mouse and swiping.

68
00:05:07,410 --> 00:05:09,390
But we'll just go back to where we were, go home.

69
00:05:09,980 --> 00:05:11,010
We've got our apps here,

70
00:05:11,260 --> 00:05:19,030
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

71
00:05:19,030 --> 00:05:27,150
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

72
00:05:27,150 --> 00:05:36,680
capability here. I could search for something like Clash of Clans, select that, and the tool bar also, if we go

73
00:05:36,720 --> 00:05:37,470
back again.

74
00:05:41,710 --> 00:05:43,870
You can see that the toolbar at the top's raised.

75
00:05:44,110 --> 00:05:47,780
It's meant to be looked at as if it's over the top of the screen.

76
00:05:48,100 --> 00:05:54,100
So the design principles of Material Design have been applied to this app, so it's very easy to use because

77
00:05:54,100 --> 00:05:58,230
things like navigation elements are distinct from the content.

78
00:05:58,540 --> 00:06:02,530
You don't have to stop and think about what you can tap and what you can slide. It all sort of just

79
00:06:02,530 --> 00:06:04,670
makes sense and feels natural.

80
00:06:04,690 --> 00:06:07,230
So it's very much something that people are used to.

81
00:06:07,270 --> 00:06:10,480
So they'll expect the same sort of interface when using your app,

82
00:06:10,480 --> 00:06:11,470
that's the bottom line,

83
00:06:11,500 --> 00:06:15,840
and consequently if you're using Material Design in your app, it's going to fit in quite nicely.

84
00:06:16,120 --> 00:06:16,600
So there you go.

85
00:06:16,600 --> 00:06:21,820
That's just a quick overview, and definitely worthwhile checking if you're running Android Lollipop or above

86
00:06:21,820 --> 00:06:23,460
or on your physical Android device.

87
00:06:23,680 --> 00:06:26,510
But even if you aren't, you can see that I'm running it on an emulator.

88
00:06:26,560 --> 00:06:31,450
Still check these apps out, because on the previous versions of Android Kit Kat or whatever you're running,

89
00:06:31,750 --> 00:06:33,540
those apps have still been updated.

90
00:06:33,810 --> 00:06:38,620
Now obviously you won't have all the Material Design in those older versions, but you still

91
00:06:38,620 --> 00:06:43,660
will see that the look is very much the same. OK so let's move on.

92
00:06:43,860 --> 00:06:47,120
The next thing that's a good point of reference is Google's website.

93
00:06:47,190 --> 00:06:50,360
Now you can google material design specsheet, which I'm going to do,

94
00:06:55,440 --> 00:06:58,620
or even material design, and you'll get to the following page.

95
00:06:58,660 --> 00:07:00,040
You'll get this page here, material dot

96
00:07:00,150 --> 00:07:02,370
io forward slash guidelines.

97
00:07:05,940 --> 00:07:10,660
So basically it's Google's sort of a manifesto, for want of a better term, on what Material Design's

98
00:07:10,660 --> 00:07:11,450
all about.

99
00:07:11,650 --> 00:07:15,400
So let's just have a look at that in a little bit more detail now.

100
00:07:15,510 --> 00:07:21,910
Now Google have created this material.io domain to host their Material Design content,

101
00:07:21,910 --> 00:07:28,840
so this is actually a Google site. But just going back to the Google search engine again, I can do a

102
00:07:28,840 --> 00:07:33,170
search also for material design.

103
00:07:33,460 --> 00:07:38,110
You can see we get the sight where our material.io guidelines, and that's where we were, so

104
00:07:38,230 --> 00:07:43,300
again this is an official Google site just in case you're wondering. So I'm just going to go back now into the

105
00:07:44,240 --> 00:07:45,910
guidelines.

106
00:07:46,250 --> 00:07:51,470
Now you certainly don't need to know everything that's on this site, but it can be a really good way

107
00:07:51,800 --> 00:07:56,930
to introduce yourself to the concepts of Material Design at a high level, and you can always come back

108
00:07:56,930 --> 00:07:59,420
and go into more detail at a later time.

109
00:07:59,420 --> 00:08:04,400
Now this is an overview of what Material Design is and what it's all about.

110
00:08:04,720 --> 00:08:06,910
Now the website doesn't talk about programming.

111
00:08:06,980 --> 00:08:12,680
It's more the concept of the layout, or the concepts of the layouts. So it goes into the sizing of various parts

112
00:08:12,680 --> 00:08:15,510
of the screen in density independent pixels,

113
00:08:15,560 --> 00:08:18,090
suggestions for margins and that sort of thing.

114
00:08:18,200 --> 00:08:23,250
So it's more of a graphical user interface type of thing, rather than a programming thing.

115
00:08:23,470 --> 00:08:28,220
Now it's also worth noting that it covers design for Chromebook as well as Android,

116
00:08:28,430 --> 00:08:33,350
and in fact the Material Design principles have been applied to this website as well.

117
00:08:33,679 --> 00:08:39,480
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.

118
00:08:39,480 --> 00:08:42,940
So basically it collapses to make more room for the content,

119
00:08:43,159 --> 00:08:46,970
and that's something you can actually do as well in your Android apps.

120
00:08:47,300 --> 00:08:51,800
So let's just go through quickly and click a few things. So I can actually select from the menu to the left

121
00:08:51,800 --> 00:08:52,500
here.

122
00:08:53,110 --> 00:08:54,950
A good place to start is Layout

123
00:08:54,950 --> 00:08:56,670
so I'm going to click on that,

124
00:08:57,020 --> 00:09:02,400
and once you get on there click on, or once that opens I should say, click on Principles.

125
00:09:02,420 --> 00:09:06,260
So this actually shows Google's interpretation.

126
00:09:06,440 --> 00:09:12,740
So they refer to screens effectively as paper, and the elements that you're drawing on top of, are actually

127
00:09:12,740 --> 00:09:14,430
on top of a piece of paper.

128
00:09:14,540 --> 00:09:21,710
So the analogy is that the screen is paper, and they're giving you overviews as we scroll down, of toolbars,

129
00:09:21,930 --> 00:09:23,860
what the menu options should be,

130
00:09:24,140 --> 00:09:29,130
Seams as you can see there, the various steps, Floating Action Buttons and so on.

131
00:09:29,280 --> 00:09:34,460
Now although nothing's explicitly stated in our apps, how many app developers have written detailed

132
00:09:34,460 --> 00:09:38,320
instructions, and who bothers reading instruction manuals anyway.

133
00:09:38,460 --> 00:09:41,740
Users quickly get used to the visual cues without thinking about it.

134
00:09:41,900 --> 00:09:47,810
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

135
00:09:47,810 --> 00:09:52,380
visual indication of the behavior you can expect when you interact with them.

136
00:09:52,620 --> 00:09:58,810
I'm going to come over here and click on Structure on the left hand menu. So as we go down the page here

137
00:09:58,820 --> 00:10:06,570
now, they go into more and more detail and give you some good dos and don'ts. So it'll really help you solidify

138
00:10:06,570 --> 00:10:09,740
your understanding of what material design is,

139
00:10:09,840 --> 00:10:14,620
if you take the time to go through this website. Now it does get into all sorts of details,

140
00:10:14,720 --> 00:10:21,760
even for example that toolbars, if you scroll down to that section, toolbars down here as you can see, it talks about

141
00:10:21,790 --> 00:10:27,510
toolbars having a standard height of 56 density independent pixels on a mobile. Now there are

142
00:10:27,510 --> 00:10:32,590
good reasons for a lot of this. An average human finger, when it taps a screen,

143
00:10:32,810 --> 00:10:35,200
will tap an area about 48 dp,

144
00:10:35,450 --> 00:10:39,210
and that's why we set that as the minimum size for our buttons in the calculator app.

145
00:10:39,450 --> 00:10:43,340
So it's good to have a one stop shop to find out about these things.

146
00:10:43,620 --> 00:10:49,210
So as we get through the course and we create apps, I'll probably be referring back to here as appropriate,

147
00:10:49,300 --> 00:10:52,740
and I'll be reminding you of some of the guidelines and so forth.

148
00:10:52,890 --> 00:10:57,540
So really this is a good website to give you some of the principles, but there's lots more details on

149
00:10:57,540 --> 00:11:01,530
this site. So we can go to Style for example, up here,

150
00:11:03,760 --> 00:11:09,150
and have a look at the colour page. Now with the introduction of Android Lollipop,

151
00:11:09,230 --> 00:11:15,140
Google brightened everything up and made the screens more vibrant, and that's carried on through to Marshmallow,

152
00:11:15,140 --> 00:11:17,960
Nougat and now into Android

153
00:11:17,990 --> 00:11:24,120
Oreo. Screens are very vibrant and bright and the colours are chosen to work well together.

154
00:11:24,140 --> 00:11:28,730
So if I scroll down this page a little bit, Google have created this colour palette.

155
00:11:29,170 --> 00:11:31,380
I see I can click it from here to get there quickly,

156
00:11:33,300 --> 00:11:36,210
and these are colours that have been chosen to work well together.

157
00:11:36,500 --> 00:11:41,980
Now if you're into creating your own graphics, using perhaps Adobe Illustrator or Photoshop,

158
00:11:42,310 --> 00:11:47,300
then you can actually download a zip file containing colour swatches for use in those programs.

159
00:11:47,570 --> 00:11:53,720
But back in the top of the video, there's this video, and it's fairly short and it's a pallette

160
00:11:53,720 --> 00:11:57,590
perfect video showing how Google intended the colours to be used.

161
00:11:57,680 --> 00:12:02,300
Now it runs for less than two minutes so it's worth a look, and it does a good job of explaining the meaning

162
00:12:02,300 --> 00:12:05,330
of those numbers on the left hand side of each color.

163
00:12:05,560 --> 00:12:08,590
So I'm going to play this video because it's a great introduction,

164
00:12:08,660 --> 00:12:10,340
so let's go ahead and play that now.

165
00:12:19,330 --> 00:12:25,330
There are no wrong colours. What matters most is how you use them, but with such a broad spectrum to choose from,

166
00:12:25,330 --> 00:12:28,420
how do you know which colours will work for you?

167
00:12:28,420 --> 00:12:35,540
The Material Design palette provides a simple smart approach to building with colour. Starting with the

168
00:12:35,550 --> 00:12:43,040
primary 500s, it scales from light to dark, offering a variety of carefully chosen values. These colour ranges are then

169
00:12:43,040 --> 00:12:44,980
applied to different elements in the

170
00:12:44,990 --> 00:12:54,670
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

171
00:12:54,690 --> 00:12:59,240
for status box, or down to 300 for secondary information.

172
00:13:03,480 --> 00:13:05,840
Accent colours are brighter and more saturating. They encourage user interaction, giving your

173
00:13:06,430 --> 00:13:06,990
UI subtle but considered colour pops. They are perfect for

174
00:13:10,770 --> 00:13:11,830
highlighting primary

175
00:13:15,420 --> 00:13:16,010
action buttons, or fabs, standard buttons, switches, sliders and more.

176
00:13:18,900 --> 00:13:21,130
This system for thinking about colour is powerful, immersive and completely adaptable to any application.

177
00:13:25,580 --> 00:13:28,540
Whether your brand is poppy and bright or seriously subdued, Material Design makes colour work for you.

178
00:13:33,240 --> 00:13:36,990
Start building. Get to know the fundamentals of colour in google.com/design.

179
00:13:41,380 --> 00:13:44,880
Alright so I'm going to finish the video here at this point. In the next video,

180
00:13:44,890 --> 00:13:49,000
we'll talk a little more about Material Design and then we're going to make a start on using some of

181
00:13:49,000 --> 00:13:51,180
the concepts in our Flickr app.

182
00:13:51,190 --> 00:13:52,580
So I'll see you in the next video.