1
00:00:05,490 --> 00:00:10,020
Alright so I'm going to finish off this bit on material design by experimenting with a couple of

2
00:00:10,020 --> 00:00:11,160
settings.

3
00:00:11,460 --> 00:00:15,430
Now we've gone into styles a bit more than you'd need most of the time.

4
00:00:15,460 --> 00:00:21,090
Now you may need to create styles, if you really want to try to make more recent widgets look identical

5
00:00:21,360 --> 00:00:26,880
on earlier Android versions, but a lot of the time you can get very good results just by switching colour

6
00:00:26,880 --> 00:00:27,870
palettes.

7
00:00:27,960 --> 00:00:30,060
So let's see how that would work.

8
00:00:30,060 --> 00:00:36,570
So I'm going to open up my colors teal deep orange xml file that we downloaded earlier in this section, and copy

9
00:00:36,570 --> 00:00:37,590
the color tags.

10
00:00:37,740 --> 00:00:41,250
Let's go to check that out.

11
00:00:41,350 --> 00:00:43,740
So here's my color teal deep orange xml. I'm going to

12
00:00:43,860 --> 00:00:49,300
open that with an editor, and I'll size this right up so that you can see it.

13
00:00:49,310 --> 00:00:55,210
And we're just going to copy the color tags only. Back into Android Studio.

14
00:00:55,320 --> 00:00:58,330
We're going into our values styles.xml,

15
00:00:58,420 --> 00:01:03,420
and we're just going to literally replace the colours. I'm going to just select all the existing colors and paste

16
00:01:03,480 --> 00:01:04,769
directly over the top there,

17
00:01:05,160 --> 00:01:07,740
basically replacing the colours already there.

18
00:01:07,740 --> 00:01:11,390
And now if we run the app, we should find we get a completely different look.

19
00:01:13,060 --> 00:01:15,280
I'm going to run it on all three emulators as well,

20
00:01:25,660 --> 00:01:30,240
and you can see that the theme runs throughout the app, and we get the same styling right through.

21
00:01:30,250 --> 00:01:34,690
And if I go through and do a long tap on a thumbnail inside the API 16 emulator,

22
00:01:37,850 --> 00:01:48,160
and do the same say for the 21, API 21, long tap, and then lastly API 26.

23
00:01:48,390 --> 00:01:53,940
Now that doesn't look too good on API 26, but that's because I was messing around with the color background

24
00:01:53,940 --> 00:01:56,380
floating attribute in the last video.

25
00:01:56,610 --> 00:01:58,050
So I'm going to put that back to what it should be

26
00:01:58,050 --> 00:02:00,190
now. Let's go back and do that in Android Studio.

27
00:02:02,780 --> 00:02:06,800
So back here, remember we changed that to @color/accent,

28
00:02:06,810 --> 00:02:10,660
so we'll change that to primary which is what it should've been.

29
00:02:11,720 --> 00:02:14,220
And if we run the app again now on all three emulators,

30
00:02:24,990 --> 00:02:25,910
and there should be no change

31
00:02:25,950 --> 00:02:30,510
to the other emulators, the API 17 and API 21.

32
00:02:31,500 --> 00:02:33,010
Put on API 26.

33
00:02:33,360 --> 00:02:36,380
We've now got a consistent look across all three versions.

34
00:02:36,450 --> 00:02:42,050
Now one thing that isn't very friendly though, are those hex codes for the numbers. So we'll go back into our styles

35
00:02:42,060 --> 00:02:42,790
dot xml,

36
00:02:42,930 --> 00:02:50,220
so these numbers here, these hex codes. It could be useful to refer to them using more descriptive names. Now if

37
00:02:50,220 --> 00:02:55,300
you're going to use that website to generate the xml for you, then it's less important to do this.

38
00:02:55,350 --> 00:03:00,060
But if you want to use names instead of numbers, then the good news is that someone's already created

39
00:03:00,060 --> 00:03:03,810
a file containing all those material design colours.

40
00:03:03,810 --> 00:03:08,350
I'm going to link you to the page and just briefly go to that in a browser, and it's on github.

41
00:03:08,790 --> 00:03:12,720
There's the link there.

42
00:03:15,290 --> 00:03:20,010
You can see all the various styles and they've actually named them, so you can refer to them by name.

43
00:03:20,030 --> 00:03:21,360
So we can download the zip file,

44
00:03:24,490 --> 00:03:26,020
save it somewhere.

45
00:03:26,230 --> 00:03:31,860
And if I go to that folder, and I want to max, I'm going to open that folder.

46
00:03:32,940 --> 00:03:35,530
Go into the folder, you can see there's this xml file there.

47
00:03:35,830 --> 00:03:38,610
So we can just literally take that file and copy that,

48
00:03:38,830 --> 00:03:41,790
and I can paste it directly into the values folder

