1
00:00:05,300 --> 00:00:10,770
Continuing on from the previous video, we were looking at colour in our styles.xml file.

2
00:00:10,770 --> 00:00:15,500
Now I just want to make the point again, that there was no particular reason for moving the colours into

3
00:00:15,500 --> 00:00:19,560
the styles.xml file and then deleting the colors.xml file.

4
00:00:19,790 --> 00:00:23,980
You may prefer to have the colours defined in their own file or include them with the style.

5
00:00:23,990 --> 00:00:25,450
It's entirely up to you.

6
00:00:25,460 --> 00:00:30,170
The point I was making was just to make it clear that it's these color tags that define the colours, not

7
00:00:30,170 --> 00:00:31,730
which file they appear in.

8
00:00:31,730 --> 00:00:35,440
Alright so when we ran the app last in the last video, it was looking a bit boring

9
00:00:35,510 --> 00:00:37,600
when we just displayed the full size photo.

10
00:00:38,040 --> 00:00:40,810
Now we can easily make some changes to the style though.

11
00:00:40,970 --> 00:00:44,820
So we're going to override some more of these properties in styles.xml.

12
00:00:44,960 --> 00:00:50,110
So what I'm going to do is come down here, and study down here with four entries, because at the moment

13
00:00:50,150 --> 00:00:55,730
we've got three here, colorPrimary, colorPrimaryDark and colorAccent. But let's actually add some more

14
00:00:55,730 --> 00:00:57,650
properties here, so I'm going to do the next one,

15
00:00:57,780 --> 00:01:05,450
item tags, that's item name equals double quotes, and it's going to be android colon textColor,

16
00:01:05,510 --> 00:01:11,420
and you can see that we're getting a menu of options as I'm typing this. So we'll go with textColorSecondary,

17
00:01:12,860 --> 00:01:14,760
the greater than sign to close the tag, 

18
00:01:14,910 --> 00:01:16,960
and Google automatically adds the closing tag for us.

19
00:01:17,000 --> 00:01:23,780
And then the value's going to be at color slash, forward slash, secondary underscore text, and that's

20
00:01:23,780 --> 00:01:27,140
coming from the definition, in this case, on line 8.

21
00:01:27,140 --> 00:01:31,360
Next line we're going to do item name equals double quotes again.

22
00:01:31,520 --> 00:01:33,990
This time it's going to be android colon icon,

23
00:01:34,650 --> 00:01:36,150
and then the greater than sign

24
00:01:36,170 --> 00:01:37,540
to close the tag,

25
00:01:37,660 --> 00:01:40,580
and within that, at color slash icons.

26
00:01:41,360 --> 00:01:49,740
OK next line, item name equals double quotes again, then it's going to be android colon windowBackground, greater

27
00:01:49,850 --> 00:01:52,580
than sign and at color slash,

28
00:01:52,870 --> 00:02:01,120
so forward slash again, primary underscore light. And the last one we're going to do is the less than sign item, name equals

29
00:02:01,130 --> 00:02:04,280
double quotes cardBackgroundColor,

30
00:02:07,250 --> 00:02:08,710
cardBackgroundColor,

31
00:02:09,060 --> 00:02:16,700
and a greater than sign to close the tag off, and then it's going to be at color primary. So I've changed the

32
00:02:16,700 --> 00:02:22,580
secondary text colour, the colour used for icons and the window background, and I've also changed the background

33
00:02:22,580 --> 00:02:24,550
colour of the card view.

34
00:02:24,980 --> 00:02:27,500
So let's have a look and see what that's going to look like.

35
00:02:29,790 --> 00:02:32,950
So let's click on back, close down the app and run it again,

36
00:02:37,810 --> 00:02:41,650
and notice that the background colours have changed now that we've done that.

37
00:02:41,650 --> 00:02:45,880
And if you go into a full size photo, we can see the difference a little bit more clearly than what we could

38
00:02:45,880 --> 00:02:46,880
see previously.

