This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll finish out our GridFragment!
Related Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up