Adapt Together5:19 with Ben Deitch
In this video we'll finish out our GridFragment!
All right. 0:00 Now that we've created a common base class for our adapters, 0:01 let's head over to our list adapter class and update it to extend recycler adapter. 0:04 >> [SOUND] >> Then 0:09 let's use alt enter to implement the methods we just created. 0:17 And then, let's move them right above the onCreateViewHolder method. 0:25 Cut, getLayoutId. 0:28 Put it up here and do the same with onRecipeSelected. 0:36 Then to finish, get layout ID. 0:46 Let's return the layout ID. 0:49 Founded on Create a view holder. 0:50 And to finish on Recipe selected. 0:58 Let's just copy what's in the on click method and paste it up here. 1:00 And then change Mindex to Index. 1:11 Then, let's delete everything below the on Recipe selected method 1:16 except for the last curly brace. 1:23 And now, we're only left with the three things that make our list adapter unique. 1:28 The list fragment listener, 1:32 the layout ID, and what happens when we pick a recipe. 1:36 Finally let's hit control alt O to clean up the imports. 1:42 Looking good. 1:49 Now for the final piece of the puzzle, let's finish up our GridAdapter. 1:50 First, copy everything in the ListAdapter class, starting with extends. 1:57 Then, over in our GridAdapter class, place extends over the brackets. 2:06 Next, Let's update list fragment to be grid fragment. 2:11 And list adapter to be grid adapter. 2:21 Lastly, let's change get layout ID to return a grid item instead of a list item. 2:27 And change on list recipe selected to on grid recipes selected. 2:34 That takes care of our grid adapter. 2:43 Back in our grid fragment class all that's left to implement 2:45 is this numb columns variable. 2:49 Let's use Alt Enter to create it. 2:52 And now, we need to figure out the right number of columns. 2:56 If we open up grid item .XML, we can see that 3:00 each grid item will be a square with side lengths of two hundred DP. 3:04 So the number of columns we want should be equal to however wide the device is and 3:10 dp divided by 200. 3:15 Back in our grid fragment class, right above where we declare numColumns, 3:18 let's create a new display metrics variable Named DisplayMetrics, 3:24 and let's set it equal to getResources().getDisplayMetrics. 3:32 DisplayMetrics just give us information about a display like its size and density. 3:39 On the next line, let's create a new float variable named DP width. 3:47 This variable will store the width of the device and density independent pixels. 3:53 Let's set it equal to display metrics dot width and pixels. 3:59 Divided by displayMetrics.density. 4:04 The units for density are pixels over DP. 4:11 So the pixels cancel out and we're left with just DP. 4:16 Finally, let's set numColumns Equal to DPwidth divided by 200, 4:21 and use all to enter to cast it to an int, nice. 4:29 Now that we finish following our grid fragment roadmap and don't have 4:36 any errors, let's test the app and see if our grid fragment actually works. 4:40 I'll just pick the tablet this time. 4:51 Awesome, this grid layout really looks good the tablet. 5:09 In the next video, 5:13 we'll implement the side-by-side tablet layout we showed earlier. 5:14
You need to sign up for Treehouse in order to download course files.Sign up