1 00:00:05,430 --> 00:00:07,170 So we've nearly completed the changes 2 00:00:07,170 --> 00:00:09,860 to display our fragments side by side. 3 00:00:09,860 --> 00:00:11,650 At the moment though, in main activity, 4 00:00:11,650 --> 00:00:13,300 we go back to that now, 5 00:00:13,300 --> 00:00:17,590 we've got this mTwoPane variable that's set to false. 6 00:00:17,590 --> 00:00:20,470 So we need to change the code to correctly reflect 7 00:00:20,470 --> 00:00:22,430 our device orientation. 8 00:00:22,430 --> 00:00:23,880 So the first change we need to make 9 00:00:23,880 --> 00:00:25,690 is in our onCreate function. 10 00:00:25,690 --> 00:00:27,960 So let's go ahead and do that. 11 00:00:27,960 --> 00:00:31,120 I'm gonna start by typing mTwoPane 12 00:00:31,120 --> 00:00:36,120 is equal to resources dot configuration 13 00:00:37,000 --> 00:00:42,000 dot orientation is equal to configuration, 14 00:00:42,960 --> 00:00:45,650 this time with a capital C, dot orientation 15 00:00:45,650 --> 00:00:47,090 underscore landscape. 16 00:00:47,090 --> 00:00:49,140 So we're getting the current configuration 17 00:00:49,140 --> 00:00:50,930 from the activities resource 18 00:00:50,930 --> 00:00:52,660 then we check the orientation. 19 00:00:52,660 --> 00:00:55,450 That's Configuration.ORIENTATION_LANDSCAPE, 20 00:00:55,450 --> 00:00:57,360 the value that's returned, in other words. 21 00:00:57,360 --> 00:00:59,340 Then that means we're running in landscape, 22 00:00:59,340 --> 00:01:01,000 otherwise we're in portrait. 23 00:01:01,000 --> 00:01:02,580 There's a bit more work to do there 24 00:01:02,580 --> 00:01:06,520 if you're gonna do it to fully support large tablet displays 25 00:01:06,520 --> 00:01:09,210 but that's enough to see how this all works. 26 00:01:09,210 --> 00:01:12,240 Okay, so we now know the screen orientation. 27 00:01:12,240 --> 00:01:14,556 The next step is to decide if we should showing in 28 00:01:14,556 --> 00:01:16,570 AddEditFragment or not. 29 00:01:16,570 --> 00:01:18,510 Remember that the activity gets destroyed 30 00:01:18,510 --> 00:01:21,760 and recreated when the device is rotated. 31 00:01:21,760 --> 00:01:24,070 If we were editing our task when that happens, 32 00:01:24,070 --> 00:01:27,810 we wanna continue editing it after the rotation. 33 00:01:27,810 --> 00:01:30,640 Android will reattach any fragments to our activity 34 00:01:30,640 --> 00:01:34,910 automatically when it destroys and recreates the activity. 35 00:01:34,910 --> 00:01:38,680 All we have to do is check if the fragment exists, 36 00:01:38,680 --> 00:01:41,650 and adjust the display for a new orientation. 37 00:01:41,650 --> 00:01:42,940 So let's go write the code for that. 38 00:01:42,940 --> 00:01:44,070 Go ahead and do that. 39 00:01:44,070 --> 00:01:46,770 We're gonna also create this in the onCreate function. 40 00:01:47,780 --> 00:01:50,290 And underneath this line 2 get our fragment and 41 00:01:50,290 --> 00:01:53,703 I'm just gonna copy that from our onSaveClicked function, 42 00:01:54,620 --> 00:01:57,360 save a bit of typing, we'll paste that in there 43 00:01:57,360 --> 00:01:59,370 into our onCreate function. 44 00:01:59,370 --> 00:02:03,093 So finding our fragment, if it's not equal to null, 45 00:02:06,890 --> 00:02:08,340 open the code block, 46 00:02:08,340 --> 00:02:10,090 so firstly determined at this point, 47 00:02:10,090 --> 00:02:12,560 if there was an existing to fragment to edit our task, 48 00:02:12,560 --> 00:02:15,330 we then need to make sure the panes are set up correctly. 49 00:02:15,330 --> 00:02:17,230 So let's add a comment to that effect. 50 00:02:27,390 --> 00:02:29,513 Or are set rather set up set correctly. 51 00:02:32,340 --> 00:02:37,340 To do that, we're gonna do task_details_container.visibility 52 00:02:37,956 --> 00:02:39,883 equals View.VISIBLE, 53 00:02:41,540 --> 00:02:43,010 then we wanna hide the left pane 54 00:02:43,010 --> 00:02:44,960 if it's in single pane view, 55 00:02:44,960 --> 00:02:46,610 click the comment to that effect. 56 00:02:52,400 --> 00:02:53,730 Alright, so, we'll do a test for that. 57 00:02:53,730 --> 00:02:58,400 So mainFragment.view safe call operator 58 00:02:58,400 --> 00:03:01,380 dot visibility is equal to 59 00:03:01,380 --> 00:03:06,380 if(mtwoPane) view.VISIBLE else View.GONE, 60 00:03:10,350 --> 00:03:12,030 then outside of that, after the else, 61 00:03:12,030 --> 00:03:14,680 after the test to see that fragment is not equal to null, 62 00:03:14,680 --> 00:03:16,000 in other words if it is null, 63 00:03:16,000 --> 00:03:17,430 put an else there, we're gonna put 64 00:03:17,430 --> 00:03:21,310 task_details_container.visibility 65 00:03:22,690 --> 00:03:24,780 equals and do another test here, 66 00:03:24,780 --> 00:03:28,000 so if(mTWOPane), this time we're gonna do a 67 00:03:28,000 --> 00:03:33,000 View.INVISIBLE else View.GONE. 68 00:03:36,400 --> 00:03:41,400 And we also wanna add mainFragment.view safe call operator 69 00:03:41,760 --> 00:03:45,703 dot visibility is equal to view.VISIBLE. 70 00:03:47,090 --> 00:03:49,070 So hopefully, that should be pretty straightforward. 71 00:03:49,070 --> 00:03:52,320 If the fragment exists, we need to show the frame layout. 72 00:03:52,320 --> 00:03:55,400 We also need to hide the main fragment to the left hand side 73 00:03:55,400 --> 00:03:57,080 in single pane mode. 74 00:03:57,080 --> 00:03:59,450 If there's no fragment for adding or editing, 75 00:03:59,450 --> 00:04:02,220 we need to hide the right hand frame layout 76 00:04:02,220 --> 00:04:04,420 and make sure the main frame layout is visible. 77 00:04:04,420 --> 00:04:05,420 We need to do a similar thing 78 00:04:05,420 --> 00:04:08,580 in task edit request, our function. 79 00:04:08,580 --> 00:04:10,070 We don't have to worry about the case 80 00:04:10,070 --> 00:04:11,620 where our fragment's null though 81 00:04:11,620 --> 00:04:13,890 because we're getting a new incidence of the fragment 82 00:04:13,890 --> 00:04:16,300 and that's down in the task edit request function. 83 00:04:16,300 --> 00:04:19,220 What we do need are the two lines with their comments 84 00:04:19,220 --> 00:04:21,480 from inside this if block. 85 00:04:21,480 --> 00:04:23,430 Rather than duplicating the code, 86 00:04:23,430 --> 00:04:26,380 we're gonna cut those lines out of this onCreate function 87 00:04:26,380 --> 00:04:28,950 and replace them with a call to a function 88 00:04:28,950 --> 00:04:31,420 we're about to write called showEditPane, 89 00:04:31,420 --> 00:04:32,970 So it's these three lines here, 90 00:04:34,800 --> 00:04:36,010 I'm going to cut those 91 00:04:37,070 --> 00:04:39,917 and then replace that with a call to showEditPane, 92 00:04:40,780 --> 00:04:42,930 just the function we're about to write now. 93 00:04:46,570 --> 00:04:47,617 Let's go ahead and write that. 94 00:04:47,617 --> 00:04:52,180 That's gonna be private fun showEditPane 95 00:04:52,180 --> 00:04:55,223 parentheses, I'm gonna paste in that code. 96 00:04:56,160 --> 00:04:58,260 Now that I've done that, we can actually move down 97 00:04:58,260 --> 00:05:00,630 to our task edit request method 98 00:05:02,110 --> 00:05:04,230 and we can actually make a call there as well, 99 00:05:04,230 --> 00:05:07,917 after the commit to showEditPane. 100 00:05:10,390 --> 00:05:13,180 Alright, so that swaps our AddEditFragment in and out 101 00:05:13,180 --> 00:05:15,030 when we add or edit a task 102 00:05:15,030 --> 00:05:17,590 and make sure that the appropriate panes are visible 103 00:05:17,590 --> 00:05:18,860 when they need to be. 104 00:05:18,860 --> 00:05:21,270 When the device is rotated, we may already 105 00:05:21,270 --> 00:05:22,910 have a fragment for editing 106 00:05:22,910 --> 00:05:25,542 and that's why we've got the code in onCreate 107 00:05:25,542 --> 00:05:26,743 that I've added up here. 108 00:05:27,620 --> 00:05:28,980 So notice the slight difference 109 00:05:28,980 --> 00:05:31,430 between using onCreate in the activity 110 00:05:31,430 --> 00:05:32,920 and using it in the fragment. 111 00:05:32,920 --> 00:05:34,680 Now here in the activity, 112 00:05:34,680 --> 00:05:38,670 onCreate sets or calls rather, setContentView 113 00:05:38,670 --> 00:05:41,370 to inflate the layout and you can see that code 114 00:05:41,370 --> 00:05:43,210 on line 24. 115 00:05:43,210 --> 00:05:45,500 Basically just after the super call there. 116 00:05:45,500 --> 00:05:47,410 That means that we can access widgets 117 00:05:47,410 --> 00:05:50,760 from the layout here, as long as we do it after the call 118 00:05:50,760 --> 00:05:53,090 to setContentView, of course. 119 00:05:53,090 --> 00:05:55,120 But over in the fragment, we go back to that again 120 00:05:55,120 --> 00:05:57,000 to our AddEditFragment, 121 00:05:57,000 --> 00:05:59,660 we can see that the layout here is inflated 122 00:05:59,660 --> 00:06:03,310 in our onCreateView function on line 42. 123 00:06:03,310 --> 00:06:05,930 That's basically inflated in the onCreateView function 124 00:06:05,930 --> 00:06:07,550 not in onCreate. 125 00:06:07,550 --> 00:06:10,900 Alright, so, we can now run the app to test that it works, 126 00:06:10,900 --> 00:06:12,400 so let's go ahead and do that. 127 00:06:13,690 --> 00:06:15,500 And I'm also gonna filter the Logcat, 128 00:06:15,500 --> 00:06:17,450 so let's open the Logcat and filter it. 129 00:06:19,360 --> 00:06:21,510 And I'm gonna filter it on AddEditFragment. 130 00:06:23,360 --> 00:06:25,000 I'm gonna bring up the emulator 131 00:06:25,000 --> 00:06:26,820 and we wanna make sure that that's in landscape mode, 132 00:06:26,820 --> 00:06:29,270 which is currently set to it as you can see there. 133 00:06:29,270 --> 00:06:31,060 So on the left hand side of the screen, 134 00:06:31,060 --> 00:06:32,720 we've got our main fragment. 135 00:06:32,720 --> 00:06:34,830 So that's where the list of tasks will appear 136 00:06:34,830 --> 00:06:38,140 when we write the adaptor for the recycler view. 137 00:06:38,140 --> 00:06:40,430 So when I come over here and click on the plus button 138 00:06:40,430 --> 00:06:43,320 to add a new task, the AddEditFragment is added 139 00:06:43,320 --> 00:06:45,810 to the frame layout and the frame set's now visible 140 00:06:45,810 --> 00:06:46,860 as you can see there. 141 00:06:48,120 --> 00:06:49,850 And moving that down, in the Logcat 142 00:06:49,850 --> 00:06:52,280 we can see that the fragment function's been called. 143 00:06:52,280 --> 00:06:53,900 So onAttach is called when the fragment's 144 00:06:53,900 --> 00:06:55,410 attached to the activity, 145 00:06:55,410 --> 00:06:57,369 then we can see it's onCreate, 146 00:06:57,369 --> 00:06:59,680 and onCreateView functions are also called. 147 00:06:59,680 --> 00:07:01,730 Remember that onCreateView is the function 148 00:07:01,730 --> 00:07:04,440 that inflates the layout which is why we can access 149 00:07:04,440 --> 00:07:07,880 the fragment's widgets in the onCreate function. 150 00:07:07,880 --> 00:07:10,650 So, I'm gonna add a comment to the Logcat down here. 151 00:07:10,650 --> 00:07:11,483 Portrait. 152 00:07:13,790 --> 00:07:17,890 Then we're going to then rotate the emulator 153 00:07:17,890 --> 00:07:19,090 back into portrait mode. 154 00:07:25,563 --> 00:07:27,820 So that calls the activity to be destroyed 155 00:07:27,820 --> 00:07:30,390 so the fragment detaches from the activity. 156 00:07:30,390 --> 00:07:33,263 And you can see we got onDetach starts on this line here. 157 00:07:35,150 --> 00:07:36,300 But at the moment, the fragment 158 00:07:36,300 --> 00:07:38,640 also gets destroyed and recreated. 159 00:07:38,640 --> 00:07:41,100 But we'll actually see a way to prevent that later. 160 00:07:41,100 --> 00:07:44,060 For now though, both the activity and the fragment's 161 00:07:44,060 --> 00:07:46,890 are destroyed then recreated. 162 00:07:46,890 --> 00:07:49,340 So you can see there, the fragment's onAttach, 163 00:07:49,340 --> 00:07:52,803 onCreate, and onCreateView function's being called again. 164 00:07:54,380 --> 00:07:56,700 Alright, so our code to hide the main fragment 165 00:07:56,700 --> 00:07:58,250 now seems to be working. 166 00:07:58,250 --> 00:07:59,910 We can only see the details on the screen there 167 00:07:59,910 --> 00:08:01,430 as you can see in portrait mode. 168 00:08:01,430 --> 00:08:04,020 Before rotating again, I'm gonna enter some texts. 169 00:08:04,020 --> 00:08:06,240 So, for task name I'm gonna go with fragment 170 00:08:07,360 --> 00:08:10,433 and we're gonna use testing fragments for the description. 171 00:08:12,250 --> 00:08:15,140 The Android framework takes care of restoring the contents 172 00:08:15,140 --> 00:08:18,240 of the edit texts in the fragment, 173 00:08:18,240 --> 00:08:20,750 just like it did for the activity in earlier sections, 174 00:08:20,750 --> 00:08:22,843 so I'm gonna rotate back into landscape. 175 00:08:27,700 --> 00:08:29,780 You can see that the text is still there. 176 00:08:29,780 --> 00:08:32,929 So fragments receive a bundle when they're recreated. 177 00:08:32,929 --> 00:08:35,190 They also have an onSaveInstantState function 178 00:08:35,190 --> 00:08:36,659 just like activities do. 179 00:08:36,659 --> 00:08:38,760 If we had other values for storing the bundle, 180 00:08:38,760 --> 00:08:40,740 the process is exactly the same, 181 00:08:40,740 --> 00:08:42,760 as we've seen, for an activity. 182 00:08:42,760 --> 00:08:45,270 Alright, so we're in landscape at the moment. 183 00:08:45,270 --> 00:08:48,610 The final thing to test is the fragment being removed. 184 00:08:48,610 --> 00:08:50,860 Now, at the moment, that's all our save button does. 185 00:08:50,860 --> 00:08:53,580 We haven't written the code to save those details yet. 186 00:08:53,580 --> 00:08:56,230 So I'm gonna add another comment down here in the Logcat. 187 00:08:56,230 --> 00:08:57,063 Saving. 188 00:08:59,270 --> 00:09:00,950 And go back to our emulator 189 00:09:00,950 --> 00:09:02,800 and I'm gonna tap on the save button. 190 00:09:04,270 --> 00:09:06,930 So you saw that the fragment got removed from the screen, 191 00:09:06,930 --> 00:09:08,990 and the Logcat shows that it was 192 00:09:08,990 --> 00:09:10,870 detached from the activity as well. 193 00:09:10,870 --> 00:09:12,520 We're going back to portrait now. 194 00:09:14,160 --> 00:09:16,460 We need to do the same test for portrait mode. 195 00:09:18,350 --> 00:09:21,350 So you wanna tap the plus button first to create a fragment. 196 00:09:23,120 --> 00:09:26,880 Then, another comment there, saving again in Logcat. 197 00:09:26,880 --> 00:09:28,570 Back to our emulator. 198 00:09:28,570 --> 00:09:30,203 And I'm gonna tap on save. 199 00:09:31,560 --> 00:09:32,660 You can see again that the fragment 200 00:09:32,660 --> 00:09:34,390 got removed from the screen, 201 00:09:34,390 --> 00:09:37,750 and also the Logcat has confirmed that it's been detached, 202 00:09:37,750 --> 00:09:40,480 the fragment from the activity. 203 00:09:40,480 --> 00:09:42,540 So that looks good, the fragment's removed, 204 00:09:42,540 --> 00:09:46,140 and the main fragment widget becomes visible again. 205 00:09:46,140 --> 00:09:47,730 We should repeat that test from rotating 206 00:09:47,730 --> 00:09:49,230 from landscape to portrait, 207 00:09:49,230 --> 00:09:52,320 to check that the main fragment is correctly displayed. 208 00:09:52,320 --> 00:09:53,153 So let's go ahead and do that. 209 00:09:53,153 --> 00:09:55,053 So I go back to landscape mode there. 210 00:10:00,170 --> 00:10:04,170 Tap on the plus button to display the AddEditFragment. 211 00:10:04,170 --> 00:10:06,293 Next, we wanna rotate back into portrait. 212 00:10:07,830 --> 00:10:09,500 So that looks fine, we can still see that 213 00:10:09,500 --> 00:10:13,300 the task details are showing on the screen there. 214 00:10:13,300 --> 00:10:16,520 Tap on the save button and the fragment's removed. 215 00:10:16,520 --> 00:10:18,820 That also appears to be working fine. 216 00:10:18,820 --> 00:10:20,710 Alright, so let's stop the video here. 217 00:10:20,710 --> 00:10:22,070 In the next one, we're gonna start looking 218 00:10:22,070 --> 00:10:24,070 at the fragment lifecycle. 219 00:10:24,070 --> 00:10:27,080 Once we've seen how that relates to the activity lifecycle, 220 00:10:27,080 --> 00:10:29,500 we'll finish off the code to swap fragments, 221 00:10:29,500 --> 00:10:32,610 by adding support for the back and up buttons. 222 00:10:32,610 --> 00:10:34,310 So I'll see you in the next video.