So now we're well on the way to get our app working on different Android versions.
Let's now talk about these prefixes like the android colon and the @android colon color,
versus just using @color.
And we're going to start with the v23 styles file,
and it's this file here, you can see that I've got that open.
And of course if you recall, if we open the value subfolder, we've got, in android view up here,
we've got two files in two folders.
But because of the Android view, that's showing in the same one, so it's the v23 that we want to work on.
Now we're currently setting the v23 card view background to our primary colour, you can see that on line 6,
and we're using the value @color forward slash primary.
Now the @ means that we're referring to a resource, and @color means the resource is found in a color
resource.
Now we can actually get Android Studio to show us exactly where it's defined, by control clicking
on primary, or command click on a Mac. So come and go do that
now, and I'll click on that. That takes us to the definition of the color primary, which is in the styles dot
xml in the values folder, as opposed to the styles.xml which was in the v23 folder.
So going back to the v23 styles.xml, the attribute we're setting here is this android
colon colorBackgroundFloating.
Now the attribute's called colorBackgroundFloating, which sets the default background colour for floating
components.
Now floating components are things like dialogue's, pop-ups and our card view widget.
Now if the attribute's called colorBackgroundFloating, why have I put Android colon in front of it,
in other words, this bit here.
And for that matter, why haven't I used android colon prefix up here for windows action bar and windows
no title. Well the reason's down to where these attributes live,
if you like.
Now we're using AppCompat in this app, which means that a lot of the attributes aren't coming from the
Android framework.
Instead they exist in the compatibility libraries.
Now the libraries are linked into the app, so these attributes exist in the app itself.
So let's break this down to see how this works.
So going back to the styles.xml which is in the values folder as opposed to v23,
I'm going to delete the Android colon name-space before window background, here on line 20, and if
we rebuild the project, I'm going up to Build, Rebuild Project.
We should get an error, and you see we have got an error there,
"style attribute attr/windowBackground not found".
So what's interesting about that error, is that it shows exactly where it looked to find the window background
attribute.
So your package name will probably be different, but it's definitely expecting to find the window background
attribute in the app, not as part of the Android framework.
So what that means, is if we don't specify a namespace, then the attribute must exist in our app,
and remember, this includes the support libraries that are compiled with our app code.
So if I go back to there again, and I'll just undo that change.
In other words I'll put,
so I'll put android colon back as you can see there by undoing. Of course I want to rebuild it
now we're back to the state it was before. It should build successfully.
OK. Now we can also break the app by trying to use the android colon namespace for the color primary
attribute,
and that's the one up here on line 15.
So if I come up here and add Android colon there. So I'm basically typing android colon, and I'm using the right arrow on
the keyboard to get the tooltip to show the matching attributes, as I move along the characters
in colorPrimary.
You can see that as I'm doing that.
Eventually the tooltip shows android colon colorPrimary, which indicates that the color primary attribute
does exist in the Android namespace.
It's defined in the Android framework,
in other words. Now when I select the attribute to finish editing the line,
we actually get an error.
You can see that we've got that red squiggle now. If I hover over that and have a look, you can see it says
android colon colorPrimary requires API level 21, and the current min is 17.
Now that's very informative.
Android colon colorPrimary exists in the Android framework, but only in Lollipop and above,
in other words, API 21 and above. Now Material Design was introduced with Android Lollipop, and the material
design attributes, like color primary, didn't exist in the earlier versions of Android.
Now if our app was targeting API 21 or above, then we could refer to the framework attribute. But because we're
targeting API 17, the color primary attribute won't exist in the Android framework for all the versions that
our app could run on, and consequently we're getting that error.
Now the support libraries provide material design attributes on earlier versions of Android.
So the attributes won't be fetched from the framework, and when we use the support libraries, they'll exist
in the app's namespace, and therefore we can't use the android colon prefix.
So I'm just going to undo that
to what it was before,
and the error then disappears.
Now I pointed out a link to the documentation for these attributes,
but this is a good time to refer to it. So I'm just going to go into a browser, and we'll just visit the link.
Now you can see over here, colorPrimary. On the right hand side
it says added in API level 21. Now code that targets API 21 and above can use the framework color primary
attribute, and because that's used by framework code it'll work. But code that targets API
levels before 21, will actually be using AppCompat, and other support libraries such as com dot
Android dot support colon design.
Now the code in those libraries will use the color primary attribute that they designed, and therefore
the android colon namespace isn't used.
Now while I've got this page
open, I'm going to search for another couple of attributes.
Firstly, let's have a look for colorPrimaryDark. We won't search for that because it's actually showing here right
now on the next link, so colorPriamaryDark.
Over here to the right,
it's also added in API 21.
Let's also check out text color secondary, so textColorSecondary,
this one here, and I used command f or control f to actually search for that. And you can see this was added
in API level 1, and that means it isn't provided by the support libraries, because it exists in all versions
of Android.
It's been present literally in every version of the Android framework since the very beginning.
Now if that's the case, we need to use the android colon namespace when we want to use this attribute.
Now the same should be true of window background,
so I'm going to do a search for that, window
Background,
and you can see over here that it has been also added an API level one.
So switching back to our styles.xml in Android Studio, and you can see that these two attributes,
android:windowBackground and android:textColorSecondary, are using the android colon namespace.
They come from Android itself, regardless of the API level that the code's running on.
So that's why we're prefixing those with Android colon.
So to summarize all of that, if support for an attribute is being provided by the support libraries, then
you don't specify a namespace. If support for an attribute's provided by the Android framework, then you
need to specify the android Colon namespace.
Now if an attribute exists in both places, and you're using the support library, then don't use the
namespace.
And finally, if you're not using the support libraries, there's only one place that the attributes can
exist,
so you don't need the android colon namespace.
You can specify it if you want.
Alright so there's now one more thing to cover,
and that's the use of the Android namespace in the attribute values.
I'm going to switch over to the v23 styles.xml to demonstrate this.
Now currently we're setting the colour for floating components to our primary color.
You can see this on line 6. Now as we now know, that means that the primary colours values, looked up in our app's
namespace, in one other colour resources.
Now there are also values existing in the android colon namespace, values that are actually part of Android.
So a useful one to use sets the colour to transparent. So if I come over here and with @color, I can change
that and make that android colon transparent.
Now if we run this just to check that it's going to work, we should find our card view will be transparent.
Obviously I'm running this on the API 26 emulator as well.
OK so if we open to the details page, we can see now that our card view is actually transparent, compared to what it was
looking like before.
Now it's an interesting effect, but not what I wanted here.
The point was to show you a value coming from the Android framework. Now at android colon color means
that we're referring to a resource that's defined in the Android namespace,
so it's built into Android and it's called Transparent.
Now the @ means that we're referring to a resource.
So we could do something like this, we could do @android:color/transparent, and we get a similar result
if we run this app. And we'll just go over to the emulator and open it up, and you can see there we've still got a transparent
card view. And if we want to use our own colour of course, we remove the namespace.
We still use the @ to indicate that it's a resource that we're referring to, but we could change it
to @color, and then
for example, accent, and if I run that after changing that,
you can see now we've got a yellow background in the card view. So basically this time we've referred to a colour
resource called accent, and that's defined in our styles file. The system needed to look there because we didn't specify
the Android namespace.
Now that's probably the one area that can be the most confusing about these prefixes,
the difference in namespace when you use the AppCompat library. But hopefully now, you can work out
when you need the Android namespace and when you don't.
Alright so it's time to move on now and do a bit more experimenting.
You can find out more about styles though, and also how to find out the names of properties that you
may need to change in a couple of Google guides.
Now the first one is Styles and Themes, and I'll just bring that up on the screen,
very useful site. Now it's well worth reading through this page to consolidate everything we've covered about
styles and themes.
Now it also discusses how to find out which properties you can change, either by using the documentation
for the particular widget or view that you want to style, or by referring to the R.attr document that it links
to.
And you can see the link over here to the right hand side for that. I can go into there and check that
out.
OK we're going back again.
There's also a link to the styles guide which will be quite useful for you to check out,
and that's available up here in the menu. Click on App Resources, typing that menu out,
and it's down here under Resource Types, then under Style. That's also quite a useful guide there as well.
Alright,
so I'm going to finish the video here. In the next one,
we're going to experiment with a few more material design settings.
So I'll see you in the next video.