Continuing on from the previous video, we were looking at colour in our styles.xml file.
Now I just want to make the point again, that there was no particular reason for moving the colours into
the styles.xml file and then deleting the colors.xml file.
You may prefer to have the colours defined in their own file or include them with the style.
It's entirely up to you.
The point I was making was just to make it clear that it's these color tags that define the colours, not
which file they appear in.
Alright so when we ran the app last in the last video, it was looking a bit boring
when we just displayed the full size photo.
Now we can easily make some changes to the style though.
So we're going to override some more of these properties in styles.xml.
So what I'm going to do is come down here, and study down here with four entries, because at the moment
we've got three here, colorPrimary, colorPrimaryDark and colorAccent. But let's actually add some more
properties here, so I'm going to do the next one,
item tags, that's item name equals double quotes, and it's going to be android colon textColor,
and you can see that we're getting a menu of options as I'm typing this. So we'll go with textColorSecondary,
the greater than sign to close the tag,
and Google automatically adds the closing tag for us.
And then the value's going to be at color slash, forward slash, secondary underscore text, and that's
coming from the definition, in this case, on line 8.
Next line we're going to do item name equals double quotes again.
This time it's going to be android colon icon,
and then the greater than sign
to close the tag,
and within that, at color slash icons.
OK next line, item name equals double quotes again, then it's going to be android colon windowBackground, greater
than sign and at color slash,
so forward slash again, primary underscore light. And the last one we're going to do is the less than sign item, name equals
double quotes cardBackgroundColor,
cardBackgroundColor,
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
secondary text colour, the colour used for icons and the window background, and I've also changed the background
colour of the card view.
So let's have a look and see what that's going to look like.
So let's click on back, close down the app and run it again,
and notice that the background colours have changed now that we've done that.
And if you go into a full size photo, we can see the difference a little bit more clearly than what we could
see previously.
So the window background's now using the material light colour,
but you can see that when we go into the card, it's still looking a bit disappointing.
So the new background, the new window background colour lets the card view stand out a lot better,
but I wanted the card to have a different background.
Now the reason that hasn't worked, is because Google changed the property that affects the card view's background
in Marshmallow and above.
So that's API 23 and above.
But fortunately there's actually an easy way to deal with that.
So looking at our styles.xml, we can see that our AppTheme has been extended by another theme
called AppTheme dot
NoActionBar.
So all that does is turn off the default action bar and window title.
Now the reason for that is that we're replacing the action bar with a toolbar,
so that space would have been taken up with the old action bar that Google have now replaced with the
toolbar.
Now because we're putting a toolbar there instead, we disable the old action bar.
So it's the AppTheme.NoActionBar theme that the activities are using, and we can define different
versions of that for different Android versions.
Now I'm going to do something a bit daft now, and this comes with a disclaimer. I really don't suggest you try
this at home.
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
work.
Now a Linux system with about 16 gigabytes of RAM should cope if you've set KVM up correctly.
On my Mac here I've got 32 gigabytes.
On windows you'd probably need about 32 gigabytes and HAXM working as well.
So what I'm going to do is start three emulators at once.
Now they're all going to be Nexus 5X devices, running API 17 Jelly Bean, API 21 which is lollipop, and
our API 26 which is Android Oreo.
And that's going to let us see how the app looks on each version of Android.
Now a more practical way to check this would be to run the emulators one at a time and take screenshots.
Now that's how I would normally suggest you do things,
if you're looking to check how things look across versions.
But for this video I'm going to run them all at once.
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
I can actually click them to bring them up on screen.
So I want to now go to run. I'm going to stop and when I go to run,
you can see that we've got three devices there, API 26, API 21 and API 17.
So Android Studio has let me choose which one to run,
but I can actually choose all three, by selecting
and holding down shift, to run all three at once.
I'm going to do that, and then I'm going to click on the various emulators so we can say the app running,
and in fact we've got a problem with the API 17.
It hasn't started too well, so let's just try closing that down, and you can see
it's stopped the other apps, and I'm going to try running the API 17 again,
just to start that again. so I'll fast-forward this part of the video
so you're not waiting too long for this, and hopefully it'll start properly this time.
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
this to make it a bigger size. And let's go back to Android Studio,
and we're going to select all three again, run the app,
and I'm going to bring the three emulators on screen.
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
that they all look pretty similar,
but one difference is that the status bar on the API 17 device is black, you know this up here
in the top left hand corner. Now there's no way to change the status bar colour
before Android Lollipop, and if you try you'll get an error.
Now it is possible to change the status bar on API
21 devices and above. Now the default is to use the colorPrimaryDark color, and you can see that we
are able to change the status on API 21 and 26.
We've got that darker orange. Now I want to view a photo on each device so let's
go ahead and do that. I'll go to this
middle one,
and show the photo on there, then to the third one,
show the photo on there.
So when I view the photo on each device,
the first two, as you can see, have the card view's background colour set,
but notice over here that API 26 doesn't.
Now if you're running API 23 it also wouldn't be set,
but running 4 emulators at the same time would really be pushing things. Alright so back to Android studio.
So what we want to do now is change the card view's background colour, and that's done differently from API
23 upwards.
So this is a good opportunity to see how to create a resource that targets a specific Android version.
So come over here to the values folder, let's right-click that, click on New, we want to select Values
resource file. The name we're going to call this is going to be styles, although you can give it any valid
name,
but lower case only remember. But it does make sense to give it a name that represents what it contains,
so I'm going to call it styles.
Next we need to set the version of Android that'll use these style settings.
So to do that, scroll down here under the Available qualifiers. We need to scroll down until we see Version,
see Version down here so I'm going to click on that. Then use the two greater than arrows to specify that.
Now the first one we want is 23 and above.
So I'm going to type in 23. I'm just going to expand so we can see it a bit better.
Because I've sized up things to
show larger fonts in the videos, the pop up windows sometimes look a bit funny.
So under the Platform API level I'm going to type in 23.
I'm going to click on OK. So we've now got two
styles files, style files as you can see here. We've got the original styles.xml, and the styles.xml,
and in parentheses v23, that we've just created.
Now if you happen to also have a v21 file in there don't worry.
Previous versions of the template used to create it automatically,
and there's no guarantee that they won't start doing so again.
And that's why I explain what's really going on, so that you don't get caught out when things change, and
believe me they will change.
So Android Studio creates a separate directory for the v23 resource that we've just created.
And you can actually see that if I briefly switch it to project view, and if I navigate down to app,
source, main and res, you can see that we've got a values
folder here, and we've also got a values-v23 folder as well.
And again there's no prizes for guessing that the values v23 folder only contains a styles.xml
file, as you can see there, and not the other files.
Alright so I'm going to switch back to Android view again now,
and if this was closed for some reason just navigate down to the res values folder, and you can see we've
got styles.xml and styles.xml parentheses v23.
So basically, that's exactly the same files as we've just seen, just presented differently.
So the Android view shows both of the styles.xml files under the heading styles.xml, and indicates
which one's which by showing the parentheses v23 after the v23 version.
Alright so at this point what we want to do is override some settings for devices running API 23
and above. Now the way we want to do that is by creating a new AppTheme.NoActionBar style
in the v23 styles file.
So now there's no actual point retyping all the existing tags,
so I'm just going to go back to the original styles file.
You can see up here,
helpfully, it shows you values slash styles and v23 slash styles. So I'm going to go back to value slash
styles, and I'm just going to copy this part again, the action dot,
NoActionBar part in the styles.
I'm going to copy that
and go to the v23 styles file, and then within the resources,
I'm just going to paste in that style.
The one thing to note here is that we're defining all the properties that we want to change.
Now this NoActionBar theme
doesn't inherit from the one in the original style's file.
So it's completely redefining AppTheme.NoActionBar.
So it's very important to understand that. Now AppTheme.NoActionBar extends AppTheme,
so it does inherit the attributes specified in AppTheme. And our v23 style
also inherits the attributes from AppTheme, but it's not inheriting anything from the original AppTheme
dot NoActionBar style.
Alright so the attribute that we want to change here is called color background floating.
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
to be Android colon colorBackgroundFloating,
closing tag,
and within that we're going to put at color
slash primary.
So again we're doing that in the v23 versions of our styles.xml.
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.
Choose all three devices, the emulators rather. Now let's
see what it looks like.
So starting with the API 17 version,
API 21 version,
and you now see that all three versions had the card view's background set correctly.
So that's pretty cool.
We can create styles that work well across different Android versions.
Now we can't always get exactly the same look on each version.
There's just no way to change the status bar and navigation bar colours on versions before Lollipop for
example,
but we can make things look as close as possible.
In fact if you did suddenly cause the status bar or navigation bar on a Jelly Bean device to change
colour, you may confuse the users of your app, because they just wouldn't be used to seeing that in any
other app.
Alright so I'm going to stop the video here. In the next one
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
briefly,
that's this android colon that appears before some attributes but not in front of others.
So I'll see you in the next video.