1 00:00:05,070 --> 00:00:09,800 Alright so let's now continue working with the layouts, starting with the search activity. 2 00:00:10,200 --> 00:00:16,329 So what we want to do is right click the package name under the java folder, so the subfolder package, 3 00:00:16,360 --> 00:00:20,670 and we're going to get the Android wizard to do most of the work for us. So I'm going to click on, right click 4 00:00:20,690 --> 00:00:23,030 New, select Activity, 5 00:00:23,240 --> 00:00:27,660 and we're going to choose basic activity. 6 00:00:27,770 --> 00:00:31,770 And if you can't remember which activities which, then you can go through the gallery instead, as I've shown you in 7 00:00:31,840 --> 00:00:37,790 earlier sections of this course. But again to do that we can right click over here again, select New, this time 8 00:00:37,790 --> 00:00:39,810 instead of choosing activity, 9 00:00:39,880 --> 00:00:45,810 we're going to actually choose Gallery instead, under activity, and there's the gallery with the pictures of what we'll be 10 00:00:45,930 --> 00:00:47,250 getting from each template. 11 00:00:47,490 --> 00:00:53,340 Now in this particular case we want basic activity, because we want a toolbar, so click on that, and click on 12 00:00:53,340 --> 00:00:59,320 next. So we're now in exactly the same place we were, when I cancelled the first wizard, 13 00:00:59,400 --> 00:01:02,130 so it doesn't really matter which option you choose to get here. 14 00:01:02,180 --> 00:01:07,160 Now the activity name is going to be search activity, and there's only one other thing other than typing that in 15 00:01:07,330 --> 00:01:08,990 which I'll do first. 16 00:01:09,760 --> 00:01:15,230 So only one other thing we need to do on this screen, and that's because Android automatically handles going 17 00:01:15,230 --> 00:01:20,540 back to what it knows as the parent activity, when you click the up button on the toolbar. 18 00:01:20,840 --> 00:01:24,960 But to do that, it has to know what the parent activity is. 19 00:01:24,980 --> 00:01:29,380 So we tell it to do that by adding an entry in the manifest, or to the manifest. 20 00:01:29,420 --> 00:01:35,690 However the wizard can do this for us if we enter an activity in the hierarchical parent box here, 21 00:01:35,870 --> 00:01:40,610 and that may be off the screen or in my case not showing correctly because I've enlarged the fonts for video 22 00:01:40,610 --> 00:01:45,500 presentation, but you may need to scroll down to see it on your version of Android Studio. 23 00:01:45,500 --> 00:01:48,240 Now you can't select the parent activity using the dropdown though, 24 00:01:48,350 --> 00:01:54,450 unfortunately. It probably should work but hasn't been working in the last few versions of Android Studio. 25 00:01:54,910 --> 00:01:59,940 Now we can use the ellipsis button at the end to choose main activity from the list. 26 00:02:01,060 --> 00:02:05,290 So if nothing appears in the list after a couple of seconds, close the window and click on the ellipsis button 27 00:02:05,310 --> 00:02:09,630 again. You can see that took a few seconds before it actually appeared in my case. 28 00:02:09,810 --> 00:02:12,540 We'll have a look at the manifest later to see what it's just done, 29 00:02:12,540 --> 00:02:15,850 but for now we're going to select that and click OK. 30 00:02:16,020 --> 00:02:20,550 And although you can't see it very well it is actually main activity as the hierarchical parent on the 31 00:02:20,550 --> 00:02:21,450 screen now. 32 00:02:22,080 --> 00:02:28,140 Now the final dropdown, if I scroll down a little bit more to see that, is source language. This lets you choose Kotlin 33 00:02:28,140 --> 00:02:28,910 support, 34 00:02:29,040 --> 00:02:34,130 so choose Java if you want Java code, and use it to select Kotlin 35 00:02:34,260 --> 00:02:35,710 if you want Kotlin code. 36 00:02:35,910 --> 00:02:38,460 So if everything else is fine at this point you can click on finish. 37 00:02:43,700 --> 00:02:48,230 Now what's happened now is it's created two additional source files for us. 38 00:02:48,230 --> 00:02:55,030 We've got activity underscore search dot XML, this one here, and also content underscore search dot 39 00:02:55,160 --> 00:02:55,990 XML. 40 00:02:56,160 --> 00:02:58,320 We're just waiting for the spiel to actually finish. 41 00:02:59,480 --> 00:03:02,180 Now we're not going to add anything to this layout. 42 00:03:02,260 --> 00:03:05,600 It's just going to have a toolbar for the search function. 43 00:03:05,620 --> 00:03:10,510 Now we don't really need content underscore search as there isn't any content, and for that reason I'm 44 00:03:10,510 --> 00:03:12,100 going to go ahead and delete that. 45 00:03:12,330 --> 00:03:15,170 So coming over here to content underscore search dot XML. 46 00:03:15,550 --> 00:03:21,520 But before I delete it, it is being included in activity underscore search, so it's best to open up activity 47 00:03:21,520 --> 00:03:23,970 underscore search first, which is already open for me. 48 00:03:24,170 --> 00:03:30,770 And I'll just close down the project pane to make a bit more space, and come over here to the component tree, 49 00:03:31,070 --> 00:03:32,660 and you can see it's included over here. 50 00:03:32,880 --> 00:03:39,590 So I'm just going to select that, and delete the include entry on that line, and you can see that's now disappeared. 51 00:03:39,910 --> 00:03:45,790 And the easiest way was how I've shown you, by selecting it in the component tree, and deleting it from there. 52 00:03:46,010 --> 00:03:49,450 And while I'm here I'm also going to delete the floating action button because we're not going to use that 53 00:03:49,450 --> 00:03:49,970 either. 54 00:03:50,170 --> 00:03:53,900 It comes with this basic activity template but we only want to use the toolbar. 55 00:03:53,990 --> 00:03:56,970 So we'll go ahead and delete the floating action button, 56 00:03:57,340 --> 00:04:02,480 and we've still got the toolbar there as you can see. So now that I've done that, I'm going to delete the XML file from the layout 57 00:04:02,480 --> 00:04:06,120 folder, making sure I delete the correct file. 58 00:04:06,130 --> 00:04:07,990 So I want to to open that up again, 59 00:04:07,990 --> 00:04:13,750 Project pane, and content underscore searche dot XML is the one we want to delete, and that's because 60 00:04:13,750 --> 00:04:18,740 we do need the activity underscore search dot XML. So I'm deleting content search, 61 00:04:20,950 --> 00:04:26,780 click on OK, and it's now disappeared, and we've still got our activity underscore search there with the toolbar. 62 00:04:27,080 --> 00:04:27,440 Alright, 63 00:04:27,450 --> 00:04:29,720 so I'll just reformat the XML for that, 64 00:04:35,400 --> 00:04:36,250 Back to design. 65 00:04:37,450 --> 00:04:43,030 Alright so at this point now the search layout's done, so I'm going to close down activity underscore search dot XML. 66 00:04:45,170 --> 00:04:50,470 Now the third layout we need in this app, is for displaying the full photos when we select one from the 67 00:04:50,470 --> 00:04:51,650 list. 68 00:04:51,670 --> 00:04:55,610 So I'm going to create a new basic activity, just as we've done for the search activities. 69 00:04:55,680 --> 00:05:03,900 So I'm going to right click the package name, select New, come down to activity. And this time we're going to choose basic activity, and then again there's 70 00:05:03,900 --> 00:05:06,070 no need to go into the gallery because we've done it. 71 00:05:06,070 --> 00:05:10,450 And even I haven't forgotten which template to use in that short time. Now the activity, let's call 72 00:05:10,450 --> 00:05:16,080 that photo details activity. 73 00:05:16,760 --> 00:05:19,510 This time I'm not going to set the hierarchical parent, 74 00:05:19,670 --> 00:05:24,760 so we can see the difference later. Now I'm going to change the title to include a space, 75 00:05:24,800 --> 00:05:28,720 and remove the word activity, so photo details in other words. 76 00:05:31,890 --> 00:05:37,290 That's what the user will see in the toolbar so photo details will look a bit nicer. Everything else at this point 77 00:05:37,290 --> 00:05:38,140 is fine. 78 00:05:38,430 --> 00:05:42,900 So as long as you've got the correct language selected here, and source language, depending on whether 79 00:05:42,900 --> 00:05:46,100 you want Kotlin or Java, you can then click on finish. 80 00:05:52,170 --> 00:05:57,190 Alright and this time we don't need to do anything with the details file, in this case the activity underscore 81 00:05:57,200 --> 00:05:58,680 photo underscore details, 82 00:05:58,910 --> 00:06:02,720 because we're going to be adding our widgets to content underscore photo underscore details. 83 00:06:02,750 --> 00:06:05,910 So I'm going to open that up in the layout designer. 84 00:06:06,120 --> 00:06:07,890 Well in my case it's actually already open. 85 00:06:08,090 --> 00:06:11,190 So I'm going to close down the project pane to make a bit more space. 86 00:06:11,240 --> 00:06:14,400 Now we're going to do something a little bit different for this layout. 87 00:06:14,690 --> 00:06:19,910 Now some of the photos will be too long to fit on the display, especially with a text that will 88 00:06:19,910 --> 00:06:22,760 also be showing, so to cope with this, 89 00:06:22,760 --> 00:06:27,470 we're going to use a scroll view. Now if you want to make things scrollable when they otherwise wouldn't 90 00:06:27,470 --> 00:06:28,140 be, 91 00:06:28,190 --> 00:06:33,950 you can drop them into a scroll view widget. Now scroll view is classified as a container, and 92 00:06:33,950 --> 00:06:39,890 appears in a containers category. So I'm going to select that, and you can see scroll view's actually there, but we 93 00:06:39,890 --> 00:06:41,280 won't actually add it from here though. 94 00:06:41,530 --> 00:06:47,000 What we're going to do instead is replace the constraint layout down here in the component tree, with a scroll 95 00:06:47,000 --> 00:06:47,890 view. 96 00:06:48,140 --> 00:06:49,330 Now there's no need to use a layout 97 00:06:49,340 --> 00:06:54,720 when the only thing it contains is a scroll view. Now we could drag a scroll view onto our existing 98 00:06:54,720 --> 00:06:55,910 constraint layout, 99 00:06:56,150 --> 00:06:59,840 but that really results in an unnecessary level of nesting. 100 00:07:00,060 --> 00:07:05,540 And unfortunately there's currently no way to delete the constraint layout. The del key doesn't work. I'll select that and 101 00:07:05,540 --> 00:07:06,800 try and delete it. 102 00:07:07,170 --> 00:07:10,480 You can see nothing's happening there other than getting it de-selected. 103 00:07:10,520 --> 00:07:12,760 So what we're going to have to do is edit the XML. 104 00:07:12,940 --> 00:07:16,370 It's a bit more complicated but we end up with a cleaner layout in the end. 105 00:07:16,740 --> 00:07:22,490 So come down here, we're going to click on the text tab. We're going to replace this android dot support 106 00:07:22,770 --> 00:07:27,760 dot constraint dot constraint layout. We're going to replace that all with scroll view, 107 00:07:29,890 --> 00:07:36,880 scroll view, like so, and you can see that Android Studio helped by actually adding it at the end so we only 108 00:07:36,920 --> 00:07:41,410 had to type it once. And it will actually provide a list that we can select from as well, 109 00:07:41,540 --> 00:07:43,140 if you delete it and start typing. But 110 00:07:43,460 --> 00:07:43,970 pretty cool 111 00:07:43,970 --> 00:07:48,650 how you notice how the closing tag changes automatically which prevents us from forgetting to change 112 00:07:49,190 --> 00:07:49,590 it. 113 00:07:49,620 --> 00:07:51,560 Alright so that's all we really have to do. 114 00:07:51,680 --> 00:07:55,670 It's not really that painful, even though we had to mess with the XML a bit. 115 00:07:56,010 --> 00:07:58,630 As long as you use the correct case for scroll view, 116 00:07:58,730 --> 00:08:04,000 it'll work fine. Choosing it from a tool-tip makes life easier and less error prone. 117 00:08:04,400 --> 00:08:09,500 Now it's probably not obvious from the demo of the app, but there's a bit of nesting of views inside 118 00:08:09,670 --> 00:08:12,730 other views going on, to get the effects we saw. 119 00:08:12,930 --> 00:08:16,310 Now as I start dragging widgets and layouts onto the design, 120 00:08:16,370 --> 00:08:19,070 you might be left scratching your head and wondering what's going on. 121 00:08:19,430 --> 00:08:24,300 But the good news is that it does make sense once you've seen the finished design. 122 00:08:24,320 --> 00:08:25,300 Now I'll discuss it all 123 00:08:25,580 --> 00:08:26,560 when I'm done, 124 00:08:26,600 --> 00:08:30,830 and I'm going to be coming back to this once we've got the app working, because it's a good layout to 125 00:08:30,830 --> 00:08:36,500 use for experimenting with some of the settings, to see what effect they have. Alright, so it's time to get 126 00:08:36,500 --> 00:08:37,740 back into the designer, 127 00:08:38,000 --> 00:08:43,809 but what we'll do is we'll work on that, and basically fleshing out this design in the next video.