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.