1 00:00:00,310 --> 00:00:05,400 All that's left is to add a new fragment to handle this new dual-pane layout. 2 00:00:05,400 --> 00:00:10,273 Let's start by creating the layout for this fragment. 3 00:00:10,273 --> 00:00:13,331 And let's name it, fragment_dualpane. 4 00:00:17,969 --> 00:00:21,680 To save time, I've put this layout in the teacher's notes. 5 00:00:21,680 --> 00:00:23,437 So feel free to copy and paste it in. 6 00:00:27,682 --> 00:00:33,850 There's one vertical linear layout, and it contains two horizontal linear layouts. 7 00:00:33,850 --> 00:00:39,270 One, which has two text views to say which side is which, and 8 00:00:39,270 --> 00:00:43,030 the other, which has two frame layouts to serve as placeholders. 9 00:00:44,220 --> 00:00:47,510 When we used the view pager, the view pager took care of 10 00:00:47,510 --> 00:00:52,310 adding our ingredients and directions fragments all by itself. 11 00:00:52,310 --> 00:00:56,160 But now, we need to handle adding these fragments. 12 00:00:56,160 --> 00:00:59,956 So, we've got a leftPlaceholder where we'll put the ingredients fragment, and 13 00:00:59,956 --> 00:01:03,370 the rightPlace holder where we'll put the directions fragment. 14 00:01:04,720 --> 00:01:07,190 Now that we've got our layout, let's create the fragment. 15 00:01:09,700 --> 00:01:13,984 Let's name it DualPaneFragment, and 16 00:01:13,984 --> 00:01:18,797 have it extend the support fragment class. 17 00:01:18,797 --> 00:01:22,969 Then, lets use Ctrl+O to override the on create view method. 18 00:01:27,847 --> 00:01:32,271 And now we need to create our view and initialize our ingredients and 19 00:01:32,271 --> 00:01:33,906 directions fragments. 20 00:01:33,906 --> 00:01:38,479 But since we already do this with our view pager fragment, let's just copy and 21 00:01:38,479 --> 00:01:41,888 paste the top part of view pager fragments on create view. 22 00:01:45,879 --> 00:01:48,364 And paste it back into DualPaneFragment. 23 00:01:54,039 --> 00:01:55,380 And then return view. 24 00:01:57,990 --> 00:02:02,599 Then, let's make these keys the constant from the ViewPagerFragment class. 25 00:02:13,901 --> 00:02:17,645 Since this class and ViewPagerFragment will never co-exist, 26 00:02:17,645 --> 00:02:19,870 we can use the same constant for both. 27 00:02:21,260 --> 00:02:24,707 Next, instead of inflating fragment_viewpager, 28 00:02:24,707 --> 00:02:27,240 let's inflate fragment_dualpane. 29 00:02:28,830 --> 00:02:31,720 And now, just like we do with our activity, 30 00:02:31,720 --> 00:02:36,490 we should check to make sure that a fragment doesn't exist before creating it. 31 00:02:36,490 --> 00:02:40,320 Right below where we set our view, let's add some space, and 32 00:02:40,320 --> 00:02:43,042 first create a variable for our fragment manager, 33 00:02:43,042 --> 00:02:48,500 named fragmentManager. 34 00:02:48,500 --> 00:02:49,695 And let's set it equal to, 35 00:02:49,695 --> 00:02:53,390 getChildFragmentManager because we're in a fragment. 36 00:02:54,630 --> 00:02:59,491 Then, let's add two lines and create a new ingredients fragment variable named, 37 00:02:59,491 --> 00:03:01,977 savedIngredientsFragment. 38 00:03:05,230 --> 00:03:10,573 And let's set it equal to fragmentManager.findFragmentByTag, 39 00:03:10,573 --> 00:03:15,173 and let's pass in, INGREDIENTS_FRAGMENT in all caps. 40 00:03:18,952 --> 00:03:21,520 And then I'll split this into two lines so it's easier to see. 41 00:03:23,550 --> 00:03:27,580 Then lets use Alt-Enter to create the constant and 42 00:03:27,580 --> 00:03:29,940 set it equal to ingredients fragment. 43 00:03:32,520 --> 00:03:37,280 Then, let's use Alt-Enter again to cast the found fragment 44 00:03:37,280 --> 00:03:38,460 as an ingredients fragment. 45 00:03:39,710 --> 00:03:43,151 On the next line, let's check if savedIngredientsFragment is null. 46 00:03:49,389 --> 00:03:51,590 And if it is, we should create a new one. 47 00:03:52,640 --> 00:03:58,580 So let's copy this bit except for the final keyword, and paste it in. 48 00:04:00,150 --> 00:04:03,900 Then, we just need to add this new fragment to our layout 49 00:04:03,900 --> 00:04:05,370 inside the left placeholder. 50 00:04:06,580 --> 00:04:09,690 Right below where we set the arguments inside our if statement. 51 00:04:09,690 --> 00:04:16,460 Let's begin a transaction using the fragmentManager, beginTransaction. 52 00:04:17,700 --> 00:04:20,460 Then let's add a call to add on a new line. 53 00:04:20,460 --> 00:04:26,495 Because I'll run out of space and pass in the ID of the leftPlaceholder. 54 00:04:30,370 --> 00:04:31,730 Our new ingredientsFragment. 55 00:04:33,350 --> 00:04:34,993 And the corresponding tag. 56 00:04:39,496 --> 00:04:47,310 Finally, just tack on a call to commit, And there we go. 57 00:04:47,310 --> 00:04:51,760 We'll only be adding the fragment if it truly doesn't exist. 58 00:04:51,760 --> 00:04:54,610 Now let's do the same for our directions fragment. 59 00:04:54,610 --> 00:04:57,538 Let's copy all of this ingredientsFragment section. 60 00:05:00,507 --> 00:05:02,220 And paste it right below itself. 61 00:05:04,590 --> 00:05:08,050 Then, let's change ingredients to directions. 62 00:05:08,050 --> 00:05:09,650 But check this out. 63 00:05:09,650 --> 00:05:14,100 Let's highlight the section we just pasted and 64 00:05:14,100 --> 00:05:18,050 hit Command or Ctrl-R to bring up the replace menu. 65 00:05:19,240 --> 00:05:21,970 Then, in the top box, type ingredients. 66 00:05:24,570 --> 00:05:26,920 And in the bottom box, type directions. 67 00:05:28,580 --> 00:05:35,180 Then, make sure to check the preserve case check box and then hit replace all. 68 00:05:38,180 --> 00:05:39,200 And now, 69 00:05:39,200 --> 00:05:44,950 all instances of ingredients inside our selection have been changed to directions. 70 00:05:44,950 --> 00:05:48,490 Now let's use Alt-Enter to create the directions fragment tag. 71 00:05:51,270 --> 00:05:53,835 And set it equal to directions_fragment. 72 00:05:57,530 --> 00:06:00,310 And finally, for the directions_fragment. 73 00:06:00,310 --> 00:06:03,571 Let's change leftPlaceholder to rightPlaceholder. 74 00:06:07,617 --> 00:06:09,761 And let's delete this junk at the bottom. 75 00:06:09,761 --> 00:06:12,332 We only copied it over to use as a reference. 76 00:06:17,829 --> 00:06:20,660 Now our DualPaneFragment is ready for use. 77 00:06:20,660 --> 00:06:21,180 Great job. 78 00:06:22,870 --> 00:06:24,240 Over a main activity. 79 00:06:24,240 --> 00:06:27,010 Let's get back to that on grid recipe selected method. 80 00:06:30,000 --> 00:06:33,930 Let's start by copying what we've got in onListRecipesSelected. 81 00:06:33,930 --> 00:06:37,020 And pasting it down here in onGridRecipesSelected. 82 00:06:40,590 --> 00:06:46,490 Then let's change ViewPagerFragment to DualPaneFragment. 83 00:06:51,180 --> 00:06:53,365 And that should do it. 84 00:06:53,365 --> 00:06:55,644 Let's test the app and see what we've got. 85 00:07:05,307 --> 00:07:06,630 Looks great. 86 00:07:09,271 --> 00:07:13,079 But it looks like we forgot to update the title when navigating back from 87 00:07:13,079 --> 00:07:15,170 DualPaneFragment. 88 00:07:15,170 --> 00:07:19,935 Let's fix that by copying the onStop method from ViewPagerFragment, and 89 00:07:19,935 --> 00:07:22,287 pasting it into DualPaneFragment. 90 00:07:30,979 --> 00:07:32,589 Now, let's run the app again. 91 00:07:38,902 --> 00:07:43,360 And if we navigate to a recipe, and then navigate back. 92 00:07:43,360 --> 00:07:44,500 We get the correct title. 93 00:07:46,330 --> 00:07:47,240 You did it. 94 00:07:47,240 --> 00:07:50,880 You fought your way through the fragment managers, defeated the view holders, and 95 00:07:50,880 --> 00:07:53,120 slayed the tablet layout. 96 00:07:53,120 --> 00:07:56,130 Fragments are definitely not the easiest part of Android. 97 00:07:56,130 --> 00:07:57,230 But when used well, 98 00:07:57,230 --> 00:08:01,180 they can make it a lot easier to reuse certain parts of your layout. 99 00:08:01,180 --> 00:08:03,010 And who doesn't love to reuse their code.