1 00:00:05,470 --> 00:00:09,130 So now we're well on the way to get our app working on different Android versions. 2 00:00:09,130 --> 00:00:14,870 Let's now talk about these prefixes like the android colon and the @android colon color, 3 00:00:14,920 --> 00:00:16,750 versus just using @color. 4 00:00:16,900 --> 00:00:19,690 And we're going to start with the v23 styles file, 5 00:00:19,870 --> 00:00:22,450 and it's this file here, you can see that I've got that open. 6 00:00:22,480 --> 00:00:27,340 And of course if you recall, if we open the value subfolder, we've got, in android view up here, 7 00:00:27,610 --> 00:00:29,260 we've got two files in two folders. 8 00:00:29,260 --> 00:00:35,130 But because of the Android view, that's showing in the same one, so it's the v23 that we want to work on. 9 00:00:35,440 --> 00:00:42,580 Now we're currently setting the v23 card view background to our primary colour, you can see that on line 6, 10 00:00:43,040 --> 00:00:46,800 and we're using the value @color forward slash primary. 11 00:00:46,810 --> 00:00:53,370 Now the @ means that we're referring to a resource, and @color means the resource is found in a color 12 00:00:53,390 --> 00:00:54,550 resource. 13 00:00:54,550 --> 00:00:59,680 Now we can actually get Android Studio to show us exactly where it's defined, by control clicking 14 00:00:59,680 --> 00:01:04,030 on primary, or command click on a Mac. So come and go do that 15 00:01:04,030 --> 00:01:10,570 now, and I'll click on that. That takes us to the definition of the color primary, which is in the styles dot 16 00:01:10,570 --> 00:01:16,320 xml in the values folder, as opposed to the styles.xml which was in the v23 folder. 17 00:01:16,570 --> 00:01:21,290 So going back to the v23 styles.xml, the attribute we're setting here is this android 18 00:01:21,310 --> 00:01:23,680 colon colorBackgroundFloating. 19 00:01:23,680 --> 00:01:29,020 Now the attribute's called colorBackgroundFloating, which sets the default background colour for floating 20 00:01:29,020 --> 00:01:30,200 components. 21 00:01:30,210 --> 00:01:35,400 Now floating components are things like dialogue's, pop-ups and our card view widget. 22 00:01:35,410 --> 00:01:40,480 Now if the attribute's called colorBackgroundFloating, why have I put Android colon in front of it, 23 00:01:40,550 --> 00:01:42,110 in other words, this bit here. 24 00:01:42,460 --> 00:01:49,330 And for that matter, why haven't I used android colon prefix up here for windows action bar and windows 25 00:01:49,330 --> 00:01:53,130 no title. Well the reason's down to where these attributes live, 26 00:01:53,140 --> 00:01:54,120 if you like. 27 00:01:54,130 --> 00:01:59,770 Now we're using AppCompat in this app, which means that a lot of the attributes aren't coming from the 28 00:01:59,770 --> 00:02:00,740 Android framework. 29 00:02:00,910 --> 00:02:04,370 Instead they exist in the compatibility libraries. 30 00:02:04,440 --> 00:02:09,620 Now the libraries are linked into the app, so these attributes exist in the app itself. 31 00:02:09,639 --> 00:02:12,420 So let's break this down to see how this works. 32 00:02:12,430 --> 00:02:17,580 So going back to the styles.xml which is in the values folder as opposed to v23, 33 00:02:17,710 --> 00:02:25,640 I'm going to delete the Android colon name-space before window background, here on line 20, and if 34 00:02:25,640 --> 00:02:31,820 we rebuild the project, I'm going up to Build, Rebuild Project. 35 00:02:31,990 --> 00:02:35,850 We should get an error, and you see we have got an error there, 36 00:02:35,980 --> 00:02:40,900 "style attribute attr/windowBackground not found". 37 00:02:41,410 --> 00:02:47,290 So what's interesting about that error, is that it shows exactly where it looked to find the window background 38 00:02:47,500 --> 00:02:48,590 attribute. 39 00:02:48,670 --> 00:02:54,840 So your package name will probably be different, but it's definitely expecting to find the window background 40 00:02:54,910 --> 00:02:58,660 attribute in the app, not as part of the Android framework. 41 00:02:58,960 --> 00:03:05,430 So what that means, is if we don't specify a namespace, then the attribute must exist in our app, 42 00:03:05,710 --> 00:03:11,180 and remember, this includes the support libraries that are compiled with our app code. 43 00:03:11,380 --> 00:03:15,610 So if I go back to there again, and I'll just undo that change. 44 00:03:15,680 --> 00:03:16,750 In other words I'll put, 45 00:03:16,870 --> 00:03:21,300 so I'll put android colon back as you can see there by undoing. Of course I want to rebuild it 46 00:03:21,310 --> 00:03:24,400 now we're back to the state it was before. It should build successfully. 47 00:03:25,920 --> 00:03:32,800 OK. Now we can also break the app by trying to use the android colon namespace for the color primary 48 00:03:32,810 --> 00:03:33,840 attribute, 49 00:03:33,920 --> 00:03:35,680 and that's the one up here on line 15. 50 00:03:36,000 --> 00:03:43,770 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 51 00:03:43,770 --> 00:03:47,790 the keyboard to get the tooltip to show the matching attributes, as I move along the characters 52 00:03:47,790 --> 00:03:49,000 in colorPrimary. 53 00:03:49,550 --> 00:03:51,650 You can see that as I'm doing that. 54 00:03:51,660 --> 00:03:57,270 Eventually the tooltip shows android colon colorPrimary, which indicates that the color primary attribute 55 00:03:57,270 --> 00:03:59,210 does exist in the Android namespace. 56 00:03:59,250 --> 00:04:01,380 It's defined in the Android framework, 57 00:04:01,380 --> 00:04:07,070 in other words. Now when I select the attribute to finish editing the line, 58 00:04:07,650 --> 00:04:08,590 we actually get an error. 59 00:04:08,610 --> 00:04:15,520 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 60 00:04:15,530 --> 00:04:22,210 android colon colorPrimary requires API level 21, and the current min is 17. 61 00:04:22,320 --> 00:04:23,880 Now that's very informative. 62 00:04:23,880 --> 00:04:29,520 Android colon colorPrimary exists in the Android framework, but only in Lollipop and above, 63 00:04:29,520 --> 00:04:35,760 in other words, API 21 and above. Now Material Design was introduced with Android Lollipop, and the material 64 00:04:35,760 --> 00:04:41,360 design attributes, like color primary, didn't exist in the earlier versions of Android. 65 00:04:41,430 --> 00:04:47,880 Now if our app was targeting API 21 or above, then we could refer to the framework attribute. But because we're 66 00:04:47,880 --> 00:04:54,970 targeting API 17, the color primary attribute won't exist in the Android framework for all the versions that 67 00:04:54,970 --> 00:04:57,980 our app could run on, and consequently we're getting that error. 68 00:04:58,180 --> 00:05:03,860 Now the support libraries provide material design attributes on earlier versions of Android. 69 00:05:04,110 --> 00:05:09,060 So the attributes won't be fetched from the framework, and when we use the support libraries, they'll exist 70 00:05:09,090 --> 00:05:14,190 in the app's namespace, and therefore we can't use the android colon prefix. 71 00:05:14,340 --> 00:05:16,690 So I'm just going to undo that 72 00:05:16,810 --> 00:05:18,500 to what it was before, 73 00:05:18,830 --> 00:05:20,450 and the error then disappears. 74 00:05:20,490 --> 00:05:23,390 Now I pointed out a link to the documentation for these attributes, 75 00:05:23,400 --> 00:05:28,560 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. 76 00:05:33,010 --> 00:05:36,540 Now you can see over here, colorPrimary. On the right hand side 77 00:05:36,680 --> 00:05:44,740 it says added in API level 21. Now code that targets API 21 and above can use the framework color primary 78 00:05:44,740 --> 00:05:51,040 attribute, and because that's used by framework code it'll work. But code that targets API 79 00:05:51,040 --> 00:05:57,160 levels before 21, will actually be using AppCompat, and other support libraries such as com dot 80 00:05:57,160 --> 00:05:59,370 Android dot support colon design. 81 00:05:59,530 --> 00:06:05,650 Now the code in those libraries will use the color primary attribute that they designed, and therefore 82 00:06:05,650 --> 00:06:09,210 the android colon namespace isn't used. 83 00:06:09,390 --> 00:06:10,270 Now while I've got this page 84 00:06:10,330 --> 00:06:12,970 open, I'm going to search for another couple of attributes. 85 00:06:12,970 --> 00:06:17,380 Firstly, let's have a look for colorPrimaryDark. We won't search for that because it's actually showing here right 86 00:06:17,380 --> 00:06:20,490 now on the next link, so colorPriamaryDark. 87 00:06:20,520 --> 00:06:21,130 Over here to the right, 88 00:06:21,130 --> 00:06:23,440 it's also added in API 21. 89 00:06:23,440 --> 00:06:30,040 Let's also check out text color secondary, so textColorSecondary, 90 00:06:30,190 --> 00:06:35,680 this one here, and I used command f or control f to actually search for that. And you can see this was added 91 00:06:35,710 --> 00:06:42,670 in API level 1, and that means it isn't provided by the support libraries, because it exists in all versions 92 00:06:42,670 --> 00:06:43,400 of Android. 93 00:06:43,600 --> 00:06:48,580 It's been present literally in every version of the Android framework since the very beginning. 94 00:06:48,580 --> 00:06:54,700 Now if that's the case, we need to use the android colon namespace when we want to use this attribute. 95 00:06:54,710 --> 00:06:56,590 Now the same should be true of window background, 96 00:06:56,590 --> 00:06:59,590 so I'm going to do a search for that, window 97 00:07:00,100 --> 00:07:00,640 Background, 98 00:07:03,460 --> 00:07:07,410 and you can see over here that it has been also added an API level one. 99 00:07:07,770 --> 00:07:12,790 So switching back to our styles.xml in Android Studio, and you can see that these two attributes, 100 00:07:13,370 --> 00:07:20,170 android:windowBackground and android:textColorSecondary, are using the android colon namespace. 101 00:07:20,230 --> 00:07:24,330 They come from Android itself, regardless of the API level that the code's running on. 102 00:07:24,340 --> 00:07:27,740 So that's why we're prefixing those with Android colon. 103 00:07:27,850 --> 00:07:33,970 So to summarize all of that, if support for an attribute is being provided by the support libraries, then 104 00:07:33,970 --> 00:07:40,100 you don't specify a namespace. If support for an attribute's provided by the Android framework, then you 105 00:07:40,100 --> 00:07:43,450 need to specify the android Colon namespace. 106 00:07:43,590 --> 00:07:49,060 Now if an attribute exists in both places, and you're using the support library, then don't use the 107 00:07:49,060 --> 00:07:50,030 namespace. 108 00:07:50,110 --> 00:07:55,030 And finally, if you're not using the support libraries, there's only one place that the attributes can 109 00:07:55,030 --> 00:07:55,790 exist, 110 00:07:55,840 --> 00:07:58,330 so you don't need the android colon namespace. 111 00:07:58,330 --> 00:08:00,570 You can specify it if you want. 112 00:08:00,560 --> 00:08:02,390 Alright so there's now one more thing to cover, 113 00:08:02,620 --> 00:08:06,870 and that's the use of the Android namespace in the attribute values. 114 00:08:06,930 --> 00:08:10,980 I'm going to switch over to the v23 styles.xml to demonstrate this. 115 00:08:11,020 --> 00:08:15,880 Now currently we're setting the colour for floating components to our primary color. 116 00:08:15,910 --> 00:08:22,930 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 117 00:08:23,070 --> 00:08:26,040 namespace, in one other colour resources. 118 00:08:26,050 --> 00:08:32,549 Now there are also values existing in the android colon namespace, values that are actually part of Android. 119 00:08:32,890 --> 00:08:40,450 So a useful one to use sets the colour to transparent. So if I come over here and with @color, I can change 120 00:08:40,450 --> 00:08:46,850 that and make that android colon transparent. 121 00:08:47,450 --> 00:08:52,930 Now if we run this just to check that it's going to work, we should find our card view will be transparent. 122 00:08:56,050 --> 00:08:59,210 Obviously I'm running this on the API 26 emulator as well. 123 00:09:01,600 --> 00:09:09,180 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 124 00:09:09,270 --> 00:09:10,480 looking like before. 125 00:09:10,710 --> 00:09:13,780 Now it's an interesting effect, but not what I wanted here. 126 00:09:13,860 --> 00:09:21,720 The point was to show you a value coming from the Android framework. Now at android colon color means 127 00:09:21,720 --> 00:09:25,560 that we're referring to a resource that's defined in the Android namespace, 128 00:09:25,650 --> 00:09:28,820 so it's built into Android and it's called Transparent. 129 00:09:28,890 --> 00:09:30,950 Now the @ means that we're referring to a resource. 130 00:09:31,200 --> 00:09:39,870 So we could do something like this, we could do @android:color/transparent, and we get a similar result 131 00:09:39,960 --> 00:09:48,750 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 132 00:09:48,840 --> 00:09:53,890 card view. And if we want to use our own colour of course, we remove the namespace. 133 00:09:54,030 --> 00:09:59,100 We still use the @ to indicate that it's a resource that we're referring to, but we could change it 134 00:09:59,100 --> 00:10:01,110 to @color, and then 135 00:10:04,120 --> 00:10:11,340 for example, accent, and if I run that after changing that, 136 00:10:19,280 --> 00:10:26,860 you can see now we've got a yellow background in the card view. So basically this time we've referred to a colour 137 00:10:26,860 --> 00:10:32,860 resource called accent, and that's defined in our styles file. The system needed to look there because we didn't specify 138 00:10:32,860 --> 00:10:34,290 the Android namespace. 139 00:10:34,470 --> 00:10:39,950 Now that's probably the one area that can be the most confusing about these prefixes, 140 00:10:40,000 --> 00:10:44,830 the difference in namespace when you use the AppCompat library. But hopefully now, you can work out 141 00:10:44,830 --> 00:10:47,840 when you need the Android namespace and when you don't. 142 00:10:47,860 --> 00:10:50,820 Alright so it's time to move on now and do a bit more experimenting. 143 00:10:51,070 --> 00:10:56,260 You can find out more about styles though, and also how to find out the names of properties that you 144 00:10:56,260 --> 00:10:59,310 may need to change in a couple of Google guides. 145 00:10:59,350 --> 00:11:03,000 Now the first one is Styles and Themes, and I'll just bring that up on the screen, 146 00:11:05,660 --> 00:11:12,890 very useful site. Now it's well worth reading through this page to consolidate everything we've covered about 147 00:11:12,890 --> 00:11:14,410 styles and themes. 148 00:11:14,460 --> 00:11:19,910 Now it also discusses how to find out which properties you can change, either by using the documentation 149 00:11:20,180 --> 00:11:26,450 for the particular widget or view that you want to style, or by referring to the R.attr document that it links 150 00:11:26,450 --> 00:11:26,990 to. 151 00:11:27,260 --> 00:11:30,620 And you can see the link over here to the right hand side for that. I can go into there and check that 152 00:11:30,620 --> 00:11:32,140 out. 153 00:11:32,480 --> 00:11:33,920 OK we're going back again. 154 00:11:34,340 --> 00:11:38,410 There's also a link to the styles guide which will be quite useful for you to check out, 155 00:11:38,630 --> 00:11:44,320 and that's available up here in the menu. Click on App Resources, typing that menu out, 156 00:11:44,430 --> 00:11:54,230 and it's down here under Resource Types, then under Style. That's also quite a useful guide there as well. 157 00:11:54,230 --> 00:11:54,450 Alright, 158 00:11:54,460 --> 00:11:56,600 so I'm going to finish the video here. In the next one, 159 00:11:56,600 --> 00:12:00,190 we're going to experiment with a few more material design settings. 160 00:12:00,380 --> 00:12:01,750 So I'll see you in the next video.