1 00:00:05,460 --> 00:00:12,390 Alright, so as I mentioned at the end of the last video, it's time to get back to the designer and add some more widgets. 2 00:00:12,390 --> 00:00:17,100 So I'm going to go back into design view, and you can see down here now by the way, I didn't mention it at the end of 3 00:00:17,100 --> 00:00:19,740 the last video, but the constraint layout's now disappeared, 4 00:00:19,740 --> 00:00:22,950 and we've just got this scroll view. And all the other widgets we add 5 00:00:22,950 --> 00:00:25,890 for this screen are going to go inside the scroll view, 6 00:00:25,890 --> 00:00:32,280 and when doing this I find it's easier to focus on the component tree and ignore the design or the blueprint. 7 00:00:32,280 --> 00:00:37,080 And it's much easier to get widgets inside other widgets, by watching for the triangular pointer in 8 00:00:37,080 --> 00:00:41,640 the component tree. So what we actually want next is a card view. 9 00:00:41,640 --> 00:00:46,890 Now we saw them on Google's material design site, and they're pretty cool for getting a nice visual effect, 10 00:00:46,890 --> 00:00:51,270 and you'll see that once we've finished the design. So we want to come down here and click on the app compat 11 00:00:51,270 --> 00:00:56,980 category, the end of the palette, and we want to select the card view widget, which is the top one. 12 00:00:56,980 --> 00:01:03,990 Now before trying to put a card view inside the scroll view, be aware that a scroll view can only contain 13 00:01:03,990 --> 00:01:05,430 a single widget. 14 00:01:05,430 --> 00:01:10,200 Now that's not a problem here, because obviously in the component tree, it's currently empty, 15 00:01:10,200 --> 00:01:16,340 but what out when you drag a scroll view onto a layout. When you do that, it'll automatically contain 16 00:01:16,340 --> 00:01:19,950 a linear layout which can cause you problems. 17 00:01:19,950 --> 00:01:25,610 Alright so we're going to drag the card view onto the layout. 18 00:01:25,610 --> 00:01:30,500 Now I'm going to release it as you saw there, and you may get a dialogue pop up, asking you if you want to include 19 00:01:30,500 --> 00:01:33,440 the card view v seven library into the project. 20 00:01:33,440 --> 00:01:35,950 If that happens click OK to accept the change. 21 00:01:35,950 --> 00:01:39,170 It certainly used to do that in previous versions of Android Studio, 22 00:01:39,170 --> 00:01:43,640 but you can see in my case it didn't do that, although it is doing some work, and you can see that it 23 00:01:43,640 --> 00:01:46,370 was clearly downloading something to add to this project. 24 00:01:46,370 --> 00:01:49,430 Now we used to get a similar dialogue when adding a recycler view, 25 00:01:49,430 --> 00:01:51,650 but again that's another thing that no longer happens. 26 00:01:51,650 --> 00:01:53,580 So Google may change things here as well, 27 00:01:53,580 --> 00:01:58,990 so bottom line is don't worry if you don't see the dialogue, or if you, do just click OK. 28 00:01:58,990 --> 00:02:00,920 And as I mentioned you saw some processing happening, 29 00:02:00,920 --> 00:02:05,600 and that was the library being added and gradle sinking the project. 30 00:02:05,600 --> 00:02:09,590 Now the card view widget sometimes doesn't get added. 31 00:02:09,590 --> 00:02:14,180 In my case you can see in the component tree on the left of the screen it is actually there, 32 00:02:14,180 --> 00:02:18,670 but sometimes it doesn't get added when the library wasn't already included in the project, 33 00:02:18,670 --> 00:02:21,990 and you'll have to drag the widget into the component tree again. 34 00:02:21,990 --> 00:02:25,550 But in our case we've now got a card view inside the scroll view. 35 00:02:25,550 --> 00:02:30,020 So if the scroll view wasn't expanded, just click it to expand it and you can see the card view, so make 36 00:02:30,020 --> 00:02:35,610 sure it's in there. So everything else at this point is now going to go inside the card view. 37 00:02:35,610 --> 00:02:43,610 Now a card view's designed to look good, but it's also very limited when it comes to arranging the widgets it contains. 38 00:02:43,610 --> 00:02:49,010 In fact if we drop the text views and an image view directly into the card view, they would actually literally 39 00:02:49,010 --> 00:02:54,770 just sit on top of each other. What we want to do is arrange them, one below the other on the screen, 40 00:02:54,770 --> 00:03:00,640 so we need to place another vertical linear layout inside the card view first. 41 00:03:00,640 --> 00:03:06,250 So we'll come over here and select layouts, and we want to grab a linear layout. 42 00:03:06,250 --> 00:03:10,020 We want to grab this time a vertical linear layout, 43 00:03:10,020 --> 00:03:15,560 and we want to drag that into the card view from the layout, so I'll just choose vertical. Come down and make sure that I'm in 44 00:03:15,560 --> 00:03:23,670 the card view, and you can see now that the linear layout is now within the card view. And you can see that I'm using 45 00:03:23,670 --> 00:03:28,990 the component tree, and again I recommend that you do use a component tree here, especially if you find that 46 00:03:28,990 --> 00:03:32,100 dragging onto the design doesn't put things in the correct place. 47 00:03:32,100 --> 00:03:38,250 If you are using that, it is actually also very easy to drag things back into the right place in the component tree. 48 00:03:38,250 --> 00:03:44,010 So it's very easy to get the linear layout position to below the card view instead of inside it. 49 00:03:44,010 --> 00:03:48,210 In here we clearly want the linear layout to be inside the card view. 50 00:03:48,210 --> 00:03:51,780 But again the component tree makes it very easy to reposition things, 51 00:03:51,780 --> 00:03:55,830 and we want the linear layout to be a child of the card view. 52 00:03:55,830 --> 00:04:00,420 Now if you are having trouble trying to get an existing linear layout in the correct place, 53 00:04:00,420 --> 00:04:05,850 it's often easier just to delete it and drag another one into the component tree. Keep an eye on the guidelines to 54 00:04:05,850 --> 00:04:09,900 make sure that it will be dropped inside the card view. 55 00:04:09,900 --> 00:04:13,520 Alright so next I can drag the first text view to hold the author. 56 00:04:13,520 --> 00:04:19,959 So I'm going to come back to all, or I could select text, it's just as easy, and I want to drop the text view 57 00:04:19,959 --> 00:04:26,490 inside the linear layout. And you can see it's pretty clear by looking at the arrows and the guidelines as to where it's going 58 00:04:26,490 --> 00:04:33,420 to be dropped, so I want this to appear in the linear layout, and you can see that clearly the text view's going in there. 59 00:04:33,420 --> 00:04:41,040 So let's change a few attributes on the text view. Firstly the layout width should be set to match parent, which it is, 60 00:04:41,040 --> 00:04:44,380 and we want the layout underscore height to wrap content. 61 00:04:44,380 --> 00:04:49,830 Now we also need IDs for all these widgets, so that we can put the appropriate text into them. So that 62 00:04:49,830 --> 00:04:57,490 first text we'll have the ID photo underscore author, so let's change that. 63 00:04:57,490 --> 00:05:02,310 Alright so next we want to add the image view and the remaining two text views. 64 00:05:02,310 --> 00:05:07,790 Now it's usually at this point a bit easier to add these, because we just have to position them below the existing 65 00:05:07,790 --> 00:05:17,650 text view. So come to images first, and to our image view, and I'll drop it immediately below the photo author, 66 00:05:17,650 --> 00:05:23,580 and you can see that immediately Android Studio pops up and asks for an image to display on it. 67 00:05:23,580 --> 00:05:29,160 So I'm going to choose our placeholder that we've used in a previous video, in this section of the course. 68 00:05:29,160 --> 00:05:33,810 Click OK, and you can see that the image view is at the same level as the text view, so 69 00:05:33,810 --> 00:05:44,560 that's correct. So I'm going to select that. So the ID should be photo underscore image. 70 00:05:44,560 --> 00:05:52,530 Now once again, the layout underscore width and layout underscore height should be match parent and wrap content respectively, and they are here. 71 00:05:52,530 --> 00:06:02,360 So at this point now we want to add the two remaining text view widgets, so I'm going to add the first one, 72 00:06:02,360 --> 00:06:09,950 and I'm going to go with the ID for this one, photo underscore title. 73 00:06:09,950 --> 00:06:17,050 You want to make sure the width and height are set to match parent and wrap content as well, which it is, and 74 00:06:17,050 --> 00:06:19,150 last one we're going to do now, 75 00:06:19,150 --> 00:06:28,910 one last text view, add that. The ID for that one is going to be photo underscore tags, layout width 76 00:06:28,910 --> 00:06:32,690 again, match parent and layout height, wrap content. 77 00:06:32,690 --> 00:06:35,030 Now the blueprint at this point doesn't look too bad. 78 00:06:35,030 --> 00:06:39,040 We can see the four widgets placed neatly one below the other. On the design 79 00:06:39,040 --> 00:06:43,480 though, it doesn't look nearly as good, looks a bit grim. The first text view 80 00:06:43,480 --> 00:06:48,620 at the top of the image may be obscured by the toolbar, which isn't great. In my version of Android Studio, 81 00:06:48,620 --> 00:06:51,200 it's now picking up and automatically fixing that. 82 00:06:51,200 --> 00:06:55,610 And we've seen that before, and I'm going to remind you how to fix that if you're having a problem there 83 00:06:55,610 --> 00:06:58,490 in a moment. Also there's no margin set, 84 00:06:58,490 --> 00:07:03,650 so all the widgets are touching the one above and are too close to the edges of the screen. 85 00:07:03,650 --> 00:07:06,710 So let's set some attributes to sort everything out. 86 00:07:06,710 --> 00:07:12,320 So rather than us having to set left and right margins on each widget individually, we can actually set the 87 00:07:12,320 --> 00:07:21,290 padding on their containing card view. So let's go ahead and do that, so I'm going to select the card view, 88 00:07:21,290 --> 00:07:27,400 and we're going to change the padding property by going into extended attributes. So padding, 89 00:07:27,400 --> 00:07:28,510 you want to open that up. 90 00:07:28,510 --> 00:07:35,460 So I want to set the card view's padding property to 8 dp, bit actually it turns out that's not a good idea. 91 00:07:35,460 --> 00:07:38,580 The card view widget can have nicely rounded corners, 92 00:07:38,580 --> 00:07:43,990 and we're going to set that in a moment. Now to avoid things conflicting with the rounded edges, 93 00:07:43,990 --> 00:07:47,710 the card view's padding attribute is used by the card view itself. 94 00:07:47,710 --> 00:07:50,350 So what we have to change isn't the padding attribute, 95 00:07:50,350 --> 00:07:55,360 it's something called content padding, and it's actually described in the documentation. 96 00:07:55,360 --> 00:08:03,330 I'm just going to bring that up on the screen, 97 00:08:03,330 --> 00:08:08,660 and it's described down here in the fifth paragraph, basically, "Since padding is used to offset content for 98 00:08:08,660 --> 00:08:12,050 shadows, you cannot set padding on CardView. 99 00:08:12,050 --> 00:08:15,510 Instead, you can use content padding attributes in XML". 100 00:08:15,510 --> 00:08:22,810 So back in Android Studio, making sure that card view is still selected, we actually set the content padding, 101 00:08:22,810 --> 00:08:24,610 and not the padding itself. 102 00:08:24,610 --> 00:08:29,500 So content padding as you can see down here, come down there and set that to 8 dp, 103 00:08:29,500 --> 00:08:35,940 and you can see that's nicely indented, and moved things for us. 104 00:08:35,940 --> 00:08:40,820 Now if your particular design needs different amounts of padding, or different edges, you can expand the 105 00:08:40,820 --> 00:08:45,680 attributes and set each one individually. We've got content padding bottom, left, right top. 106 00:08:45,680 --> 00:08:48,050 But going back to our normal settings here, 107 00:08:48,050 --> 00:08:50,070 our most commonly used one's content padding. 108 00:08:50,070 --> 00:08:55,380 I can just select it there as well, which is the way that you would ordinarily do it anyway. 109 00:08:55,380 --> 00:09:00,890 Basically it's setting the same padding as you saw on all four edges, which is fine for what we want here. 110 00:09:00,890 --> 00:09:06,260 Now before leaving the card view, again we want to make sure that the layout width is set to match parent, and 111 00:09:06,260 --> 00:09:10,910 the layout height is set to wrap content. In my case that is correct. 112 00:09:10,910 --> 00:09:16,670 Now we want to make it look a bit neater by curving the corners, so I'm going to actually change this card 113 00:09:16,670 --> 00:09:23,070 corner radius, and change that to 8 dp. 114 00:09:23,070 --> 00:09:27,710 Now that doesn't show very well in the layout designer, but you'll see the effect when we get to run this 115 00:09:27,710 --> 00:09:33,320 app. Once it's running, experiment with different sizes there to see the effect it has. 116 00:09:33,320 --> 00:09:39,990 So you can see that things are looking a bit nicer now, but if everything's hiding behind the toolbar, then we 117 00:09:39,990 --> 00:09:45,150 once again need to check that layout underscore behavior property that we saw previously. I'm just going 118 00:09:45,150 --> 00:09:49,790 to go into that and have a look at that. That's this layout behaviour here at the top. 119 00:09:49,790 --> 00:09:53,760 Now you can see that mine's already been selected, but if there wasn't anything actually in there 120 00:09:53,760 --> 00:09:59,690 in the past, then you might have something that looks like that on the screen, but in my case it was selected. 121 00:09:59,690 --> 00:10:04,830 So hopefully your version of Android Studio has done the same thing, and the content's not obscuring the 122 00:10:04,830 --> 00:10:11,910 toolbar. That in any event, that's how you need to fix that anyway, by changing that to app view scrolling view 123 00:10:11,910 --> 00:10:17,190 behavior. Now the scroll view also needs to fill all the space horizontally. 124 00:10:17,190 --> 00:10:24,530 So again, we've talked about this before, but I want to make sure, scroll view, that the layout width and 125 00:10:24,530 --> 00:10:29,530 height should both be set to match parent. You can see layout width and height are both set to match parent, so 126 00:10:29,530 --> 00:10:31,150 that's correct. 127 00:10:31,150 --> 00:10:36,990 Now the card view looks a bit neater if there's space around it, which we can do by setting the scroll view's padding 128 00:10:36,990 --> 00:10:49,810 to 8 dp. So I can go into padding for our scroll view, and we can select and change all to make that 8 dp, 129 00:10:49,810 --> 00:10:56,530 and you can see that's now looking a bit nicer again. Now I want to increase the bottom margin to 16 dp, to bring 130 00:10:56,530 --> 00:11:00,550 it away from the navigation bar at the bottom of the screen. Now you can experiment with this when the 131 00:11:00,550 --> 00:11:02,680 app's running to see what effect it has. 132 00:11:02,680 --> 00:11:08,260 You won't actually see the effect a lot of the time, because the card view will be sized to fit the image. 133 00:11:08,260 --> 00:11:13,720 But when you get a large image, one that's a lot taller than it's wide, or a lot of text in the tags, 134 00:11:13,720 --> 00:11:19,120 then the card view will extend beyond the bottom of the screen, and that's why we put it into a scroll view. 135 00:11:19,120 --> 00:11:25,450 So when that happens the bottom margin will have an effect, and will produce space between the card view 136 00:11:25,450 --> 00:11:33,160 and the navigation bar. So I'm going to come over here and change bottom to 16 dp. 137 00:11:33,160 --> 00:11:38,830 So everything else at this point needs a layout underscore width of match parent, and a layout height 138 00:11:38,830 --> 00:11:44,590 of wrap content, starting with the linear layout, the inner linear layout, so select that. Go back to our normal 139 00:11:44,590 --> 00:11:48,030 attributes, commonly used ones. We want to change the layout 140 00:11:48,030 --> 00:11:53,700 underscore height in this case, to wrap content, 141 00:11:53,700 --> 00:12:00,090 that's for the linear layout. So all the remaining widgets will be as wide as possible, and will grow vertically 142 00:12:00,090 --> 00:12:05,040 to hold whatever it is that they contain, which could be other widgets in the case of the linear layout, 143 00:12:05,040 --> 00:12:09,560 or text and pictures, in the case of the text views and the image view. 144 00:12:09,560 --> 00:12:17,530 So that's linear layout's layout height changed to wrap content, so move onto the first text view. OK we've already assigned 145 00:12:17,530 --> 00:12:25,030 an ID to this as you can see. That's photo underscore author in this case. We've set it's height to wrap content 146 00:12:25,030 --> 00:12:27,320 already which is correct, 147 00:12:27,320 --> 00:12:33,730 and we need to set all its margins as well to 8 dp. That's in extended, under layout underscore margin. 148 00:12:33,730 --> 00:12:40,560 So I would select all there, and select 8 dp. 149 00:12:40,560 --> 00:12:46,180 So moving onto the next one, photo image, we've already used the name, or selected the name, photo underscore image. 150 00:12:46,180 --> 00:12:52,070 We've got match parent and wrap content which is correct for the width and height. We need to make sure 151 00:12:52,070 --> 00:12:59,580 the margins are set to 8 dp so let's do that. 152 00:12:59,580 --> 00:13:03,290 Now for the scale type for this we'll go back to our regular attributes. 153 00:13:03,290 --> 00:13:05,330 We want to change the scale type here. 154 00:13:05,330 --> 00:13:07,220 We're going to use fit center. 155 00:13:07,220 --> 00:13:10,850 Now we looked at all the image scale type options at the start of the course, 156 00:13:10,850 --> 00:13:14,630 so if you think a different option looks better then you can change it. Experiment because that's 157 00:13:14,630 --> 00:13:16,860 a great way to see what things do. 158 00:13:16,860 --> 00:13:23,080 But again I'm going to change that to fitCentre. Right for the last two text views now, photo title 159 00:13:23,080 --> 00:13:29,750 is the next one. We're making sure that match parent and wrap content for the width and height respectively. 160 00:13:29,750 --> 00:13:33,250 Obviously it's got a name so we want to change the margins as well, 161 00:13:33,250 --> 00:13:39,070 layout margin to 8 dp. And the last one is the phototags. 162 00:13:39,070 --> 00:13:45,010 Let's change the margin because we're on the extended attributes screen, 8 dp again, then we'll go back 163 00:13:45,010 --> 00:13:46,970 to our regular attributes. We've got 164 00:13:46,970 --> 00:13:52,120 match parent and wrap content, which is correct, and photo underscore tags being the name. 165 00:13:52,120 --> 00:13:58,390 Now one last thing I'm going to do here for tags, we're going to change the text size to 12, 166 00:13:58,390 --> 00:14:00,550 and we do that by opening a text appearance, 167 00:14:00,550 --> 00:14:05,350 if it's not already selected, and changing that to 12 sp. 168 00:14:05,350 --> 00:14:09,880 And you saw that text size only showed up when I expanded the text appearance attribute. 169 00:14:09,880 --> 00:14:15,820 Alright so at this point we've set the properties, and we've spaced things out a bit, and now the rounded corners of the card 170 00:14:15,820 --> 00:14:19,870 view are showing a little bit in the design. You can see carefully if you have a look, 171 00:14:19,870 --> 00:14:21,670 if I haven't got my mouse on there. 172 00:14:21,670 --> 00:14:23,580 If I go back to the other screen, 173 00:14:23,580 --> 00:14:28,030 you can actually see the rounded edges are showing there, and it looks a lot neater than what it was at the 174 00:14:28,030 --> 00:14:33,860 start of this video. Because the linear layout is so simple, you end up nesting linear layouts inside other linear 175 00:14:33,860 --> 00:14:40,660 layouts if your display is at all complex, and once you've got a lot of nesting, Android does take 176 00:14:40,660 --> 00:14:42,490 a lot longer to render the layout. 177 00:14:42,490 --> 00:14:48,460 So that's why Google produced the relative layout, and then replaced that with the constraint layout, because 178 00:14:48,460 --> 00:14:50,740 performance was becoming a problem. 179 00:14:50,740 --> 00:14:55,490 But when using a card view though, you can't really get away from nesting. You have to have another 180 00:14:55,490 --> 00:15:01,090 layout such as a linear layout inside the card view, unless it only contains a single widget, 181 00:15:01,090 --> 00:15:04,170 otherwise they all end up positioned on top of each other. 182 00:15:04,170 --> 00:15:10,360 Now just before I've finished, I mentioned the image views adjust view bounds attribute in an earlier video. 183 00:15:10,360 --> 00:15:13,990 This is a good layout to really see the differences that it can make. 184 00:15:13,990 --> 00:15:18,430 So once the app's running, change this layout and set adjust bounds to true. 185 00:15:18,430 --> 00:15:23,530 It does make a big difference to the appearance of the images, and could be a very useful attribute to 186 00:15:23,530 --> 00:15:28,270 get the effect you want. But at this point that's our three layouts designed. 187 00:15:28,270 --> 00:15:34,880 So I'm going to reformat the code for this one. 188 00:15:34,880 --> 00:15:39,050 Incidentally you can see that if I scroll back up to the top, there's quite a bit of XML that's been generated 189 00:15:39,050 --> 00:15:42,180 by Android Studio. Going back to design, 190 00:15:42,180 --> 00:15:46,790 or clicking the design tab. In the next video we're going to start hooking up our code to the layouts, 191 00:15:46,790 --> 00:15:49,930 to get our app displaying the photos. Now the first step 192 00:15:49,930 --> 00:15:55,070 would be to use a recycler adapter to produce a scrolling list of the photos that we parsed out of the 193 00:15:55,070 --> 00:15:57,790 json data. So I'll see you in the next video.