Side by Side

All that's left is to add a new fragment to handle this new dual-pane layout. 0:00 Let's start by creating the layout for this fragment. 0:05 And let's name it, fragment_dualpane. 0:10 To save time, I've put this layout in the teacher's notes. 0:17 So feel free to copy and paste it in. 0:21 There's one vertical linear layout, and it contains two horizontal linear layouts. 0:27 One, which has two text views to say which side is which, and 0:33 the other, which has two frame layouts to serve as placeholders. 0:39 When we used the view pager, the view pager took care of 0:44 adding our ingredients and directions fragments all by itself. 0:47 But now, we need to handle adding these fragments. 0:52 So, we've got a leftPlaceholder where we'll put the ingredients fragment, and 0:56 the rightPlace holder where we'll put the directions fragment. 0:59 Now that we've got our layout, let's create the fragment. 1:04 Let's name it DualPaneFragment, and 1:09 have it extend the support fragment class. 1:13 Then, lets use Ctrl+O to override the on create view method. 1:18 And now we need to create our view and initialize our ingredients and 1:27 directions fragments. 1:32 But since we already do this with our view pager fragment, let's just copy and 1:33 paste the top part of view pager fragments on create view. 1:38 And paste it back into DualPaneFragment. 1:45 And then return view. 1:54 Then, let's make these keys the constant from the ViewPagerFragment class. 1:57 Since this class and ViewPagerFragment will never co-exist, 2:13 we can use the same constant for both. 2:17 Next, instead of inflating fragment_viewpager, 2:21 let's inflate fragment_dualpane. 2:24 And now, just like we do with our activity, 2:28 we should check to make sure that a fragment doesn't exist before creating it. 2:31 Right below where we set our view, let's add some space, and 2:36 first create a variable for our fragment manager, 2:40 named fragmentManager. 2:43 And let's set it equal to, 2:48 getChildFragmentManager because we're in a fragment. 2:49 Then, let's add two lines and create a new ingredients fragment variable named, 2:54 savedIngredientsFragment. 2:59 And let's set it equal to fragmentManager.findFragmentByTag, 3:05 and let's pass in, INGREDIENTS_FRAGMENT in all caps. 3:10 And then I'll split this into two lines so it's easier to see. 3:18 Then lets use Alt-Enter to create the constant and 3:23 set it equal to ingredients fragment. 3:27 Then, let's use Alt-Enter again to cast the found fragment 3:32 as an ingredients fragment. 3:37 On the next line, let's check if savedIngredientsFragment is null. 3:39 And if it is, we should create a new one. 3:49 So let's copy this bit except for the final keyword, and paste it in. 3:52 Then, we just need to add this new fragment to our layout 4:00 inside the left placeholder. 4:03 Right below where we set the arguments inside our if statement. 4:06 Let's begin a transaction using the fragmentManager, beginTransaction. 4:09 Then let's add a call to add on a new line. 4:17 Because I'll run out of space and pass in the ID of the leftPlaceholder. 4:20 Our new ingredientsFragment. 4:30 And the corresponding tag. 4:33 Finally, just tack on a call to commit, And there we go. 4:39 We'll only be adding the fragment if it truly doesn't exist. 4:47 Now let's do the same for our directions fragment. 4:51 Let's copy all of this ingredientsFragment section. 4:54 And paste it right below itself. 5:00 Then, let's change ingredients to directions. 5:04 But check this out. 5:08 Let's highlight the section we just pasted and 5:09 hit Command or Ctrl-R to bring up the replace menu. 5:14 Then, in the top box, type ingredients. 5:19 And in the bottom box, type directions. 5:24 Then, make sure to check the preserve case check box and then hit replace all. 5:28 And now, 5:38 all instances of ingredients inside our selection have been changed to directions. 5:39 Now let's use Alt-Enter to create the directions fragment tag. 5:44 And set it equal to directions_fragment. 5:51 And finally, for the directions_fragment. 5:57 Let's change leftPlaceholder to rightPlaceholder. 6:00 And let's delete this junk at the bottom. 6:07 We only copied it over to use as a reference. 6:09 Now our DualPaneFragment is ready for use. 6:17 Great job. 6:20 Over a main activity. 6:22 Let's get back to that on grid recipe selected method. 6:24 Let's start by copying what we've got in onListRecipesSelected. 6:30 And pasting it down here in onGridRecipesSelected. 6:33 Then let's change ViewPagerFragment to DualPaneFragment. 6:40 And that should do it. 6:51 Let's test the app and see what we've got. 6:53 Looks great. 7:05 But it looks like we forgot to update the title when navigating back from 7:09 DualPaneFragment. 7:13 Let's fix that by copying the onStop method from ViewPagerFragment, and 7:15 pasting it into DualPaneFragment. 7:19 Now, let's run the app again. 7:30 And if we navigate to a recipe, and then navigate back. 7:38 We get the correct title. 7:43 You did it. 7:46 You fought your way through the fragment managers, defeated the view holders, and 7:47 slayed the tablet layout. 7:50 Fragments are definitely not the easiest part of Android. 7:53 But when used well, 7:56 they can make it a lot easier to reuse certain parts of your layout. 7:57 And who doesn't love to reuse their code. 8:01