1 00:00:00,460 --> 00:00:01,290 All right. 2 00:00:01,290 --> 00:00:04,640 Now that we've created a common base class for our adapters, 3 00:00:04,640 --> 00:00:09,905 let's head over to our list adapter class and update it to extend recycler adapter. 4 00:00:09,905 --> 00:00:17,466 >> [SOUND] >> Then 5 00:00:17,466 --> 00:00:21,094 let's use alt enter to implement the methods we just created. 6 00:00:25,309 --> 00:00:28,618 And then, let's move them right above the onCreateViewHolder method. 7 00:00:28,618 --> 00:00:34,224 Cut, getLayoutId. 8 00:00:36,536 --> 00:00:40,460 Put it up here and do the same with onRecipeSelected. 9 00:00:46,430 --> 00:00:49,000 Then to finish, get layout ID. 10 00:00:49,000 --> 00:00:50,460 Let's return the layout ID. 11 00:00:50,460 --> 00:00:51,870 Founded on Create a view holder. 12 00:00:58,170 --> 00:01:00,390 And to finish on Recipe selected. 13 00:01:00,390 --> 00:01:03,560 Let's just copy what's in the on click method and paste it up here. 14 00:01:11,250 --> 00:01:14,080 And then change Mindex to Index. 15 00:01:16,590 --> 00:01:20,670 Then, let's delete everything below the on Recipe selected method 16 00:01:23,070 --> 00:01:24,300 except for the last curly brace. 17 00:01:28,080 --> 00:01:32,110 And now, we're only left with the three things that make our list adapter unique. 18 00:01:32,110 --> 00:01:35,230 The list fragment listener, 19 00:01:36,810 --> 00:01:40,910 the layout ID, and what happens when we pick a recipe. 20 00:01:42,540 --> 00:01:48,790 Finally let's hit control alt O to clean up the imports. 21 00:01:49,790 --> 00:01:50,990 Looking good. 22 00:01:50,990 --> 00:01:55,229 Now for the final piece of the puzzle, let's finish up our GridAdapter. 23 00:01:57,518 --> 00:02:02,149 First, copy everything in the ListAdapter class, starting with extends. 24 00:02:06,105 --> 00:02:09,980 Then, over in our GridAdapter class, place extends over the brackets. 25 00:02:11,780 --> 00:02:15,830 Next, Let's update list fragment to be grid fragment. 26 00:02:21,090 --> 00:02:23,590 And list adapter to be grid adapter. 27 00:02:27,690 --> 00:02:34,980 Lastly, let's change get layout ID to return a grid item instead of a list item. 28 00:02:34,980 --> 00:02:39,850 And change on list recipe selected to on grid recipes selected. 29 00:02:43,470 --> 00:02:45,740 That takes care of our grid adapter. 30 00:02:45,740 --> 00:02:49,080 Back in our grid fragment class all that's left to implement 31 00:02:49,080 --> 00:02:50,930 is this numb columns variable. 32 00:02:52,080 --> 00:02:53,790 Let's use Alt Enter to create it. 33 00:02:56,500 --> 00:03:00,430 And now, we need to figure out the right number of columns. 34 00:03:00,430 --> 00:03:04,910 If we open up grid item .XML, we can see that 35 00:03:04,910 --> 00:03:09,060 each grid item will be a square with side lengths of two hundred DP. 36 00:03:10,350 --> 00:03:15,500 So the number of columns we want should be equal to however wide the device is and 37 00:03:15,500 --> 00:03:18,350 dp divided by 200. 38 00:03:18,350 --> 00:03:24,750 Back in our grid fragment class, right above where we declare numColumns, 39 00:03:24,750 --> 00:03:32,200 let's create a new display metrics variable Named DisplayMetrics, 40 00:03:32,200 --> 00:03:39,370 and let's set it equal to getResources().getDisplayMetrics. 41 00:03:39,370 --> 00:03:47,479 DisplayMetrics just give us information about a display like its size and density. 42 00:03:47,479 --> 00:03:53,589 On the next line, let's create a new float variable named DP width. 43 00:03:53,589 --> 00:03:59,050 This variable will store the width of the device and density independent pixels. 44 00:03:59,050 --> 00:04:04,516 Let's set it equal to display metrics dot width and pixels. 45 00:04:04,516 --> 00:04:09,120 Divided by displayMetrics.density. 46 00:04:11,619 --> 00:04:15,190 The units for density are pixels over DP. 47 00:04:16,410 --> 00:04:19,950 So the pixels cancel out and we're left with just DP. 48 00:04:21,550 --> 00:04:29,510 Finally, let's set numColumns Equal to DPwidth divided by 200, 49 00:04:29,510 --> 00:04:36,460 and use all to enter to cast it to an int, nice. 50 00:04:36,460 --> 00:04:40,365 Now that we finish following our grid fragment roadmap and don't have 51 00:04:40,365 --> 00:04:44,682 any errors, let's test the app and see if our grid fragment actually works. 52 00:04:51,946 --> 00:04:53,602 I'll just pick the tablet this time. 53 00:05:09,486 --> 00:05:12,680 Awesome, this grid layout really looks good the tablet. 54 00:05:13,750 --> 00:05:14,860 In the next video, 55 00:05:14,860 --> 00:05:18,080 we'll implement the side-by-side tablet layout we showed earlier.