39
00:02:47,050 --> 00:02:50,340
So the window background's now using the material light colour,

40
00:02:50,500 --> 00:02:55,090
but you can see that when we go into the card, it's still looking a bit disappointing.

41
00:02:55,330 --> 00:03:00,080
So the new background, the new window background colour lets the card view stand out a lot better,

42
00:03:00,220 --> 00:03:02,990
but I wanted the card to have a different background.

43
00:03:02,980 --> 00:03:08,880
Now the reason that hasn't worked, is because Google changed the property that affects the card view's background

44
00:03:09,120 --> 00:03:10,270
in Marshmallow and above.

45
00:03:10,390 --> 00:03:12,380
So that's API 23 and above.

46
00:03:12,580 --> 00:03:15,810
But fortunately there's actually an easy way to deal with that.

47
00:03:16,000 --> 00:03:22,750
So looking at our styles.xml, we can see that our AppTheme has been extended by another theme

48
00:03:23,230 --> 00:03:24,680
called AppTheme dot

49
00:03:24,820 --> 00:03:25,960
NoActionBar.

50
00:03:26,370 --> 00:03:30,220
So all that does is turn off the default action bar and window title.

51
00:03:30,280 --> 00:03:34,780
Now the reason for that is that we're replacing the action bar with a toolbar,

52
00:03:35,020 --> 00:03:40,210
so that space would have been taken up with the old action bar that Google have now replaced with the

53
00:03:40,210 --> 00:03:40,970
toolbar.

54
00:03:41,060 --> 00:03:45,240
Now because we're putting a toolbar there instead, we disable the old action bar.

55
00:03:45,400 --> 00:03:51,220
So it's the AppTheme.NoActionBar theme that the activities are using, and we can define different

56
00:03:51,220 --> 00:03:54,460
versions of that for different Android versions.

57
00:03:54,490 --> 00:03:59,740
Now I'm going to do something a bit daft now, and this comes with a disclaimer. I really don't suggest you try

58
00:03:59,740 --> 00:04:00,750
this at home.

59
00:04:00,860 --> 00:04:06,160
Now if you've got a fast computer with plenty of RAM you can try it, but just don't be surprised if it doesn't

60
00:04:06,160 --> 00:04:06,770
work.

61
00:04:07,000 --> 00:04:12,680
Now a Linux system with about 16 gigabytes of RAM should cope if you've set KVM up correctly.

62
00:04:12,790 --> 00:04:15,190
On my Mac here I've got 32 gigabytes.

63
00:04:15,310 --> 00:04:19,279
On windows you'd probably need about 32 gigabytes and HAXM working as well.

64
00:04:19,450 --> 00:04:22,790
So what I'm going to do is start three emulators at once.

65
00:04:22,790 --> 00:04:29,760
Now they're all going to be Nexus 5X devices, running API 17 Jelly Bean, API 21 which is lollipop, and

66
00:04:30,070 --> 00:04:32,670
our API 26 which is Android Oreo.

67
00:04:32,810 --> 00:04:35,830
And that's going to let us see how the app looks on each version of Android.

68
00:04:35,960 --> 00:04:41,600
Now a more practical way to check this would be to run the emulators one at a time and take screenshots.

69
00:04:41,640 --> 00:04:43,880
Now that's how I would normally suggest you do things,

70
00:04:43,990 --> 00:04:46,300
if you're looking to check how things look across versions.

71
00:04:46,450 --> 00:04:48,760
But for this video I'm going to run them all at once.

72
00:04:48,850 --> 00:04:53,290
So what I'm going to do, I've got my three emulators running. I'm just going to move this down a little bit so we can see those, then

73
00:04:53,320 --> 00:04:56,170
I can actually click them to bring them up on screen.

74
00:04:56,440 --> 00:04:59,370
So I want to now go to run. I'm going to stop and when I go to run,

75
00:05:01,100 --> 00:05:05,500
you can see that we've got three devices there, API 26, API 21 and API 17.

