1 00:00:05,700 --> 00:00:10,610 Alright so we're now ready to get started on the user interface for our flickr browser, so we can display 2 00:00:10,610 --> 00:00:12,480 the results of our searches. 3 00:00:12,500 --> 00:00:17,130 Now we're going to have three different activities, and on the screen you can see that I'm running the flickr browser 4 00:00:17,140 --> 00:00:20,970 app on my emulator again, just to remind you of what we're doing. 5 00:00:21,380 --> 00:00:26,840 So this first screen, this is the main activity, and this displays a list of the photos and their description 6 00:00:27,170 --> 00:00:33,470 from the json data. Now another activity's used to display the full photo when I long tap on it. That's 7 00:00:33,470 --> 00:00:36,200 going to be our photo details activity, and when I long 8 00:00:36,210 --> 00:00:43,170 tap on one of these photos, notice how that opens up and the photo is displayed in a much larger size. 9 00:00:43,460 --> 00:00:47,120 And again that's the photo details activity. Now notice at the top here, 10 00:00:47,120 --> 00:00:51,270 it's got a toolbar, and tapping the up button to go back to activity, 11 00:00:53,250 --> 00:00:55,780 there's another toolbar here as well as you can see. 12 00:00:55,860 --> 00:01:02,030 Now we can search for different photos which'll just change the tags that we include in the flickr url. 13 00:01:02,250 --> 00:01:07,740 So when I tap this search icon here, on the toolbar, we get another activity launched. 14 00:01:07,740 --> 00:01:12,750 This is our search activity. Now notice that this has also got a toolbar, 15 00:01:12,960 --> 00:01:18,270 even though it doesn't look like one. This search bar here at the top, where we'll type the tags that we want 16 00:01:18,270 --> 00:01:23,210 to find, is also a toolbar. It's just styled differently to the other ones. 17 00:01:23,460 --> 00:01:29,640 So we'll need some simple code in each activity to display the toolbar, and I'm going to show you a way to do 18 00:01:29,640 --> 00:01:32,270 that without having to duplicate the code in each class. 19 00:01:32,450 --> 00:01:34,040 So going back to the main screen again. 20 00:01:35,770 --> 00:01:39,300 Now this is using something called a recycler view to display the thumbnails 21 00:01:39,310 --> 00:01:41,140 and let's us scroll up and down, like so. 22 00:01:41,280 --> 00:01:47,340 Now a recycler view's a newer replacement for the list view that we've already seen. 23 00:01:47,620 --> 00:01:51,970 And I'm going to talk more about it when we come to use it. But let's start by creating this layout. 24 00:01:52,040 --> 00:01:57,580 So I'm going to move over now back to Android Studio. Now in this app we've got two XML layout files: 25 00:01:58,000 --> 00:02:01,280 activity underscore main, and content underscore main. 26 00:02:01,690 --> 00:02:08,650 And these are in the app res layout subfolder. So Google decided to split up things this way, 27 00:02:08,770 --> 00:02:13,910 for apps that use a toolbar and a floating action button. Now I'm going to open up activity underscore main 28 00:02:13,910 --> 00:02:17,020 by double clicking it. I'm also going to click over here 29 00:02:17,020 --> 00:02:17,030 in the top left project to give us a bit more space. 30 00:02:17,030 --> 00:02:24,010 So you can see that this has got a blank toolbar at the top, 31 00:02:24,100 --> 00:02:26,940 and we've also got a floating action button as well, 32 00:02:27,140 --> 00:02:32,190 an fab down the bottom right hand corner of the screen. So I've also got a Hello World widget here, 33 00:02:32,390 --> 00:02:38,290 so I'm going to delete that, except though I can't. I can't select it or do anything with it, 34 00:02:38,440 --> 00:02:44,870 and it's not actually showing up either in the component tree. You can see over here to the left there's no text view. 35 00:02:44,890 --> 00:02:52,120 So what we have got in the component tree though is our main layout, a coordinator layout. Now a coordinator layout's 36 00:02:52,450 --> 00:02:58,480 intended to be used as a top level layout, when you want the child views to interact, so that you can do neat things 37 00:02:58,480 --> 00:03:04,090 like make the toolbar fold up when scrolling, then fold down again, when you've scrolled all the way back up. 38 00:03:04,590 --> 00:03:08,030 And you can also use it to include other layouts in a different file, and 39 00:03:08,070 --> 00:03:11,370 that's actually what's happening here. Now in the coordinator 40 00:03:11,380 --> 00:03:17,770 layout is an AppBar layout containing the toolbar, so you can see we've got this AppBar layout and a toolbar is within 41 00:03:18,100 --> 00:03:19,580 the AppBar layout. 42 00:03:20,070 --> 00:03:24,370 And at the bottom is this floating action button that we've talked about, the fab, but in the middle here 43 00:03:24,910 --> 00:03:30,630 there's this include thing, and as you can see there the name of that is content underscore main. 44 00:03:30,710 --> 00:03:35,740 So it's Google's way of including the content underscore main layout. Basically, 45 00:03:35,820 --> 00:03:41,580 Google's way of separating out widgets that make up the display from things like the toolbar and the fab. 46 00:03:41,640 --> 00:03:47,680 Now we're going to be making all our changes in content underscore main, and that'll be included 47 00:03:47,980 --> 00:03:52,870 in activity underscore main when the app runs, because of this include widget that's in the component tree. 48 00:03:53,770 --> 00:03:57,330 Now they've made the layout design as rendering engine display the layout, 49 00:03:57,520 --> 00:04:02,030 so that the included items show, which is cool, but we can't directly edit them from here. 50 00:04:02,320 --> 00:04:07,360 So what we need to do is to edit in this case, the text view, is to open up content underscore main. 51 00:04:07,360 --> 00:04:11,440 So I'm going to go ahead and do that. I'm just going to double click content underscore main 52 00:04:11,600 --> 00:04:17,339 to open it and then close the project view again. Now that we've got the content underscore main open, 53 00:04:17,399 --> 00:04:23,040 over here, I can now select the Hello World, because we've got a text view over here to the left hand side, and I can 54 00:04:23,240 --> 00:04:26,400 actually press del to actually delete that. 55 00:04:26,470 --> 00:04:32,320 At this point now, in content underscore main, we've got a blank constraint layout just as we've used before 56 00:04:32,500 --> 00:04:38,170 in the other apps we've created in this course. Now again, Google have done this to make life easier. 57 00:04:38,500 --> 00:04:43,870 If we had the toolbar and the fab in this layout, then they'd end up getting in the way as we try to design 58 00:04:43,870 --> 00:04:45,430 the stuff we we're interested in. 59 00:04:45,760 --> 00:04:51,400 So when you create a new project and choose a template that includes the toolbar and fab, you get these 60 00:04:51,400 --> 00:04:57,330 two layout files. Templates without the toolbar just create the single layout file. 61 00:04:57,340 --> 00:05:01,970 So just remember that if there's only activity underscore main, then you add your widgets to that, 62 00:05:02,170 --> 00:05:07,700 but if there's two layout files, content underscore main and activity underscore main, then it's best to add your 63 00:05:07,720 --> 00:05:09,790 widgets to content underscore main. 64 00:05:10,750 --> 00:05:15,640 Now we're not going to be using the fab in this app, and we'll be deleting the code that references it in 65 00:05:15,640 --> 00:05:16,510 the activities, 66 00:05:16,690 --> 00:05:21,490 but I'm going to leave it on the screen until nearer the end of the section. That's so you can see the effect 67 00:05:21,490 --> 00:05:22,640 of starting on it 68 00:05:22,710 --> 00:05:30,260 when we look at material design. Alright so next what we're going to do is drag a recycler view onto this layout. 69 00:05:30,610 --> 00:05:34,470 So the first step's finding it in the pallet, and it's part of the support library. 70 00:05:34,510 --> 00:05:35,750 So basically I'm just scrolling, 71 00:05:35,770 --> 00:05:39,380 you can scroll right down to the bottom of the list in this case to find it. 72 00:05:39,680 --> 00:05:45,100 It's right down the bottom, recycler view, but you could also have selected AppCompat and selected it from there. 73 00:05:45,490 --> 00:05:51,320 And this also then includes in AppCompat, the other widgets that were added to Android via the support library. 74 00:05:51,340 --> 00:05:57,010 Now previous versions of Android Studio used to pop up a dialogue asking about adding the recycler view library 75 00:05:57,010 --> 00:06:02,970 to the project, when you selected or dragged it into, or onto a screen. Now this shouldn't happen 76 00:06:03,000 --> 00:06:07,800 now, but if you happen to get that dialogue, then just accept the suggestion by clicking OK. 77 00:06:07,870 --> 00:06:12,920 You also want to make sure at this point that auto connect's turned off, so come over here, make sure that's selected 78 00:06:13,180 --> 00:06:15,070 and turned off as it is in my case. 79 00:06:15,250 --> 00:06:20,110 The next thing we want to do is drag the recycler view onto the layout, so I'm going to do that but not release 80 00:06:20,110 --> 00:06:20,970 the mouse button yet. 81 00:06:22,540 --> 00:06:27,700 Now I want auto connect off because there's another neat feature that Google have added to the layout designer. 82 00:06:28,030 --> 00:06:30,050 Now of course they may well remove it again, 83 00:06:30,240 --> 00:06:35,070 so if this next bit doesn't work for you then just create the constraints by dragging the handles. 84 00:06:35,190 --> 00:06:37,030 Now we should have a recycler view on the layout with no constraints set, 85 00:06:37,140 --> 00:06:44,850 so there's a little button going now, and you can see there that we've got no constraints up here that have been set at the moment. 86 00:06:45,380 --> 00:06:50,180 And again making sure that I've got recyclerview set, and clearly, selected rather, and you can see that there's 87 00:06:50,780 --> 00:06:55,660 no constraints at the moment, and we're looking in the Inspector in the top right. Now each of the constraints 88 00:06:55,660 --> 00:07:03,240 though is showing a plus, these ones here, and clicking on these will automatically create a constraint to 89 00:07:03,240 --> 00:07:05,180 the corresponding edge of the layout. 90 00:07:05,520 --> 00:07:10,150 So if you click each one in turn, and our recycler view widget should now be correctly constrained 91 00:07:10,150 --> 00:07:13,160 on all four edges once I've finished, so I'm going to click on that now. 92 00:07:13,910 --> 00:07:19,040 And you can see it's automatically adding those constraints for us, and we've now correctly got constraints, 93 00:07:19,040 --> 00:07:22,280 the top left bottom and right. 94 00:07:22,500 --> 00:07:28,250 So that's pretty cool, it saves messing about when the widget fills the layout, but what's not quite so cool 95 00:07:28,390 --> 00:07:33,900 and will hopefully change, is that the cost the constraints are fixed rather than match constraint. 96 00:07:33,920 --> 00:07:35,450 So why would that be a problem? 97 00:07:35,750 --> 00:07:40,730 Well the easiest way to demonstrate this is to switch the layout into landscape and see what happens, 98 00:07:45,580 --> 00:07:50,890 and you can see what happens straight away when we do that. Those fixed width and height are based on the portrait 99 00:07:50,890 --> 00:07:54,840 size of a Nexus 4, so they're way off in landscape. 100 00:07:55,180 --> 00:07:59,890 So watch out for that and change the horizontal and vertical constraints to match underscore constraint 101 00:08:00,250 --> 00:08:03,070 before continuing. So let's go ahead and do that now, 102 00:08:07,610 --> 00:08:09,870 and you can see that's now a lot better and it fits in landscape, 103 00:08:10,150 --> 00:08:16,330 and if you go back to portrait, you can see that it's still working nicely in that size as well. 104 00:08:16,670 --> 00:08:22,200 Alright so looking much better. Now in terms of the screen that we're building, we're going to want to scroll 105 00:08:22,200 --> 00:08:23,860 up and down through the photos, 106 00:08:24,030 --> 00:08:30,240 so therefore we need a vertical scrollbar. Now at the moment the scrollbar's attribute appears in the attributes 107 00:08:30,240 --> 00:08:36,590 pane, you can see here, over here under scrollbars. Now depending on what Google decide to do, scrollbars 108 00:08:36,600 --> 00:08:39,340 may be available without having to expand the properties. 109 00:08:39,600 --> 00:08:44,370 But if you can't find a setting you want to change, then just come over here and use the double arrows 110 00:08:45,180 --> 00:08:50,630 to get access to all the properties. Now we want a vertical scrollbar, so I can choose that from the list 111 00:08:50,630 --> 00:08:55,270 over here, so we'll just click into here and choose vertical, click on OK. 112 00:08:56,470 --> 00:09:02,050 So we've now got our recycler view filling the screen, with all constraints set to the edges of the screen, 113 00:09:02,350 --> 00:09:08,140 and the margins as you can see over here are all set to 8dp, and the width and height are both set to match 114 00:09:08,140 --> 00:09:13,990 constraint. So the only other thing left to do now, is to give it an ID so we can access it in our code. 115 00:09:14,320 --> 00:09:18,680 So I'm going to go with the unoriginal name, recycler underscore view. 116 00:09:20,040 --> 00:09:25,120 Now one thing you may notice is that the recycler view can show behind the toolbar at the top 117 00:09:25,120 --> 00:09:28,740 of the screen. If this happens that shows up best in the blueprint, 118 00:09:28,750 --> 00:09:34,130 but even in the design you might see that items 0 1 2 and 3 not showing, because the toolbar's 119 00:09:34,150 --> 00:09:38,350 obscuring them. Now there's a layout setting that controls this behavior, 120 00:09:38,620 --> 00:09:43,510 so I'm going to remove my setting to show you what I mean by the recycler view showing behind the toolbar. 121 00:09:43,750 --> 00:09:50,330 So if I go into the component tree, so come over here to constraint layout, and I'm going to select that, then I'm going to 122 00:09:50,330 --> 00:09:55,610 expand the attributes pane. But look for the property that's called layout behavior, 123 00:09:55,620 --> 00:10:01,410 I think it's that one there, we can't quite read it. There it is, layout underscore behavior, and generally it's at the top 124 00:10:01,410 --> 00:10:05,220 of the attributes list because it's value's been changed from the default. 125 00:10:05,250 --> 00:10:09,460 So when I delete the value for that item, 126 00:10:10,110 --> 00:10:16,350 you can see straight away when I did that, items 0, 1 and a little bit of item 2 are now behind the toolbar, and the 127 00:10:16,350 --> 00:10:21,250 blueprint's showing the screen is now extending up into the area occupied by the toolbar. 128 00:10:21,600 --> 00:10:26,670 So the fix for that is always to make sure that you always set the layout underscore behaviour, if you want 129 00:10:26,670 --> 00:10:32,010 to keep your content below the toolbar. And to set it if it wasn't actually selected automatically, come 130 00:10:32,020 --> 00:10:39,870 over here into layout behaviour, click on the ellipsis here. Now there's a lot of properties that are showing 131 00:10:39,870 --> 00:10:44,020 on the screen now, but the one we're interested in is the one concerning the AppBar. 132 00:10:44,130 --> 00:10:46,910 So I'm going to type appbar in the search box, 133 00:10:49,320 --> 00:10:53,890 and you can see that it only returns, in this case, one property, appbar underscore scrolling underscore 134 00:10:53,900 --> 00:10:57,660 view underscore behavior. So that's the one we want, so we can just make sure that it's selected, 135 00:10:57,990 --> 00:10:59,630 and click OK. 136 00:10:59,960 --> 00:11:05,350 And you can see once we've selected and chosen that value again, that it now looks better, 137 00:11:05,590 --> 00:11:11,370 and we've now correctly got a toolbar without the recycler view showing behind it. Now some versions of Android 138 00:11:11,370 --> 00:11:13,830 Studio didn't automatically set that value, 139 00:11:14,010 --> 00:11:18,570 so it's a useful property to know about if you find the toolbars, or your toolbars, are sitting on top 140 00:11:18,570 --> 00:11:21,850 of other content. Alright so that's the lay finished. 141 00:11:22,060 --> 00:11:28,280 So I'm just going to go into the XML for our content underscore main. I'm going to reformat the code, 142 00:11:31,310 --> 00:11:35,920 and if we go back and close content underscore main now, and go back and look at activity underscore 143 00:11:35,930 --> 00:11:40,590 main now, you can see that the recycler view widget's now being displayed. 144 00:11:40,610 --> 00:11:44,540 And that's because content underscore main is included in this file. 145 00:11:44,540 --> 00:11:46,890 Now we're finished with activity underscore main as well, 146 00:11:46,930 --> 00:11:49,250 so I'm going to close that again after reformatting the code. 147 00:11:57,100 --> 00:11:58,410 I'll open the project pane again. 148 00:11:58,690 --> 00:12:03,610 So in the next video we're going to create the layout that the recycler view's going to use to display 149 00:12:03,610 --> 00:12:06,340 the photo details. So I'll see you in the next video.