Alright, so we've spent some time discussing material design. In this video we'll see how we can apply material
design styling to our Flickr app. In fact Android Studio automatically does most of the work when it creates
projects from the templates,
so let's take a look at what it's done. So I'm going to come over and open up the manifest file,
and one of the things it's done in here is to add an Android theme. And you can
see we've got this on line 13,
so basically an Android theme attribute to the application tag.
So the entire application will be styled using values specified in the AppTheme theme.
Now each activity tag also has an Android theme attribute, as you can see. For example, search activity's
got one on line 28.
So you can set a theme for the individual activities as well as for the whole application.
Now that could be useful if you've got some activities that look completely different to most, such as
when displaying graphs or maps for example.
Now the attributes in here are styling an application to use a theme called AppTheme, and each activity uses a
sort of subclass of that called AppTheme.NoActionBar, and we can see that we've got that a few times
on line 17 here, also on line 28, and again down here on line 37.
Now themes work a little bit like CSS, Cascading Style Sheets, on web pages.
So AppTheme.NoActionBar contains all the styling from AppTheme, but makes some changes to a few
of the settings, and we'll see that in a minute.
Now there's absolutely no need to do what I'm about to do, and you probably wouldn't do it, because then
you'd have to put it back to how it is now,
if you added another activity that you wanted to style differently. But just to demonstrate, I'm going
to change the application theme to AppTheme.NoActionBar, and remove the theme attribute from those
three activities. So I'm going to come up here to line 13 first, and I'm going to change that to dot NoAction
Bar, like so.
Then what I'm going to do, is for these other three lines,
I'm going to delete that and move it up onto the next line.
I'll do that three times,
so that we've still got valid XML.
Now this still does exactly the same as it was doing.
It's now using the NoActionBar theme derived from AppTheme for the whole application,
so it will be used for each activity.
So as I said there's no point doing that.
I'm just explaining how the NoActionBar theme was applied to each activity in the application.
Now let's have a look at where these themes are, and how they're defined.
Now anything to do with themes and styles are defined in XML files, inside the res slash values folder.
So I'm going to open up res, and open up values, and you can see that we've got a styles.xml. Now you'll find
that things are split up into different files, but that's just the way that Google decided to organise
things.
So for example, over here, there's a file called colors.xml, and if we look in there, double
click again, it defines the primary colour for the app, as well as a darker primary colour and the accent colour.
So it shows the actual colours represented by those hex values in the left hand margin,
and that's a nice touch.
Now I'm going to run the app on an Oreo
emulator. I'm going to do that now,
and we'll just fast forward this.
And once it starts we should be able to see the colorPrimary being used for the toolbar, colorPrimaryDark for
the status bar at the top, and the colorAccent colour used for the floating action button.
Alright, so if it's uploaded now we can see that the toolbar is using the colorPrimary, and that's the colorPrimary
from over here, again we can see the colour, and we can see that the status bar at the top is using colorPrimary
Dark, which is defined in colors.xml, and the colorAccent colour has been used for this floating
action button down here in the bottom right.
Now we're not going to use this floating action button.
I'm going to remove it soon, but I've left it in the layouts so you can see the accent colour being used.
So what's happening with this colors.xml file, is that these items give meaningful names to
the hex color values.
So we set them up in the file here, and then forget about having to remember the hex code.
So whenever we want something to appear in that pink color, for example, we can refer to color
Accent instead of the hex code hash FF4081.
Now these names can be anything we want, within reason.
There's nothing special about colorPrimary, for example, but it does describe what the colour's used for
quite well.
Now these names are actually used in the styles, so let's have a look now at styles.xml.
So I'm going to open that file. Now we've got two styles defined in here.
AppTheme is our custom style that Android Studio created for us, and it's parent as you can see now up here, on
line 4, is Theme.AppCompat.Light.DarkActionBar.
Now that means that this AppTheme style automatically includes all the properties from that builtin Android style.
Now any values that we don't change in AppTheme,
will just keep whatever they're set to in the parent style.
So it works just like subclassing or cascading style sheets on web pages.
Now our AppTheme style changes three of the predefined colours, by using these item tags as you can see on lines 6
through 8. Now the name is the name of a setting from the parent theme, and here the name colorPrimary must
be called that.
Now you have to use the same name as the builtin properties, or the app actually won't compile.
So this style redefines the three values, colorPrimary, colorPrimaryDark and colorAccent, and you
can see that happening on lines 6 through 8. Now the new values come from attributes defined in color tags, so Android
Studio will search through all the xml to find a colour tag with the attribute colorPrimary, and then
use that colour for the style's colorPrimary property.
Now the dual use of the name colorPrimary and the other two, may be a bit confusing.
One's a name in the builtin AppCompat style, and the other's a name that we've defined in the colors
dot xml file,
although Android Studio created that for us, rather than us typing it in, but the effect's the same.
So let's make a change to the colours to make things a bit clearer.
Now I downloaded two sets of colour values from the material palette website in the last video,
so I'm going to use the orange and yellow one to restyle the app.
Now I could just copy the colors underscore orange underscore yellow dot xml file into the values folder. The names
of these files are not important and they would all be combined into a single file when
the app's compiled.
But there's two reasons why that's not a good idea though.
So what I'm going to do instead is open the xml file in an editor.
So let's have a look at that, so again we're looking for the colors underscore Orange underscore yellow
dot xml.
And I've just opened that file in xml editor, and I'm just going to size this right up so you can actually see what I'm doing here,
because it's in quite a small font.
So the first problem is that the Prolog or xml definition, which is the line starting with the
less than questionmark xml, so line 2 here, that must be the first line in the file.
So we'd get an error unless we either delete the comment or move it down in the file,
but the other reason is that it becomes too easy to end up with duplicates.
So if I just got into the habit of dropping files into the values folder, then I may copy the other
file I downloaded in as well.
The problem is then we'd have two files defining the same set of colours, which is going to confuse things.
So a better solution is to copy all the color tags from the colors orange yellow file
that I've got open here in my editor,
then go back into colors.xml in Android Studio, and replace the tags in there with the new ones.
Let's go ahead and do that.
So I'm only going to copy the color lines,
the lines starting with the color tag. We'll copy those, we're going to go back into Android Studio, and specifically
colors.xml, and I'm going to copy over the existing three lines there and paste that in.
So we've now got all the material design colors we chose listed in our colors file. Now notice that the
website's given them different names though.
Whereas we had colorPrimary before, now as you can see we've just got primary, and that means that ultimately
we're going to have an error in the styles.xml file.
So we go back to styles.xml now, and you can see straight away now that we've got
these errors showing up.
So hopefully that clarifies what these names relate to.
So in styles.xml, colorPrimary is referring to a property in the builtin style,
and we're trying to set it to a value defined in our colors.xml file that doesn't exist.
So I need to do a bit of editing in styles.xml to change the names and fix the errors.
So what I'm going to do is replace those colour names that are showing errors, with the correct values,
which again we can see in colors.xml here.
So let's go back and do that.
So we're going to change the first one, that was defined as primary in colors dot
xml.
The next one, colorPrimaryDark, that was defined in colors.xml as primary underscore dark, and
you can see Android Studio's doing a good job of allowing us to select that instead of typing it.
And the third one, it wasn't colorAccent it was just accent.
And again it's showing us the at color slash accent, and I've replaced that and now the errors have disappeared.
So hopefully now that's a bit clearer. colorPrimary's the name of a property in the builtin style, and we're overriding
it's value to use the colour called primary, that's defined in a colour tag somewhere,
and that's what the at color slash means here
by the way. Now Google have made the template organise things in these files, but there's nothing special about
the file names. You may prefer to keep the colour definitions in the same file as the styles, for example.
Now I'm not actually suggesting that you should, but if you prefer to organise things that way, then that's
fine.
So let's do it. So I'm going to copy
all the colour tags from colors.xml, and then paste them into the resources tag and styles.xml
just to show that that works.
So I'm going to copy those, go back to styles.xml, then within the resources section up here, before the base styles,
I could just literally paste them into there, and that would be perfectly acceptable.
And I can now come over to colors.xml and I could delete that, because we don't need it anymore, because
we've now defined the colours in the style.xml file.
And you can see that I've deleted colors.xml, and we've still got these colour definitions in styles
dot xml, and there's no actual errors showing.
So again there was no particular reason for doing that.
You may prefer to have all the colours in their own file, or you may prefer to see them with the style
that uses them. It's really up to you.
Alright so just to confirm that this does work,
let's run the app again and check out what the colours look like.
Alright so you can see what difference is being made. The toolbar's now showing in the new primary colour orange. The status
bar is a darker shade of orange, and that's the colorPrimaryDark that we defined,
and we've also got a yellow floating action button down the bottom right hand corner.
Now I'm going to long press one of the photos to see what that looks like,
and we've still got the tool bar, status bar and floating action button styled in the new colours, but everything
else looks a bit boring.
Now you can just make out the rounded corners of a card view, very light but you can see that in the corners
there, but it's not very impressive.
The good thing is though that we can make some more changes to the style though.
I'm going to stop the video here, and in the next one we're going to look at making this a lot livelier
by adding some more material design style changes to our app.
So I'll see you in the next video.