76
00:05:05,600 --> 00:05:08,130
So Android Studio has let me choose which one to run,

77
00:05:08,150 --> 00:05:10,380
but I can actually choose all three, by selecting

78
00:05:10,490 --> 00:05:12,830
and holding down shift, to run all three at once.

79
00:05:12,830 --> 00:05:24,540
I'm going to do that, and then I'm going to click on the various emulators so we can say the app running,

80
00:05:24,620 --> 00:05:27,650
and in fact we've got a problem with the API 17.

81
00:05:27,830 --> 00:05:30,810
It hasn't started too well, so let's just try closing that down, and you can see

82
00:05:33,360 --> 00:05:37,640
it's stopped the other apps, and I'm going to try running the API 17 again,

83
00:05:38,730 --> 00:05:41,320
just to start that again. so I'll fast-forward this part of the video

84
00:05:41,320 --> 00:05:44,660
so you're not waiting too long for this, and hopefully it'll start properly this time.

85
00:05:46,420 --> 00:05:51,190
OK, so you can see it's started this time and our app's now started, so I'm just going to go back on that. I'm going to double-click

86
00:05:51,190 --> 00:05:55,690
this to make it a bigger size. And let's go back to Android Studio,

87
00:05:56,280 --> 00:05:58,750
and we're going to select all three again, run the app,

88
00:05:59,690 --> 00:06:03,870
and I'm going to bring the three emulators on screen.

89
00:06:04,350 --> 00:06:11,710
You can see we've got API 17 to the left, API 21 in the middle, and API 26 to the right. So you can see

90
00:06:11,710 --> 00:06:13,280
that they all look pretty similar,

91
00:06:13,480 --> 00:06:18,850
but one difference is that the status bar on the API 17 device is black, you know this up here

92
00:06:18,850 --> 00:06:23,050
in the top left hand corner. Now there's no way to change the status bar colour

93
00:06:23,050 --> 00:06:26,200
before Android Lollipop, and if you try you'll get an error.

94
00:06:26,410 --> 00:06:28,560
Now it is possible to change the status bar on API

95
00:06:28,580 --> 00:06:34,510
21 devices and above. Now the default is to use the colorPrimaryDark color, and you can see that we

96
00:06:34,880 --> 00:06:38,200
are able to change the status on API 21 and 26.

97
00:06:38,200 --> 00:06:41,420
We've got that darker orange. Now I want to view a photo on each device so let's

98
00:06:41,440 --> 00:06:42,300
go ahead and do that. I'll go to this

99
00:06:45,440 --> 00:06:46,170
middle one,

100
00:06:46,290 --> 00:06:50,110
and show the photo on there, then to the third one,

101
00:06:51,010 --> 00:06:52,500
show the photo on there.

102
00:06:52,690 --> 00:06:54,370
So when I view the photo on each device,

103
00:06:54,370 --> 00:06:59,260
the first two, as you can see, have the card view's background colour set,

104
00:06:59,260 --> 00:07:02,410
but notice over here that API 26 doesn't.

105
00:07:02,440 --> 00:07:05,410
Now if you're running API 23 it also wouldn't be set,

106
00:07:05,620 --> 00:07:11,060
but running 4 emulators at the same time would really be pushing things. Alright so back to Android studio.

107
00:07:11,620 --> 00:07:17,520
So what we want to do now is change the card view's background colour, and that's done differently from API

108
00:07:17,530 --> 00:07:18,850
23 upwards.

109
00:07:19,090 --> 00:07:24,960
So this is a good opportunity to see how to create a resource that targets a specific Android version.

110
00:07:26,210 --> 00:07:30,600
So come over here to the values folder, let's right-click that, click on New, we want to select Values

111
00:07:30,750 --> 00:07:37,520
resource file. The name we're going to call this is going to be styles, although you can give it any valid

112
00:07:37,550 --> 00:07:37,920
name,

113
00:07:37,970 --> 00:07:43,010
but lower case only remember. But it does make sense to give it a name that represents what it contains,

