This course will be retired on July 14, 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
Well done!
You have completed Android Fragments!
You have completed Android Fragments!
Preview
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