49
00:03:41,870 --> 00:03:45,510
in Android Studio, so I'm going to go back and do that. So the values folder,

50
00:03:45,740 --> 00:03:55,190
I'm going to paste it. I'm going to leave the default name there, android material design colors dot xml,

51
00:03:55,460 --> 00:04:00,930
and you can see now that we've done that, we've actually got a descriptive representation of the colours, basically

52
00:04:00,930 --> 00:04:05,820
friendly names, cross referenced nicely to the colour charts on the Google page that we looked at a few

53
00:04:05,820 --> 00:04:06,640
videos ago.

54
00:04:07,170 --> 00:04:11,920
And at that point it's then very easy to use those friendly names instead of the hex codes.

55
00:04:12,090 --> 00:04:18,029
So we went back now to the styles.xml, instead of putting say the code for primary, the hex code,

56
00:04:18,029 --> 00:04:23,370
we can do something like @color/md teal 500.

57
00:04:26,590 --> 00:04:31,810
Let's go through and change them all while we're here, so @color/md teal 700.

58
00:04:34,940 --> 00:04:40,080
And again you can go back to that Google page to find out what these codes meant for 500 and the one

59
00:04:40,080 --> 00:04:40,950
hundred and so on,

60
00:04:41,130 --> 00:04:45,340
because we did talk about that, or there was a, the Google material design website talked about that in detail.

61
00:04:46,800 --> 00:04:47,880
teal 100.

62
00:04:51,940 --> 00:04:57,670
Then accent is going to be md deep orange 500.

63
00:05:00,940 --> 00:05:07,440
primary text is going to be the grey, so it's going to be at @color md grey 

64
00:05:08,160 --> 00:05:11,460
900. A few more to go.

65
00:05:11,470 --> 00:05:17,140
secondary text was grey 600, so @color md grey 600.

66
00:05:20,600 --> 00:05:21,410
Icons are white,

67
00:05:21,410 --> 00:05:26,410
so it's going to be @color md white 1000.

68
00:05:27,050 --> 00:05:28,740
And the last one which was a divider,

69
00:05:28,880 --> 00:05:31,040
that's going to be grey 400, so @color

70
00:05:32,130 --> 00:05:36,270
md grey 400.

71
00:05:36,320 --> 00:05:41,690
So basically this highlights the levels of redirection that you can get in Android programming, because

72
00:05:41,690 --> 00:05:49,730
here the style sets, for example, the primary colour up here, to @color primary. That gets looked up and returns

73
00:05:49,770 --> 00:05:53,150
another resource file @color md

74
00:05:53,240 --> 00:05:59,970
underscore teal 500, and that then gets looked up to get the hex value of the actual colour to use.

75
00:05:59,990 --> 00:06:03,820
So if you want to use friendly names for the colours then you can, instead of hex codes.

76
00:06:03,950 --> 00:06:08,490
But if you're only going to set them once in your color xml file or in the style file,

77
00:06:08,520 --> 00:06:11,030
then you may feel it's not worth including that additional file.

78
00:06:11,060 --> 00:06:12,560
It's completely up to you.

79
00:06:12,560 --> 00:06:18,690
Alright so we can also change the colour of the navigation bar for API 21 and above. Now Android

80
00:06:18,690 --> 00:06:25,310
Studio used to create a v21 slash styles file automatically, but it no longer does that.

81
00:06:25,310 --> 00:06:27,300
Now I've sort of done things backwards here.

82
00:06:27,590 --> 00:06:34,650
It would have been a lot tidier if I'd created a v21 styles before creating the v23 styles dot xml

83
00:06:34,730 --> 00:06:35,710
that I've created.

84
00:06:36,170 --> 00:06:38,880
But unless you know exactly where everything is,

85
00:06:39,050 --> 00:06:44,070
which means you've memorised all the attributes, and the IP versions that introduced them, then you're going

86
00:06:44,080 --> 00:06:46,190
to find yourself in this position.

87
00:06:46,190 --> 00:06:51,670
And I definitely don't suggest that you try to memorise all of this. So it's quite likely that you'll

88
00:06:51,710 --> 00:06:57,110
want to create another styles file, using an earlier API than you've already defined.

89
00:06:57,500 --> 00:07:02,750
And that's where the comment I made earlier, that these individual API version files don't inherit

90
00:07:02,990 --> 00:07:05,610
from the earlier ones, becomes important.

91
00:07:05,720 --> 00:07:09,240
Now as you can see in the v23 styles.xml file,

92
00:07:09,440 --> 00:07:14,230
we've redefined the AppTheme, dot NoActionBar theme.

93
00:07:14,390 --> 00:07:19,270
Now it does inherit from the AppTheme style defined in the original styles.xml.

94
00:07:19,400 --> 00:07:24,840
However it doesn't inherit anything from the AppTheme.NoActionBar style in there.