114
00:07:43,010 --> 00:07:44,420
so I'm going to call it styles.

115
00:07:44,420 --> 00:07:48,770
Next we need to set the version of Android that'll use these style settings.

116
00:07:49,010 --> 00:07:54,440
So to do that, scroll down here under the Available qualifiers. We need to scroll down until we see Version,

117
00:07:55,820 --> 00:08:03,270
see Version down here so I'm going to click on that. Then use the two greater than arrows to specify that.

118
00:08:03,290 --> 00:08:05,620
Now the first one we want is 23 and above.

119
00:08:05,650 --> 00:08:09,280
So I'm going to type in 23. I'm just going to expand so we can see it a bit better.

120
00:08:10,780 --> 00:08:13,290
Because I've sized up things to

121
00:08:13,310 --> 00:08:18,520
show larger fonts in the videos, the pop up windows sometimes look a bit funny.

122
00:08:18,540 --> 00:08:21,690
So under the Platform API level I'm going to type in 23.

123
00:08:21,720 --> 00:08:26,610
I'm going to click on OK. So we've now got two

124
00:08:26,610 --> 00:08:32,630
styles files, style files as you can see here. We've got the original styles.xml, and the styles.xml,

125
00:08:32,640 --> 00:08:36,590
and in parentheses v23, that we've just created.

126
00:08:36,600 --> 00:08:39,980
Now if you happen to also have a v21 file in there don't worry.

127
00:08:40,140 --> 00:08:43,539
Previous versions of the template used to create it automatically,

128
00:08:43,669 --> 00:08:46,120
and there's no guarantee that they won't start doing so again.

129
00:08:46,350 --> 00:08:50,760
And that's why I explain what's really going on, so that you don't get caught out when things change, and

130
00:08:50,850 --> 00:08:52,760
believe me they will change.

131
00:08:52,890 --> 00:08:58,790
So Android Studio creates a separate directory for the v23 resource that we've just created.

132
00:08:59,040 --> 00:09:07,300
And you can actually see that if I briefly switch it to project view, and if I navigate down to app,

133
00:09:08,660 --> 00:09:15,070
source, main and res, you can see that we've got a values 

134
00:09:15,190 --> 00:09:19,540
folder here, and we've also got a values-v23 folder as well.

135
00:09:19,960 --> 00:09:26,080
And again there's no prizes for guessing that the values v23 folder only contains a styles.xml

136
00:09:26,080 --> 00:09:28,020
file, as you can see there, and not the other files.

137
00:09:28,260 --> 00:09:30,610
Alright so I'm going to switch back to Android view again now,

138
00:09:31,640 --> 00:09:36,890
and if this was closed for some reason just navigate down to the res values folder, and you can see we've

139
00:09:36,890 --> 00:09:41,150
got styles.xml and styles.xml parentheses v23.

140
00:09:41,160 --> 00:09:45,340
So basically, that's exactly the same files as we've just seen, just presented differently.

141
00:09:45,350 --> 00:09:51,500
So the Android view shows both of the styles.xml files under the heading styles.xml, and indicates

142
00:09:51,740 --> 00:09:56,880
which one's which by showing the parentheses v23 after the v23 version.

143
00:09:57,110 --> 00:10:02,360
Alright so at this point what we want to do is override some settings for devices running API 23

144
00:10:02,360 --> 00:10:08,280
and above. Now the way we want to do that is by creating a new AppTheme.NoActionBar style

145
00:10:08,660 --> 00:10:10,820
in the v23 styles file.

146
00:10:11,110 --> 00:10:13,940
So now there's no actual point retyping all the existing tags,

147
00:10:14,090 --> 00:10:17,350
so I'm just going to go back to the original styles file.

148
00:10:17,990 --> 00:10:18,730
You can see up here,

149
00:10:18,740 --> 00:10:25,080
helpfully, it shows you values slash styles and v23 slash styles. So I'm going to go back to value slash

