1 00:00:02,449 --> 00:00:04,946 (keyboard clicks) 2 00:00:04,946 --> 00:00:07,137 Our app now has two fragments. 3 00:00:07,137 --> 00:00:10,303 One to display the list of tasks in the RecyclerView, 4 00:00:10,303 --> 00:00:14,114 the other to let us edit a task's details. 5 00:00:14,114 --> 00:00:16,421 We finished the last video by displaying 6 00:00:16,421 --> 00:00:18,731 the AddEditFragment in our activity 7 00:00:18,731 --> 00:00:21,078 but the result wasn't quite what we wanted. 8 00:00:21,078 --> 00:00:23,128 Now, in a minute we'll use a FrameLayout 9 00:00:23,128 --> 00:00:25,242 to see how we can add or remove a fragment 10 00:00:25,242 --> 00:00:28,599 without the problem that the fragment widget gave us. 11 00:00:28,599 --> 00:00:30,737 When we use a fragment widget in the layout, 12 00:00:30,737 --> 00:00:34,167 you can't remove the fragment that it was set up with. 13 00:00:34,167 --> 00:00:35,290 So our solution 14 00:00:35,290 --> 00:00:38,956 is to replace the fragment widget with another container 15 00:00:38,956 --> 00:00:42,184 and then swap the two fragments about when the user chooses 16 00:00:42,184 --> 00:00:43,554 to do different things. 17 00:00:43,554 --> 00:00:46,732 Displaying the task or editing a single task. 18 00:00:46,732 --> 00:00:49,691 Let's document it in the google card we looked at earlier. 19 00:00:49,691 --> 00:00:52,834 So we're gonna go back to the browser. 20 00:00:52,834 --> 00:00:54,503 It expands three-quarters of the way down 21 00:00:54,503 --> 00:00:56,214 but you come over here and click on examples, 22 00:00:56,214 --> 00:00:58,297 a quick way to get to it. 23 00:00:59,598 --> 00:01:00,431 Scrolling down there 24 00:01:00,431 --> 00:01:02,918 Examples, you can see on the screen there now. 25 00:01:02,918 --> 00:01:05,913 Looking at the fragment, and it's called layout 26 00:01:05,913 --> 00:01:08,278 in that example, the XML there, 27 00:01:08,278 --> 00:01:10,408 it's got a fragment widget. 28 00:01:10,408 --> 00:01:12,241 Let me just scroll it up a little bit. 29 00:01:12,241 --> 00:01:15,810 But it's also got a FrameLayout placed side by side. 30 00:01:15,810 --> 00:01:19,134 Now, that handles the landscape orientation. 31 00:01:19,134 --> 00:01:22,605 For portrait, this approach uses a separate activity 32 00:01:22,605 --> 00:01:24,311 with its own layout. 33 00:01:24,311 --> 00:01:26,958 I'm not gonna go into details about this approach. 34 00:01:26,958 --> 00:01:29,881 It works fine when you're only displaying data. 35 00:01:29,881 --> 00:01:31,822 In that case, users don't care for that 36 00:01:31,822 --> 00:01:34,119 it might be appearing in different fragments. 37 00:01:34,119 --> 00:01:35,954 Whatever orientation that we´re gonna take to find into 38 00:01:35,954 --> 00:01:39,662 The appropriate fragment displays the data, 39 00:01:39,662 --> 00:01:41,790 the task details in our case. 40 00:01:41,790 --> 00:01:43,453 The way this all falls down though 41 00:01:43,453 --> 00:01:46,099 is when you're allowing the data to be edited. 42 00:01:46,099 --> 00:01:48,166 There's a clue as to why this is a problem 43 00:01:48,166 --> 00:01:49,660 right at the top of the page. 44 00:01:49,660 --> 00:01:52,280 I'm just gonna scroll up to the top again. 45 00:01:52,280 --> 00:01:53,247 It actually talks about here 46 00:01:53,247 --> 00:01:55,913 right in this second paragraph here. 47 00:01:55,913 --> 00:01:58,719 A fragment must always be hosted in an activity 48 00:01:58,719 --> 00:02:02,153 and the fragment's lifecycle is directly affected 49 00:02:02,153 --> 00:02:04,676 by the host activity's lifecycle. 50 00:02:04,676 --> 00:02:06,501 The portrait and landscape orientations 51 00:02:06,501 --> 00:02:09,860 use different activities to display the details. 52 00:02:09,860 --> 00:02:12,272 So they're using different fragments. 53 00:02:12,272 --> 00:02:13,669 They also said that it doesn't matter 54 00:02:13,669 --> 00:02:15,465 when you're only displaying data. 55 00:02:15,465 --> 00:02:18,164 The data is displayed on whatever fragments being used 56 00:02:18,164 --> 00:02:19,502 and everything works fine. 57 00:02:19,502 --> 00:02:21,470 If you try and edit the data 58 00:02:21,470 --> 00:02:23,998 rotating the device results in all the users 59 00:02:23,998 --> 00:02:25,592 changes being destroyed. 60 00:02:25,592 --> 00:02:27,129 There are ways around that 61 00:02:27,129 --> 00:02:29,143 but it quickly gets a bit messy. 62 00:02:29,143 --> 00:02:30,999 So, we're not gonna do that. 63 00:02:30,999 --> 00:02:32,691 We're gonna do something different. 64 00:02:32,691 --> 00:02:34,840 What we're gonna do is have both fragments 65 00:02:34,840 --> 00:02:36,243 in the same layout 66 00:02:36,243 --> 00:02:38,985 and hide the one we aren't using. 67 00:02:38,985 --> 00:02:39,833 Before we start creating 68 00:02:39,833 --> 00:02:41,672 I just want to bring some slides up on the screen 69 00:02:41,672 --> 00:02:46,167 to explain specifically what we're gonna be doing here. 70 00:02:46,167 --> 00:02:48,566 When a task's edited in landscape, 71 00:02:48,566 --> 00:02:50,488 we add the AddEditFragment 72 00:02:50,488 --> 00:02:52,600 to the right hand side of the screen. 73 00:02:52,600 --> 00:02:55,315 Clicking the save button will save the task 74 00:02:55,315 --> 00:02:57,281 and then remove the fragment. 75 00:02:57,281 --> 00:02:59,534 I've coloured the two fragments in green and yellow 76 00:02:59,534 --> 00:03:01,880 to make it clear what's being displayed 77 00:03:01,880 --> 00:03:04,297 when we rotate into portrait. 78 00:03:05,509 --> 00:03:06,959 So here we are in portrait 79 00:03:06,959 --> 00:03:09,465 and you could see that the main fragment's hidden 80 00:03:09,465 --> 00:03:11,554 and we show the AddEditFragment. 81 00:03:11,554 --> 00:03:13,649 Clicking save will now save the task 82 00:03:13,649 --> 00:03:15,031 and remove the fragment 83 00:03:15,031 --> 00:03:16,591 just as in landscape 84 00:03:16,591 --> 00:03:19,457 then make the main fragment visible. 85 00:03:19,457 --> 00:03:22,614 The basic operation then looks like this next slide. 86 00:03:22,614 --> 00:03:23,447 You can see that 87 00:03:23,447 --> 00:03:25,130 that would hide the main activity container 88 00:03:25,130 --> 00:03:26,322 when switching to portrait. 89 00:03:26,322 --> 00:03:27,734 We show it again 90 00:03:27,734 --> 00:03:30,698 when the display's rotated back to landscape. 91 00:03:30,698 --> 00:03:33,424 So, when editing a task or adding a new one, 92 00:03:33,424 --> 00:03:36,360 the AddEditFragment gets shown in the right hand pane 93 00:03:36,360 --> 00:03:38,688 and the left hand pane is hidden 94 00:03:38,688 --> 00:03:40,105 when in portrait. 95 00:03:41,445 --> 00:03:43,227 Okay, so that's what we're gonna do 96 00:03:43,227 --> 00:03:44,668 so let's make a start. 97 00:03:44,668 --> 00:03:46,458 I'll go back to Android Studio 98 00:03:46,458 --> 00:03:48,417 and what we need to work on 99 00:03:48,417 --> 00:03:49,900 is our content 100 00:03:49,900 --> 00:03:51,085 ready to modify rather, 101 00:03:51,085 --> 00:03:53,772 our content and it's called main layout. 102 00:03:53,772 --> 00:03:54,944 I've got that on screen because 103 00:03:54,944 --> 00:03:56,795 we were looking an that in the last video. 104 00:03:56,795 --> 00:03:57,628 At the moment 105 00:03:57,628 --> 00:03:59,696 as you can see there on the component tray to the left 106 00:03:59,696 --> 00:04:01,341 it only contains the fragment 107 00:04:01,341 --> 00:04:05,001 but we're going to place two fragments side by side. 108 00:04:05,001 --> 00:04:07,937 One will be the fragment that we've got at the moment 109 00:04:07,937 --> 00:04:11,304 then next to that we're gonna have a FrameLayout container. 110 00:04:11,304 --> 00:04:13,303 There's more than one way to do this as usual 111 00:04:13,303 --> 00:04:14,561 but I'm gonna try to modify 112 00:04:14,561 --> 00:04:16,954 our existing layout in Android Studio. 113 00:04:16,954 --> 00:04:17,981 If things go wrong, 114 00:04:17,981 --> 00:04:19,702 and the layout design is the most error-prone 115 00:04:19,702 --> 00:04:21,178 part of Android Studio, 116 00:04:21,178 --> 00:04:22,968 don't waste hours fighting with it. 117 00:04:22,968 --> 00:04:23,995 Sometimes frankly, 118 00:04:23,995 --> 00:04:27,622 it's just easy to delete the layout and start again. 119 00:04:27,622 --> 00:04:30,050 So let's start by trying to drag a linear layer, 120 00:04:30,050 --> 00:04:33,704 a horizontal one, into the component tray. 121 00:04:33,704 --> 00:04:34,537 In layouts it says 122 00:04:34,537 --> 00:04:37,498 a linear layout, horizontal. 123 00:04:37,498 --> 00:04:39,714 So I'm clicking on linear layout horizontal 124 00:04:39,714 --> 00:04:42,328 and I'm gonna try and drag it into the component tray. 125 00:04:42,328 --> 00:04:44,284 You can see that when I try and do that 126 00:04:44,284 --> 00:04:46,090 we've got this no entry sign. 127 00:04:46,090 --> 00:04:47,819 Now, depending on your version of Android Studio 128 00:04:47,819 --> 00:04:49,988 it might show that you possibly can 129 00:04:49,988 --> 00:04:52,635 drag this successfully into the design. 130 00:04:52,635 --> 00:04:53,876 But when you try to do that 131 00:04:53,876 --> 00:04:55,814 in this case when I release the mouse button, 132 00:04:55,814 --> 00:04:57,579 nothing actually happens. 133 00:04:57,579 --> 00:04:58,738 Now looking over here to the right 134 00:04:58,738 --> 00:04:59,993 we can see that our layout 135 00:04:59,993 --> 00:05:01,829 and it's called height, is set to match 136 00:05:01,829 --> 00:05:03,061 and it's called parent. 137 00:05:03,061 --> 00:05:04,505 So perhaps that could be the problem. 138 00:05:04,505 --> 00:05:07,636 Maybe there's not enough space left to add anything else. 139 00:05:07,636 --> 00:05:10,066 So you can try changing it to wrap and its called content 140 00:05:10,066 --> 00:05:11,177 and having another go 141 00:05:11,177 --> 00:05:12,922 but it still won't work. 142 00:05:12,922 --> 00:05:16,127 Now as I've said previously, don't fight with the tools. 143 00:05:16,127 --> 00:05:18,853 It's possible that I might be able to get this to work 144 00:05:18,853 --> 00:05:21,479 it might work with your version of Android Studio. 145 00:05:21,479 --> 00:05:22,808 But what I'm going to do 146 00:05:22,808 --> 00:05:26,095 is just create a new layout resource file instead. 147 00:05:26,095 --> 00:05:28,214 I will open the project pane again 148 00:05:28,214 --> 00:05:30,763 and create a new layout and then the layout folder 149 00:05:30,763 --> 00:05:31,942 new 150 00:05:31,942 --> 00:05:33,163 layout resource. 151 00:05:33,163 --> 00:05:35,186 Now I'm gonna call this one delete me 152 00:05:35,186 --> 00:05:38,410 as a reminder that I'm gonna delete it later. 153 00:05:38,410 --> 00:05:39,516 And for the root element 154 00:05:39,516 --> 00:05:42,691 we're gonna make that a linear layout. 155 00:05:42,691 --> 00:05:45,096 So it's like linear layout. 156 00:05:45,096 --> 00:05:46,653 You're gonna click on okay. 157 00:05:46,653 --> 00:05:49,945 Then close the project pane again to make a bit more space. 158 00:05:49,945 --> 00:05:51,270 Now if you look over here in the component tray 159 00:05:51,270 --> 00:05:54,155 we can see that the linear layout is set to vertical. 160 00:05:54,155 --> 00:05:55,242 That happens by default 161 00:05:55,242 --> 00:05:57,974 when you create a linear layout like I've done here. 162 00:05:57,974 --> 00:06:00,228 So we need to change the orientation 163 00:06:00,228 --> 00:06:02,016 to horizontal. 164 00:06:02,016 --> 00:06:04,168 There's a couple of other attributes we need to set 165 00:06:04,168 --> 00:06:05,863 on this linear layout. 166 00:06:05,863 --> 00:06:07,728 First, we want our layout 167 00:06:07,728 --> 00:06:10,092 to play nicely with the app bar. 168 00:06:10,092 --> 00:06:11,918 So we have to set the layout 169 00:06:11,918 --> 00:06:13,836 and it's called behaviour attribute 170 00:06:13,836 --> 00:06:15,699 to app bar and it's called scrolling. 171 00:06:15,699 --> 00:06:17,380 and it's called view when it's called behaviour. 172 00:06:17,380 --> 00:06:20,195 So what I can do there is I'm going to extend it out a bit 173 00:06:20,195 --> 00:06:22,229 I could go over there and find it manually 174 00:06:22,229 --> 00:06:24,678 or I could just type in layout and it's called behaviour 175 00:06:24,678 --> 00:06:26,011 or part of that. 176 00:06:27,687 --> 00:06:28,766 There is layout and it's called behaviour. 177 00:06:28,766 --> 00:06:31,749 I'm gonna click on the ellipses there 178 00:06:31,749 --> 00:06:34,845 and then just type in some text like scrolling 179 00:06:34,845 --> 00:06:36,184 and you can see that finds 180 00:06:36,184 --> 00:06:38,205 what we're looking for there and I can double-click that. 181 00:06:38,205 --> 00:06:39,999 And that gets added to a layout 182 00:06:39,999 --> 00:06:42,316 and it is called behaviour attribute. 183 00:06:42,316 --> 00:06:43,368 That's obviously a lot easier than remembering 184 00:06:43,368 --> 00:06:45,490 the full name of the attribute. 185 00:06:45,490 --> 00:06:46,456 I'm not gonna do this 186 00:06:46,456 --> 00:06:48,565 but I suggest you delete that attribute 187 00:06:48,565 --> 00:06:49,835 when we run the app 188 00:06:49,835 --> 00:06:51,800 just so you get to recognise what happens 189 00:06:51,800 --> 00:06:53,359 if you forget to set it. 190 00:06:53,359 --> 00:06:54,687 The other attribute that 191 00:06:54,687 --> 00:06:56,131 we wanna change here is weightSum. 192 00:06:56,131 --> 00:06:59,007 So I'm just gonna search for that. 193 00:06:59,007 --> 00:07:00,682 You could type in weight and there is weightSum 194 00:07:00,682 --> 00:07:01,906 so I'm gonna click into there. 195 00:07:01,906 --> 00:07:04,973 Now we want each fragment to occupy half the screen 196 00:07:04,973 --> 00:07:07,656 so we're going to give them equal weights. 197 00:07:07,656 --> 00:07:10,450 Whatever values we provide for that fragment will be 198 00:07:10,450 --> 00:07:13,066 a proportion of the layout's weightSum. 199 00:07:13,066 --> 00:07:15,390 We've seen that before in the flicker browser app. 200 00:07:15,390 --> 00:07:17,185 So I'm gonna set the weightSum 201 00:07:17,185 --> 00:07:20,069 for this linear layout to two. 202 00:07:20,069 --> 00:07:21,361 Alright so we've done that now 203 00:07:21,361 --> 00:07:24,124 I'm going to just delete that search box 204 00:07:24,124 --> 00:07:25,597 or delete the contents of it 205 00:07:25,597 --> 00:07:27,566 and just go back to our regular attributes. 206 00:07:27,566 --> 00:07:30,622 Next we need to add our left hand fragment. 207 00:07:30,622 --> 00:07:32,011 Go over here to the common category 208 00:07:32,011 --> 00:07:34,284 and it's also in containers, just out of interest 209 00:07:34,284 --> 00:07:35,453 if you're looking for it. 210 00:07:35,453 --> 00:07:36,774 These categories do change so 211 00:07:36,774 --> 00:07:38,462 don't worry if things move around. 212 00:07:38,462 --> 00:07:40,962 So we're gonna grab a fragment 213 00:07:41,970 --> 00:07:43,987 and we can drag it either into the component tray 214 00:07:43,987 --> 00:07:46,899 or just anywhere here and just release it. 215 00:07:46,899 --> 00:07:49,126 And then we need to choose main activity fragment 216 00:07:49,126 --> 00:07:52,003 from this little pop-up that's just come up. 217 00:07:52,003 --> 00:07:53,574 We will need an ID here 218 00:07:53,574 --> 00:07:54,830 because we'll be getting a reference 219 00:07:54,830 --> 00:07:56,652 to this fragment in our code. 220 00:07:56,652 --> 00:07:58,796 And that's needed when we come to hide the fragment. 221 00:07:58,796 --> 00:08:02,213 So I'm gonna call this one main fragment. 222 00:08:03,951 --> 00:08:06,549 The layout with the layout on it that is called height 223 00:08:06,549 --> 00:08:08,765 should both be set to match parent 224 00:08:08,765 --> 00:08:10,380 and we'll also need the layout weight 225 00:08:10,380 --> 00:08:11,513 set to one. 226 00:08:11,513 --> 00:08:12,552 I'm gonna change that 227 00:08:12,552 --> 00:08:13,637 match parent. 228 00:08:13,637 --> 00:08:15,057 Match parent. 229 00:08:15,057 --> 00:08:16,662 And layout weight should be one 230 00:08:16,662 --> 00:08:18,083 which has been set by default. 231 00:08:18,083 --> 00:08:20,028 But if it is not set to that, you would set that. 232 00:08:20,028 --> 00:08:23,042 Remembering that our layout has a weightSum of two 233 00:08:23,042 --> 00:08:25,342 and this fragment will use half of that. 234 00:08:25,342 --> 00:08:26,539 You can see that it doesn't appear 235 00:08:26,539 --> 00:08:28,389 to have had any effect at the moment, 236 00:08:28,389 --> 00:08:30,966 but that's because there's nothing else on the layout. 237 00:08:30,966 --> 00:08:32,066 When we add the other fragment, 238 00:08:32,066 --> 00:08:34,955 this one will only occupy only half the screen. 239 00:08:34,955 --> 00:08:36,854 Now before adding the next fragment, 240 00:08:36,854 --> 00:08:39,111 notice at this point it just has the text fragment 241 00:08:39,111 --> 00:08:40,352 in the middle of the screen. 242 00:08:40,352 --> 00:08:42,318 You can see that clearly over here. 243 00:08:42,318 --> 00:08:44,495 So that's not quite the same as content that has gone made. 244 00:08:44,495 --> 00:08:46,339 We're just putting it up on the screen there. 245 00:08:46,339 --> 00:08:48,589 You could see that it looks pretty different. 246 00:08:48,589 --> 00:08:50,936 And if you have a look of content main, 247 00:08:50,936 --> 00:08:53,241 As you can see this is showing the no task selected 248 00:08:53,241 --> 00:08:55,702 and also a recyclerview. 249 00:08:55,702 --> 00:08:57,819 The reason that's showing there for our content, 250 00:08:57,819 --> 00:08:58,831 and its called main, 251 00:08:58,831 --> 00:09:01,713 is we actually set the tools layout attribute 252 00:09:01,713 --> 00:09:02,565 over here. 253 00:09:02,565 --> 00:09:04,459 You can see that it's set to at layout 254 00:09:04,459 --> 00:09:06,739 forward slash fragment underscore main. 255 00:09:06,739 --> 00:09:08,725 And that's telling the layout designer to use that 256 00:09:08,725 --> 00:09:11,270 layout when displaying the fragment. 257 00:09:11,270 --> 00:09:13,988 Remember that this is the tools layout attribute 258 00:09:13,988 --> 00:09:15,957 so it's not used when we run the app. 259 00:09:15,957 --> 00:09:18,522 These two are to be together and it is part the design now 260 00:09:18,522 --> 00:09:21,799 but it does make the design look neater or better 261 00:09:21,799 --> 00:09:23,229 as you can see here. 262 00:09:23,229 --> 00:09:25,822 So I'm gonna take a copy of that setting 263 00:09:25,822 --> 00:09:29,368 from the tools layout attribute for our 264 00:09:29,368 --> 00:09:30,804 content that's called main. 265 00:09:30,804 --> 00:09:32,590 Go back to that delete me layout 266 00:09:32,590 --> 00:09:36,502 and we're gonna paste it into the same attribute. 267 00:09:36,502 --> 00:09:38,168 And obviously its a lot easier to see 268 00:09:38,168 --> 00:09:39,361 which widget is which 269 00:09:39,361 --> 00:09:41,335 when we add the second one as well when we do that. 270 00:09:41,335 --> 00:09:42,774 For the second component 271 00:09:42,774 --> 00:09:45,133 we're not going to use a fragment widget this time. 272 00:09:45,133 --> 00:09:48,377 Remember that we can't remove a fragment from this widget. 273 00:09:48,377 --> 00:09:49,554 We saw that earlier when we had 274 00:09:49,554 --> 00:09:51,737 both fragments overlaying each other. 275 00:09:51,737 --> 00:09:53,723 So we need to use a different container 276 00:09:53,723 --> 00:09:56,558 to host the AddEditFragment. 277 00:09:56,558 --> 00:09:59,543 Though Google suggests using a FrameLayout for this, 278 00:09:59,543 --> 00:10:03,960 let's quickly bring up some documentation about that. 279 00:10:06,368 --> 00:10:08,142 You can see that in here under the description 280 00:10:08,142 --> 00:10:10,332 You can see it is described as FrameLayout is designed 281 00:10:10,332 --> 00:10:12,579 to block out an area on the screen 282 00:10:12,579 --> 00:10:14,471 to display a single item. 283 00:10:14,471 --> 00:10:16,933 Now that really sounds like what we want 284 00:10:16,933 --> 00:10:19,443 so I'm gonna add one of these to the component tray. 285 00:10:19,443 --> 00:10:21,887 Let's just go back to Android Studio and do that. 286 00:10:21,887 --> 00:10:23,140 We're gonna add this 287 00:10:23,140 --> 00:10:25,132 best below the existing fragment. 288 00:10:25,132 --> 00:10:27,860 So FrameLayout is what we want. 289 00:10:27,860 --> 00:10:28,802 Gonna have a look in layouts 290 00:10:28,802 --> 00:10:29,755 there's our FrameLayout. 291 00:10:29,755 --> 00:10:33,643 I'm gonna add this one just below the main fragment 292 00:10:33,643 --> 00:10:35,476 in the component tray. 293 00:10:37,437 --> 00:10:40,138 You can move over and see that it's been added below that. 294 00:10:40,138 --> 00:10:40,971 And you can see that 295 00:10:40,971 --> 00:10:42,474 that looks okay already 296 00:10:42,474 --> 00:10:43,698 but check that the layouts 297 00:10:43,698 --> 00:10:44,938 and its called weight, is set to one 298 00:10:44,938 --> 00:10:46,686 Which you can see over here that it is set to 299 00:10:46,686 --> 00:10:47,980 for this FrameLayout. 300 00:10:47,980 --> 00:10:49,823 And now both, we're just using the same value 301 00:10:49,823 --> 00:10:51,721 each one occupies half the available width 302 00:10:51,721 --> 00:10:53,347 of the screen. 303 00:10:53,347 --> 00:10:56,111 Wanna also make sure that the layout width and height 304 00:10:56,111 --> 00:10:59,421 for this frame layout are both set to match parent 305 00:10:59,421 --> 00:11:00,787 which in my case they are. 306 00:11:00,787 --> 00:11:02,328 You'll also need an ID. 307 00:11:02,328 --> 00:11:04,518 This frame will hold the task details 308 00:11:04,518 --> 00:11:06,721 where we're adding or editing a task 309 00:11:06,721 --> 00:11:09,299 so for that reason, I'm gonna call this task 310 00:11:09,299 --> 00:11:11,366 and it's called details 311 00:11:11,366 --> 00:11:13,533 and it's called container. 312 00:11:14,745 --> 00:11:16,313 So that wasn't too much work 313 00:11:16,313 --> 00:11:17,936 it was a lot easier than trying to 314 00:11:17,936 --> 00:11:20,112 modify the original layout. 315 00:11:20,112 --> 00:11:21,880 Now of course, we haven't quite finished. 316 00:11:21,880 --> 00:11:23,999 To update content now that's called main, 317 00:11:23,999 --> 00:11:25,434 the easiest way now would be 318 00:11:25,434 --> 00:11:27,406 just to copy the XML from delete me 319 00:11:27,406 --> 00:11:30,022 and paste it in to content that is called main 320 00:11:30,022 --> 00:11:31,812 which effectively replaces all the XML 321 00:11:31,812 --> 00:11:32,888 that's already in there. 322 00:11:32,888 --> 00:11:34,244 So let's go ahead and do that. 323 00:11:34,244 --> 00:11:36,659 So I'm in delete me, text 324 00:11:36,659 --> 00:11:39,656 I'm gonna select the entire contents of delete me, 325 00:11:39,656 --> 00:11:41,382 go back to content main 326 00:11:41,382 --> 00:11:43,127 go in to text 327 00:11:43,127 --> 00:11:44,043 select it all 328 00:11:44,043 --> 00:11:46,275 I could just delete it or I could just select it and paste 329 00:11:46,275 --> 00:11:47,500 which will override it. 330 00:11:47,500 --> 00:11:49,333 Which you can say that I've done there. 331 00:11:49,333 --> 00:11:51,346 You can go back to design now 332 00:11:51,346 --> 00:11:54,577 and you could see that we got that working nicely. 333 00:11:54,577 --> 00:11:55,410 And you can see over there that 334 00:11:55,410 --> 00:11:58,406 we've got the settings that we've defined 335 00:11:58,406 --> 00:12:00,015 for each as well. 336 00:12:00,015 --> 00:12:00,937 And if you just go back and 337 00:12:00,937 --> 00:12:03,931 check out the text again for that, 338 00:12:03,931 --> 00:12:05,264 You'll notice over here 339 00:12:05,264 --> 00:12:06,264 we've got a warning 340 00:12:06,264 --> 00:12:07,116 hover over that 341 00:12:07,116 --> 00:12:10,467 it says set android base aligned equals false 342 00:12:10,467 --> 00:12:13,127 on this element for better performance. 343 00:12:13,127 --> 00:12:14,585 And I can just click in there 344 00:12:14,585 --> 00:12:15,653 and there's a light bulb that comes up 345 00:12:15,653 --> 00:12:17,721 I can click on that 346 00:12:17,721 --> 00:12:20,221 set base aligned equals false. 347 00:12:21,529 --> 00:12:24,503 That there removes that warning. 348 00:12:24,503 --> 00:12:27,452 So we've seen what aligning the base on the widget means 349 00:12:27,452 --> 00:12:29,185 and Android Studio there 350 00:12:29,185 --> 00:12:32,768 was just suggesting that it's not necessary here 351 00:12:32,768 --> 00:12:35,699 and setting the attribute to false just saves work. 352 00:12:35,699 --> 00:12:38,111 The default value for that property is true 353 00:12:38,111 --> 00:12:41,040 but there's no point of android trying to line up 354 00:12:41,040 --> 00:12:43,149 the base aligns of our two fragments. 355 00:12:43,149 --> 00:12:45,881 They contain completely different layouts for one thing, 356 00:12:45,881 --> 00:12:47,962 which makes spending time learning things up 357 00:12:47,962 --> 00:12:49,284 just a waste of time. 358 00:12:49,284 --> 00:12:50,548 That's the reason that we set that 359 00:12:50,548 --> 00:12:52,565 ultimately to false. 360 00:12:52,565 --> 00:12:53,398 You can see what has happened 361 00:12:53,398 --> 00:12:55,462 when I clicked on the light bulb. 362 00:12:55,462 --> 00:12:56,702 That line was out of there 363 00:12:56,702 --> 00:12:57,880 to the XML. 364 00:12:57,880 --> 00:12:59,786 Alright, if I click back to design now 365 00:12:59,786 --> 00:13:01,313 we're actually done now. 366 00:13:01,313 --> 00:13:02,176 And what I can now do is 367 00:13:02,176 --> 00:13:04,409 delete the delete me layout file. 368 00:13:04,409 --> 00:13:05,702 So I'm gonna do that 369 00:13:05,702 --> 00:13:08,535 cos I've copied the contents over. 370 00:13:11,675 --> 00:13:13,483 That's now deleted and in the next video 371 00:13:13,483 --> 00:13:16,259 we'll start getting the two fragments working together. 372 00:13:16,259 --> 00:13:18,829 So I'll see you in the next video.