95
00:07:25,220 --> 00:07:32,150
When we create a v21 styles file, what we have to do is copy the complete AppTheme.NoActionBar theme

96
00:07:32,150 --> 00:07:34,900
from the original file, and then modify it.

97
00:07:34,910 --> 00:07:36,400
So let's actually do that.

98
00:07:36,420 --> 00:07:42,580
So we want to come over here and right click on the values folder. Choose New and click on Value resource

99
00:07:42,590 --> 00:07:44,860
file, or Values resource file.

100
00:07:44,870 --> 00:07:49,560
Now the filename will be styles again.

101
00:07:49,650 --> 00:07:56,780
We need to specify API 21 so we scroll down until we get to Version, select that. Use the two greater than signs to

102
00:07:56,780 --> 00:07:57,840
choose it.

103
00:07:58,460 --> 00:08:02,640
The API level will be API 21, or Platform API level will be 21.

104
00:08:02,710 --> 00:08:06,010
Click OK, and you can see we've now got an

105
00:08:06,020 --> 00:08:08,000
empty styles dot

106
00:08:08,160 --> 00:08:09,850
xml file for v21.

107
00:08:09,900 --> 00:08:14,610
Well empty in the sense that there's no settings, no attributes set within the resource

108
00:08:14,650 --> 00:08:16,160
opening and closing tags.

109
00:08:16,510 --> 00:08:17,880
So we need the AppTheme dot

110
00:08:17,890 --> 00:08:20,850
NoActionBar style from the original file,

111
00:08:20,960 --> 00:08:22,560
so I'm going to copy that,

112
00:08:22,670 --> 00:08:24,880
values/style.xml, down here.

113
00:08:25,180 --> 00:08:26,410
So we need to copy this bit here,

114
00:08:26,420 --> 00:08:32,080
these styles dot, style name equals AppTheme.NoActionBar and the two settings. So I'm going to copy both of

115
00:08:32,080 --> 00:08:40,000
those, and go back to our v21 styles. I'm going to paste that in between our resources, our opening and closing resources

116
00:08:40,020 --> 00:08:40,710
tags.

117
00:08:40,960 --> 00:08:45,430
So at this point, to change the navigation bar colour, we need to set the attribute in both v

118
00:08:45,430 --> 00:08:48,740
21 styles and v23 styles.

119
00:08:49,090 --> 00:08:57,210
So to do that, we're going to start with the v21 styles, item name equals two double quotes, and it's going to be android colon, and it's

120
00:08:58,030 --> 00:09:01,440
navigationBarColor.

121
00:09:01,610 --> 00:09:03,930
And we'll go with @color primary

122
00:09:03,940 --> 00:09:09,610
underscore dark, and I'm going to take a copy of that line because we want to do the identical thing in the

123
00:09:09,660 --> 00:09:10,990
v23 styles file.

124
00:09:11,040 --> 00:09:12,930
So let's put that in there as well,

125
00:09:14,610 --> 00:09:20,820
like so. And if we run this app again now on all three emulators.

126
00:09:27,500 --> 00:09:28,330
Now I've actually got an

127
00:09:28,330 --> 00:09:34,340
error here, md underscore deep orange, and that's because I didn't put an @color in front of it. You can see that

128
00:09:34,340 --> 00:09:39,980
Android Studio was certainly checking that for us, which you'd want it to do. So that should fix that, and

129
00:09:39,980 --> 00:09:41,700
we'll go back and try that again.

130
00:09:43,600 --> 00:09:49,660
And what we should find is API 21 and API 23 now have a coloured navigation bar at the bottom of the display.

131
00:09:56,730 --> 00:10:03,010
And you can see that's now showing. Basically the navigation bar is now coloured at the bottom of the

132
00:10:03,010 --> 00:10:11,940
display on API 21 and API 26 emulators. Now the navigation bar, if you recall, can't be changed on Android versions before

133
00:10:11,950 --> 00:10:12,920
Lollipop.

134
00:10:13,060 --> 00:10:15,730
Now there's nothing we can do about the navigation bar before Lollipop,

135
00:10:15,790 --> 00:10:21,040
so the important thing to focus on is making sure your app works and looks good. And it can be futile

136
00:10:21,040 --> 00:10:26,680
trying to make it look identical across all versions of Android, because there will be times when older devices

137
00:10:26,680 --> 00:10:28,720
just don't have the same capabilities.

138
00:10:28,750 --> 00:10:33,610
So don't get too hung up on it looking exactly the same. Alright, so I'm going to stop the video here. In the

139
00:10:33,610 --> 00:10:38,740
next one we're going to start looking at the style editor, and going back to Android Studio,

140
00:10:38,740 --> 00:10:43,060
you may have noticed this Open editor option up here at the top right. so we're going to have a look at what that's

141
00:10:43,060 --> 00:10:44,540
all about in the next video.