Alright so I'm going to finish off this bit on material design by experimenting with a couple of
settings.
Now we've gone into styles a bit more than you'd need most of the time.
Now you may need to create styles, if you really want to try to make more recent widgets look identical
on earlier Android versions, but a lot of the time you can get very good results just by switching colour
palettes.
So let's see how that would work.
So I'm going to open up my colors teal deep orange xml file that we downloaded earlier in this section, and copy
the color tags.
Let's go to check that out.
So here's my color teal deep orange xml. I'm going to
open that with an editor, and I'll size this right up so that you can see it.
And we're just going to copy the color tags only. Back into Android Studio.
We're going into our values styles.xml,
and we're just going to literally replace the colours. I'm going to just select all the existing colors and paste
directly over the top there,
basically replacing the colours already there.
And now if we run the app, we should find we get a completely different look.
I'm going to run it on all three emulators as well,
and you can see that the theme runs throughout the app, and we get the same styling right through.
And if I go through and do a long tap on a thumbnail inside the API 16 emulator,
and do the same say for the 21, API 21, long tap, and then lastly API 26.
Now that doesn't look too good on API 26, but that's because I was messing around with the color background
floating attribute in the last video.
So I'm going to put that back to what it should be
now. Let's go back and do that in Android Studio.
So back here, remember we changed that to @color/accent,
so we'll change that to primary which is what it should've been.
And if we run the app again now on all three emulators,
and there should be no change
to the other emulators, the API 17 and API 21.
Put on API 26.
We've now got a consistent look across all three versions.
Now one thing that isn't very friendly though, are those hex codes for the numbers. So we'll go back into our styles
dot xml,
so these numbers here, these hex codes. It could be useful to refer to them using more descriptive names. Now if
you're going to use that website to generate the xml for you, then it's less important to do this.
But if you want to use names instead of numbers, then the good news is that someone's already created
a file containing all those material design colours.
I'm going to link you to the page and just briefly go to that in a browser, and it's on github.
There's the link there.
You can see all the various styles and they've actually named them, so you can refer to them by name.
So we can download the zip file,
save it somewhere.
And if I go to that folder, and I want to max, I'm going to open that folder.
Go into the folder, you can see there's this xml file there.
So we can just literally take that file and copy that,
and I can paste it directly into the values folder
in Android Studio, so I'm going to go back and do that. So the values folder,
I'm going to paste it. I'm going to leave the default name there, android material design colors dot xml,
and you can see now that we've done that, we've actually got a descriptive representation of the colours, basically
friendly names, cross referenced nicely to the colour charts on the Google page that we looked at a few
videos ago.
And at that point it's then very easy to use those friendly names instead of the hex codes.
So we went back now to the styles.xml, instead of putting say the code for primary, the hex code,
we can do something like @color/md teal 500.
Let's go through and change them all while we're here, so @color/md teal 700.
And again you can go back to that Google page to find out what these codes meant for 500 and the one
hundred and so on,
because we did talk about that, or there was a, the Google material design website talked about that in detail.
teal 100.
Then accent is going to be md deep orange 500.
primary text is going to be the grey, so it's going to be at @color md grey
900. A few more to go.
secondary text was grey 600, so @color md grey 600.
Icons are white,
so it's going to be @color md white 1000.
And the last one which was a divider,
that's going to be grey 400, so @color
md grey 400.
So basically this highlights the levels of redirection that you can get in Android programming, because
here the style sets, for example, the primary colour up here, to @color primary. That gets looked up and returns
another resource file @color md
underscore teal 500, and that then gets looked up to get the hex value of the actual colour to use.
So if you want to use friendly names for the colours then you can, instead of hex codes.
But if you're only going to set them once in your color xml file or in the style file,
then you may feel it's not worth including that additional file.
It's completely up to you.
Alright so we can also change the colour of the navigation bar for API 21 and above. Now Android
Studio used to create a v21 slash styles file automatically, but it no longer does that.
Now I've sort of done things backwards here.
It would have been a lot tidier if I'd created a v21 styles before creating the v23 styles dot xml
that I've created.
But unless you know exactly where everything is,
which means you've memorised all the attributes, and the IP versions that introduced them, then you're going
to find yourself in this position.
And I definitely don't suggest that you try to memorise all of this. So it's quite likely that you'll
want to create another styles file, using an earlier API than you've already defined.
And that's where the comment I made earlier, that these individual API version files don't inherit
from the earlier ones, becomes important.
Now as you can see in the v23 styles.xml file,
we've redefined the AppTheme, dot NoActionBar theme.
Now it does inherit from the AppTheme style defined in the original styles.xml.
However it doesn't inherit anything from the AppTheme.NoActionBar style in there.
When we create a v21 styles file, what we have to do is copy the complete AppTheme.NoActionBar theme
from the original file, and then modify it.
So let's actually do that.
So we want to come over here and right click on the values folder. Choose New and click on Value resource
file, or Values resource file.
Now the filename will be styles again.
We need to specify API 21 so we scroll down until we get to Version, select that. Use the two greater than signs to
choose it.
The API level will be API 21, or Platform API level will be 21.
Click OK, and you can see we've now got an
empty styles dot
xml file for v21.
Well empty in the sense that there's no settings, no attributes set within the resource
opening and closing tags.
So we need the AppTheme dot
NoActionBar style from the original file,
so I'm going to copy that,
values/style.xml, down here.
So we need to copy this bit here,
these styles dot, style name equals AppTheme.NoActionBar and the two settings. So I'm going to copy both of
those, and go back to our v21 styles. I'm going to paste that in between our resources, our opening and closing resources
tags.
So at this point, to change the navigation bar colour, we need to set the attribute in both v
21 styles and v23 styles.
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
navigationBarColor.
And we'll go with @color primary
underscore dark, and I'm going to take a copy of that line because we want to do the identical thing in the
v23 styles file.
So let's put that in there as well,
like so. And if we run this app again now on all three emulators.
Now I've actually got an
error here, md underscore deep orange, and that's because I didn't put an @color in front of it. You can see that
Android Studio was certainly checking that for us, which you'd want it to do. So that should fix that, and
we'll go back and try that again.
And what we should find is API 21 and API 23 now have a coloured navigation bar at the bottom of the display.
And you can see that's now showing. Basically the navigation bar is now coloured at the bottom of the
display on API 21 and API 26 emulators. Now the navigation bar, if you recall, can't be changed on Android versions before
Lollipop.
Now there's nothing we can do about the navigation bar before Lollipop,
so the important thing to focus on is making sure your app works and looks good. And it can be futile
trying to make it look identical across all versions of Android, because there will be times when older devices
just don't have the same capabilities.
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
next one we're going to start looking at the style editor, and going back to Android Studio,
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
all about in the next video.