Enter the Grid6:28 with Ben Deitch
Lists don't look so good on tablets. For the tablet layout, let's use a grid!
Now we can tell whether a user is on a tablet or not. 0:00 Let's get back to implementing the grid fragment. 0:03 After all, the tablet didn't look so good with the list. 0:06 Let's start by creating a new layout for our grid item. 0:09 New layout resource file. 0:15 And let's name it, grid_item. 0:18 But rather than type this all out, 0:25 I have included this layout down below in the teachers notes. 0:27 So let's copy and paste that in. 0:31 And there we go. 0:39 It's a 200dp by 200dp square and it shows the image on top and the text on bottom. 0:41 Great. 0:50 Now let's move on to creating our GridFragment. 0:51 Let's create a new class and name it GridFragment. 0:55 And make it extend to the support fragment class. 1:02 This is the point where we'd usually need to create a new layout file, but since 1:09 both are list nd our grid will be recycler views, they can both use the same layout, 1:14 fragment list which we should now rename to fragment recycler view. 1:20 Shift F six fragment recycler view. 1:29 And let's also change the ID to no longer say list. 1:35 Next, let's head over to our list fragment class and 1:45 copy everything after the word fragment. 1:50 Then let's paste this into our grid fragment class to give us a head start. 1:55 Now, let's look through this code and see what needs to be changed. 2:04 First, since we want our activity to know the difference between a grid click, and 2:08 a list click, 2:12 let's rename the On List Recipe Selected method to On Grid Recipe Selected. 2:14 Then, let's head over to our activity. 2:21 And make it implement our grid fragments new on Recipe selected listener. 2:23 Bring this to a new line so we can see it better. 2:33 At a comma. 2:37 Grid fragment dot on recipe selected interface. 2:39 Then let's use alt enter to implement on grid recipes selected. 2:46 We'll get back to this part later. 2:53 For now, let's retreat to our grid fragment class and 2:55 on create view, you will need to use a different adapter. 2:59 So let's replace ListAdapter with GridAdapter. 3:04 And change the variable name, too. 3:14 Shift + F6, GridAdapter. 3:15 Also, instead of a linear layout manager we should be using a grid layout manager. 3:19 And when we use a grid layout manager we need to tell it how many columns to show. 3:28 So for the second parameter let's pass in num columns. 3:34 Now I know none of these things exist yet but this does give us a nice road map. 3:45 Let's start at the top with grid adapter and use Alt enter to create the class. 3:50 But before we go any further, let's take a look at our list adapter class and 3:59 see how much of this we can reuse. 4:04 Since we want our activity to know the difference between a list and 4:09 a grid click, we'll need two different interfaces. 4:12 So we can't reuse the interface. 4:16 And we also can't reuse the constructor. 4:18 Furthermore, we carry reuse the layout ID because a great item and 4:21 a list item look different. 4:26 And we'll also lose the ability to use our listener and 4:28 the on click method of our view holder. 4:31 But that's it, other than those three things, are listed after and or 4:36 grid adapter are exactly the same. 4:40 So instead of repeating a lot of this code, 4:43 let's see if we can do something a bit better. 4:46 Let's start by copying the list adapter class and 4:49 the project pane And pasting it back in. 4:52 This gives us a chance to rename it. 4:58 So let's call it, recycler adapter, and now 5:01 we've got a good head start on creating a common base class for our adapters. 5:07 Now we just need to remember the three things that make a grid adapter 5:12 different from a list adapter. 5:15 First was the listener. 5:17 Let's get rid of that, along with the constructor. 5:19 Second was the layout ID. 5:23 Let's delete it and then replace it with a method called Get layout ID. 5:25 And since it's kind of important that we have a layout ID. 5:35 Let's make this class. 5:39 Abstract. 5:40 And then use alt enter. 5:43 To create get layout ID. 5:45 As an abstract method. 5:47 This way. 5:50 Any class that extends recycler adapter. 5:51 Will need to provide a layout ID. 5:54 The third difference was this error down here. 5:57 Since we'll be leaving the listener up to whoever extends us, 6:00 let's also leave the on click method up to them. 6:04 Let's do that by just getting rid of the M listener part and the word list. 6:08 >> [SOUND] >> Then let's use alt enter to create on 6:12 recipe selected as an abstract method. 6:17 Viola! 6:22 The burden of implementing onRecipeSelected 6:23 has been passed on to the children. 6:26
You need to sign up for Treehouse in order to download course files.Sign up