150
00:10:25,220 --> 00:10:29,660
styles, and I'm just going to copy this part again, the action dot,

151
00:10:29,670 --> 00:10:33,120
NoActionBar part in the styles.

152
00:10:33,140 --> 00:10:34,110
I'm going to copy that

153
00:10:34,120 --> 00:10:38,600
and go to the v23 styles file, and then within the resources,

154
00:10:38,870 --> 00:10:41,440
I'm just going to paste in that style.

155
00:10:41,550 --> 00:10:46,430
The one thing to note here is that we're defining all the properties that we want to change.

156
00:10:46,420 --> 00:10:48,460
Now this NoActionBar theme

157
00:10:48,490 --> 00:10:51,330
doesn't inherit from the one in the original style's file.

158
00:10:51,520 --> 00:10:55,240
So it's completely redefining AppTheme.NoActionBar.

159
00:10:55,450 --> 00:11:00,400
So it's very important to understand that. Now AppTheme.NoActionBar extends AppTheme,

160
00:11:00,590 --> 00:11:06,140
so it does inherit the attributes specified in AppTheme. And our v23 style

161
00:11:06,140 --> 00:11:12,710
also inherits the attributes from AppTheme, but it's not inheriting anything from the original AppTheme

162
00:11:12,710 --> 00:11:14,380
dot NoActionBar style.

163
00:11:14,690 --> 00:11:20,040
Alright so the attribute that we want to change here is called color background floating.

164
00:11:20,060 --> 00:11:26,840
So what we want to do is come down and add another item tag here. So item, name equals double quotes, and it's going

165
00:11:26,850 --> 00:11:30,410
to be Android colon colorBackgroundFloating,

166
00:11:33,470 --> 00:11:34,540
closing tag,

167
00:11:34,810 --> 00:11:38,040
and within that we're going to put at color

168
00:11:38,160 --> 00:11:40,400
slash primary.

169
00:11:40,400 --> 00:11:44,160
So again we're doing that in the v23 versions of our styles.xml.

170
00:11:44,390 --> 00:11:48,960
So when I run the app now, we should notice that there's a difference. So let's just stop this and run it again.

171
00:11:49,190 --> 00:11:51,920
Choose all three devices, the emulators rather. Now let's

172
00:11:55,120 --> 00:11:55,850
see what it looks like.

173
00:12:01,070 --> 00:12:04,410
So starting with the API 17 version,

174
00:12:05,810 --> 00:12:07,190
API 21 version,

175
00:12:09,530 --> 00:12:14,280
and you now see that all three versions had the card view's background set correctly.

176
00:12:14,280 --> 00:12:15,530
So that's pretty cool.

177
00:12:15,600 --> 00:12:19,340
We can create styles that work well across different Android versions.

178
00:12:19,350 --> 00:12:22,290
Now we can't always get exactly the same look on each version.

179
00:12:22,470 --> 00:12:27,240
There's just no way to change the status bar and navigation bar colours on versions before Lollipop for

180
00:12:27,240 --> 00:12:27,940
example,

181
00:12:28,140 --> 00:12:30,830
but we can make things look as close as possible.

182
00:12:30,870 --> 00:12:35,580
In fact if you did suddenly cause the status bar or navigation bar on a Jelly Bean device to change

183
00:12:35,580 --> 00:12:40,140
colour, you may confuse the users of your app, because they just wouldn't be used to seeing that in any

184
00:12:40,140 --> 00:12:41,070
other app.

185
00:12:41,070 --> 00:12:43,600
Alright so I'm going to stop the video here. In the next one

186
00:12:43,620 --> 00:12:48,930
we're going to have a look at the name spaces that we've been using in these xml tags, and getting back to the code

187
00:12:48,930 --> 00:12:49,830
briefly,

188
00:12:49,920 --> 00:12:54,630
that's this android colon that appears before some attributes but not in front of others.

189
00:12:54,760 --> 00:12:55,890
So I'll see you in the next video.