1 00:00:05,220 --> 00:00:10,720 Alright, so we've spent some time discussing material design. In this video we'll see how we can apply material 2 00:00:10,720 --> 00:00:17,500 design styling to our Flickr app. In fact Android Studio automatically does most of the work when it creates 3 00:00:17,500 --> 00:00:19,010 projects from the templates, 4 00:00:19,060 --> 00:00:23,100 so let's take a look at what it's done. So I'm going to come over and open up the manifest file, 5 00:00:27,400 --> 00:00:31,670 and one of the things it's done in here is to add an Android theme. And you can 6 00:00:31,960 --> 00:00:33,760 see we've got this on line 13, 7 00:00:33,990 --> 00:00:37,250 so basically an Android theme attribute to the application tag. 8 00:00:37,290 --> 00:00:45,030 So the entire application will be styled using values specified in the AppTheme theme. 9 00:00:45,030 --> 00:00:50,780 Now each activity tag also has an Android theme attribute, as you can see. For example, search activity's 10 00:00:50,790 --> 00:00:53,060 got one on line 28. 11 00:00:53,360 --> 00:00:58,290 So you can set a theme for the individual activities as well as for the whole application. 12 00:00:58,290 --> 00:01:03,360 Now that could be useful if you've got some activities that look completely different to most, such as 13 00:01:03,360 --> 00:01:06,290 when displaying graphs or maps for example. 14 00:01:06,340 --> 00:01:13,140 Now the attributes in here are styling an application to use a theme called AppTheme, and each activity uses a 15 00:01:13,140 --> 00:01:19,920 sort of subclass of that called AppTheme.NoActionBar, and we can see that we've got that a few times 16 00:01:19,920 --> 00:01:26,200 on line 17 here, also on line 28, and again down here on line 37. 17 00:01:26,280 --> 00:01:30,890 Now themes work a little bit like CSS, Cascading Style Sheets, on web pages. 18 00:01:31,110 --> 00:01:38,220 So AppTheme.NoActionBar contains all the styling from AppTheme, but makes some changes to a few 19 00:01:38,220 --> 00:01:41,100 of the settings, and we'll see that in a minute. 20 00:01:41,100 --> 00:01:46,980 Now there's absolutely no need to do what I'm about to do, and you probably wouldn't do it, because then 21 00:01:46,980 --> 00:01:49,580 you'd have to put it back to how it is now, 22 00:01:49,590 --> 00:01:54,870 if you added another activity that you wanted to style differently. But just to demonstrate, I'm going 23 00:01:54,870 --> 00:02:00,870 to change the application theme to AppTheme.NoActionBar, and remove the theme attribute from those 24 00:02:00,870 --> 00:02:09,030 three activities. So I'm going to come up here to line 13 first, and I'm going to change that to dot NoAction 25 00:02:09,030 --> 00:02:09,560 Bar, like so. 26 00:02:09,840 --> 00:02:13,440 Then what I'm going to do, is for these other three lines, 27 00:02:13,710 --> 00:02:17,060 I'm going to delete that and move it up onto the next line. 28 00:02:17,250 --> 00:02:18,480 I'll do that three times, 29 00:02:25,410 --> 00:02:27,860 so that we've still got valid XML. 30 00:02:29,620 --> 00:02:32,400 Now this still does exactly the same as it was doing. 31 00:02:32,690 --> 00:02:38,130 It's now using the NoActionBar theme derived from AppTheme for the whole application, 32 00:02:38,180 --> 00:02:40,850 so it will be used for each activity. 33 00:02:40,880 --> 00:02:42,720 So as I said there's no point doing that. 34 00:02:42,830 --> 00:02:48,940 I'm just explaining how the NoActionBar theme was applied to each activity in the application. 35 00:02:48,950 --> 00:02:52,890 Now let's have a look at where these themes are, and how they're defined. 36 00:02:53,010 --> 00:02:59,320 Now anything to do with themes and styles are defined in XML files, inside the res slash values folder. 37 00:02:59,930 --> 00:03:07,370 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 38 00:03:07,370 --> 00:03:12,440 that things are split up into different files, but that's just the way that Google decided to organise 39 00:03:12,440 --> 00:03:13,240 things. 40 00:03:13,250 --> 00:03:17,740 So for example, over here, there's a file called colors.xml, and if we look in there, double 41 00:03:17,750 --> 00:03:23,910 click again, it defines the primary colour for the app, as well as a darker primary colour and the accent colour. 42 00:03:24,250 --> 00:03:29,030 So it shows the actual colours represented by those hex values in the left hand margin, 43 00:03:29,160 --> 00:03:30,750 and that's a nice touch. 44 00:03:30,750 --> 00:03:32,730 Now I'm going to run the app on an Oreo 45 00:03:32,790 --> 00:03:34,030 emulator. I'm going to do that now, 46 00:03:37,180 --> 00:03:41,190 and we'll just fast forward this. 47 00:03:41,420 --> 00:03:46,340 And once it starts we should be able to see the colorPrimary being used for the toolbar, colorPrimaryDark for 48 00:03:46,340 --> 00:03:50,910 the status bar at the top, and the colorAccent colour used for the floating action button. 49 00:03:55,640 --> 00:04:00,980 Alright, so if it's uploaded now we can see that the toolbar is using the colorPrimary, and that's the colorPrimary 50 00:04:00,980 --> 00:04:07,630 from over here, again we can see the colour, and we can see that the status bar at the top is using colorPrimary 51 00:04:07,670 --> 00:04:12,920 Dark, which is defined in colors.xml, and the colorAccent colour has been used for this floating 52 00:04:12,930 --> 00:04:15,080 action button down here in the bottom right. 53 00:04:15,080 --> 00:04:17,399 Now we're not going to use this floating action button. 54 00:04:17,450 --> 00:04:22,600 I'm going to remove it soon, but I've left it in the layouts so you can see the accent colour being used. 55 00:04:22,940 --> 00:04:28,450 So what's happening with this colors.xml file, is that these items give meaningful names to 56 00:04:28,460 --> 00:04:29,980 the hex color values. 57 00:04:30,260 --> 00:04:34,690 So we set them up in the file here, and then forget about having to remember the hex code. 58 00:04:34,940 --> 00:04:39,830 So whenever we want something to appear in that pink color, for example, we can refer to color 59 00:04:39,840 --> 00:04:45,160 Accent instead of the hex code hash FF4081. 60 00:04:45,390 --> 00:04:48,110 Now these names can be anything we want, within reason. 61 00:04:48,110 --> 00:04:52,730 There's nothing special about colorPrimary, for example, but it does describe what the colour's used for 62 00:04:52,730 --> 00:04:53,960 quite well. 63 00:04:53,960 --> 00:04:58,970 Now these names are actually used in the styles, so let's have a look now at styles.xml. 64 00:04:59,150 --> 00:05:02,880 So I'm going to open that file. Now we've got two styles defined in here. 65 00:05:03,240 --> 00:05:09,710 AppTheme is our custom style that Android Studio created for us, and it's parent as you can see now up here, on 66 00:05:09,730 --> 00:05:14,980 line 4, is Theme.AppCompat.Light.DarkActionBar. 67 00:05:15,320 --> 00:05:21,720 Now that means that this AppTheme style automatically includes all the properties from that builtin Android style. 68 00:05:21,730 --> 00:05:24,260 Now any values that we don't change in AppTheme, 69 00:05:24,440 --> 00:05:27,110 will just keep whatever they're set to in the parent style. 70 00:05:27,230 --> 00:05:31,860 So it works just like subclassing or cascading style sheets on web pages. 71 00:05:31,950 --> 00:05:37,610 Now our AppTheme style changes three of the predefined colours, by using these item tags as you can see on lines 6 72 00:05:37,720 --> 00:05:43,550 through 8. Now the name is the name of a setting from the parent theme, and here the name colorPrimary must 73 00:05:43,550 --> 00:05:44,660 be called that. 74 00:05:44,800 --> 00:05:49,760 Now you have to use the same name as the builtin properties, or the app actually won't compile. 75 00:05:49,760 --> 00:05:56,270 So this style redefines the three values, colorPrimary, colorPrimaryDark and colorAccent, and you 76 00:05:56,270 --> 00:06:03,130 can see that happening on lines 6 through 8. Now the new values come from attributes defined in color tags, so Android 77 00:06:03,190 --> 00:06:09,740 Studio will search through all the xml to find a colour tag with the attribute colorPrimary, and then 78 00:06:09,740 --> 00:06:13,290 use that colour for the style's colorPrimary property. 79 00:06:13,330 --> 00:06:18,740 Now the dual use of the name colorPrimary and the other two, may be a bit confusing. 80 00:06:18,860 --> 00:06:24,170 One's a name in the builtin AppCompat style, and the other's a name that we've defined in the colors 81 00:06:24,170 --> 00:06:25,220 dot xml file, 82 00:06:25,490 --> 00:06:30,800 although Android Studio created that for us, rather than us typing it in, but the effect's the same. 83 00:06:30,800 --> 00:06:34,800 So let's make a change to the colours to make things a bit clearer. 84 00:06:34,900 --> 00:06:39,950 Now I downloaded two sets of colour values from the material palette website in the last video, 85 00:06:40,070 --> 00:06:44,000 so I'm going to use the orange and yellow one to restyle the app. 86 00:06:44,000 --> 00:06:49,880 Now I could just copy the colors underscore orange underscore yellow dot xml file into the values folder. The names 87 00:06:49,880 --> 00:06:54,020 of these files are not important and they would all be combined into a single file when 88 00:06:54,100 --> 00:06:55,330 the app's compiled. 89 00:06:55,640 --> 00:06:58,500 But there's two reasons why that's not a good idea though. 90 00:06:58,760 --> 00:07:01,960 So what I'm going to do instead is open the xml file in an editor. 91 00:07:02,150 --> 00:07:06,290 So let's have a look at that, so again we're looking for the colors underscore Orange underscore yellow 92 00:07:06,320 --> 00:07:07,030 dot xml. 93 00:07:12,930 --> 00:07:22,950 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, 94 00:07:23,350 --> 00:07:25,860 because it's in quite a small font. 95 00:07:25,860 --> 00:07:30,660 So the first problem is that the Prolog or xml definition, which is the line starting with the 96 00:07:30,660 --> 00:07:36,300 less than questionmark xml, so line 2 here, that must be the first line in the file. 97 00:07:36,300 --> 00:07:40,360 So we'd get an error unless we either delete the comment or move it down in the file, 98 00:07:40,560 --> 00:07:44,980 but the other reason is that it becomes too easy to end up with duplicates. 99 00:07:45,000 --> 00:07:49,770 So if I just got into the habit of dropping files into the values folder, then I may copy the other 100 00:07:49,770 --> 00:07:51,850 file I downloaded in as well. 101 00:07:51,870 --> 00:07:57,840 The problem is then we'd have two files defining the same set of colours, which is going to confuse things. 102 00:07:57,870 --> 00:08:02,640 So a better solution is to copy all the color tags from the colors orange yellow file 103 00:08:02,670 --> 00:08:04,440 that I've got open here in my editor, 104 00:08:04,730 --> 00:08:10,500 then go back into colors.xml in Android Studio, and replace the tags in there with the new ones. 105 00:08:10,500 --> 00:08:11,810 Let's go ahead and do that. 106 00:08:11,850 --> 00:08:13,470 So I'm only going to copy the color lines, 107 00:08:13,470 --> 00:08:18,630 the lines starting with the color tag. We'll copy those, we're going to go back into Android Studio, and specifically 108 00:08:18,630 --> 00:08:24,430 colors.xml, and I'm going to copy over the existing three lines there and paste that in. 109 00:08:25,140 --> 00:08:30,330 So we've now got all the material design colors we chose listed in our colors file. Now notice that the 110 00:08:30,330 --> 00:08:32,450 website's given them different names though. 111 00:08:32,940 --> 00:08:39,000 Whereas we had colorPrimary before, now as you can see we've just got primary, and that means that ultimately 112 00:08:39,000 --> 00:08:41,570 we're going to have an error in the styles.xml file. 113 00:08:41,730 --> 00:08:46,160 So we go back to styles.xml now, and you can see straight away now that we've got 114 00:08:46,160 --> 00:08:47,400 these errors showing up. 115 00:08:47,400 --> 00:08:50,430 So hopefully that clarifies what these names relate to. 116 00:08:50,790 --> 00:08:56,860 So in styles.xml, colorPrimary is referring to a property in the builtin style, 117 00:08:56,970 --> 00:09:02,400 and we're trying to set it to a value defined in our colors.xml file that doesn't exist. 118 00:09:02,400 --> 00:09:07,180 So I need to do a bit of editing in styles.xml to change the names and fix the errors. 119 00:09:07,380 --> 00:09:11,850 So what I'm going to do is replace those colour names that are showing errors, with the correct values, 120 00:09:12,240 --> 00:09:15,000 which again we can see in colors.xml here. 121 00:09:15,510 --> 00:09:16,790 So let's go back and do that. 122 00:09:16,810 --> 00:09:20,820 So we're going to change the first one, that was defined as primary in colors dot 123 00:09:20,840 --> 00:09:23,050 xml. 124 00:09:23,350 --> 00:09:29,370 The next one, colorPrimaryDark, that was defined in colors.xml as primary underscore dark, and 125 00:09:29,370 --> 00:09:34,740 you can see Android Studio's doing a good job of allowing us to select that instead of typing it. 126 00:09:35,100 --> 00:09:40,150 And the third one, it wasn't colorAccent it was just accent. 127 00:09:40,320 --> 00:09:46,450 And again it's showing us the at color slash accent, and I've replaced that and now the errors have disappeared. 128 00:09:46,800 --> 00:09:53,050 So hopefully now that's a bit clearer. colorPrimary's the name of a property in the builtin style, and we're overriding 129 00:09:53,260 --> 00:09:57,960 it's value to use the colour called primary, that's defined in a colour tag somewhere, 130 00:09:58,110 --> 00:10:00,110 and that's what the at color slash means here 131 00:10:00,110 --> 00:10:06,030 by the way. Now Google have made the template organise things in these files, but there's nothing special about 132 00:10:06,030 --> 00:10:11,150 the file names. You may prefer to keep the colour definitions in the same file as the styles, for example. 133 00:10:11,160 --> 00:10:16,080 Now I'm not actually suggesting that you should, but if you prefer to organise things that way, then that's 134 00:10:16,080 --> 00:10:16,920 fine. 135 00:10:16,920 --> 00:10:18,910 So let's do it. So I'm going to copy 136 00:10:18,930 --> 00:10:25,750 all the colour tags from colors.xml, and then paste them into the resources tag and styles.xml 137 00:10:25,800 --> 00:10:27,400 just to show that that works. 138 00:10:27,550 --> 00:10:36,000 So I'm going to copy those, go back to styles.xml, then within the resources section up here, before the base styles, 139 00:10:36,000 --> 00:10:40,380 I could just literally paste them into there, and that would be perfectly acceptable. 140 00:10:40,680 --> 00:10:46,860 And I can now come over to colors.xml and I could delete that, because we don't need it anymore, because 141 00:10:46,860 --> 00:10:51,040 we've now defined the colours in the style.xml file. 142 00:10:51,320 --> 00:10:56,520 And you can see that I've deleted colors.xml, and we've still got these colour definitions in styles 143 00:10:56,550 --> 00:10:59,410 dot xml, and there's no actual errors showing. 144 00:10:59,660 --> 00:11:02,180 So again there was no particular reason for doing that. 145 00:11:02,210 --> 00:11:07,220 You may prefer to have all the colours in their own file, or you may prefer to see them with the style 146 00:11:07,220 --> 00:11:09,480 that uses them. It's really up to you. 147 00:11:09,480 --> 00:11:11,720 Alright so just to confirm that this does work, 148 00:11:11,720 --> 00:11:14,390 let's run the app again and check out what the colours look like. 149 00:11:19,370 --> 00:11:25,370 Alright so you can see what difference is being made. The toolbar's now showing in the new primary colour orange. The status 150 00:11:25,370 --> 00:11:30,100 bar is a darker shade of orange, and that's the colorPrimaryDark that we defined, 151 00:11:30,120 --> 00:11:34,010 and we've also got a yellow floating action button down the bottom right hand corner. 152 00:11:34,190 --> 00:11:37,440 Now I'm going to long press one of the photos to see what that looks like, 153 00:11:38,120 --> 00:11:43,550 and we've still got the tool bar, status bar and floating action button styled in the new colours, but everything 154 00:11:43,550 --> 00:11:44,570 else looks a bit boring. 155 00:11:44,720 --> 00:11:50,210 Now you can just make out the rounded corners of a card view, very light but you can see that in the corners 156 00:11:50,210 --> 00:11:52,880 there, but it's not very impressive. 157 00:11:52,880 --> 00:11:55,780 The good thing is though that we can make some more changes to the style though. 158 00:11:56,120 --> 00:12:00,230 I'm going to stop the video here, and in the next one we're going to look at making this a lot livelier 159 00:12:00,500 --> 00:12:04,160 by adding some more material design style changes to our app. 160 00:12:04,400 --> 00:12:05,780 So I'll see you in the next video.