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
Lists don't look so good on tablets. For the tablet layout, let's use a grid!
Downloads
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
Now we can tell whether
a user is on a tablet or not.
0:00
Let's get back to implementing
the grid fragment.
0:03
After all, the tablet didn't look so
good with the list.
0:06
Let's start by creating a new layout for
our grid item.
0:09
New layout resource file.
0:15
And let's name it, grid_item.
0:18
But rather than type this all out,
0:25
I have included this layout down
below in the teachers notes.
0:27
So let's copy and paste that in.
0:31
And there we go.
0:39
It's a 200dp by 200dp square and it shows
the image on top and the text on bottom.
0:41
Great.
0:50
Now let's move on to
creating our GridFragment.
0:51
Let's create a new class and
name it GridFragment.
0:55
And make it extend to
the support fragment class.
1:02
This is the point where we'd usually need
to create a new layout file, but since
1:09
both are list nd our grid will be recycler
views, they can both use the same layout,
1:14
fragment list which we should now
rename to fragment recycler view.
1:20
Shift F six fragment recycler view.
1:29
And let's also change the ID
to no longer say list.
1:35
Next, let's head over to
our list fragment class and
1:45
copy everything after the word fragment.
1:50
Then let's paste this into our grid
fragment class to give us a head start.
1:55
Now, let's look through this code and
see what needs to be changed.
2:04
First, since we want our activity to know
the difference between a grid click, and
2:08
a list click,
2:12
let's rename the On List Recipe Selected
method to On Grid Recipe Selected.
2:14
Then, let's head over to our activity.
2:21
And make it implement our grid fragments
new on Recipe selected listener.
2:23
Bring this to a new line so
we can see it better.
2:33
At a comma.
2:37
Grid fragment dot on
recipe selected interface.
2:39
Then let's use alt enter to
implement on grid recipes selected.
2:46
We'll get back to this part later.
2:53
For now, let's retreat to
our grid fragment class and
2:55
on create view,
you will need to use a different adapter.
2:59
So let's replace ListAdapter
with GridAdapter.
3:04
And change the variable name, too.
3:14
Shift + F6, GridAdapter.
3:15
Also, instead of a linear layout manager
we should be using a grid layout manager.
3:19
And when we use a grid layout manager we
need to tell it how many columns to show.
3:28
So for the second parameter
let's pass in num columns.
3:34
Now I know none of these things exist yet
but this does give us a nice road map.
3:45
Let's start at the top with grid adapter
and use Alt enter to create the class.
3:50
But before we go any further, let's take
a look at our list adapter class and
3:59
see how much of this we can reuse.
4:04
Since we want our activity to know
the difference between a list and
4:09
a grid click,
we'll need two different interfaces.
4:12
So we can't reuse the interface.
4:16
And we also can't reuse the constructor.
4:18
Furthermore, we carry reuse the layout
ID because a great item and
4:21
a list item look different.
4:26
And we'll also lose the ability
to use our listener and
4:28
the on click method of our view holder.
4:31
But that's it, other than those three
things, are listed after and or
4:36
grid adapter are exactly the same.
4:40
So instead of repeating
a lot of this code,
4:43
let's see if we can do
something a bit better.
4:46
Let's start by copying
the list adapter class and
4:49
the project pane And pasting it back in.
4:52
This gives us a chance to rename it.
4:58
So let's call it,
recycler adapter, and now
5:01
we've got a good head start on creating
a common base class for our adapters.
5:07
Now we just need to remember the three
things that make a grid adapter
5:12
different from a list adapter.
5:15
First was the listener.
5:17
Let's get rid of that,
along with the constructor.
5:19
Second was the layout ID.
5:23
Let's delete it and then replace it
with a method called Get layout ID.
5:25
And since it's kind of important
that we have a layout ID.
5:35
Let's make this class.
5:39
Abstract.
5:40
And then use alt enter.
5:43
To create get layout ID.
5:45
As an abstract method.
5:47
This way.
5:50
Any class that extends recycler adapter.
5:51
Will need to provide a layout ID.
5:54
The third difference was
this error down here.
5:57
Since we'll be leaving the listener
up to whoever extends us,
6:00
let's also leave the on
click method up to them.
6:04
Let's do that by just getting rid of
the M listener part and the word list.
6:08
>> [SOUND]
>> Then let's use alt enter to create on
6:12
recipe selected as an abstract method.
6:17
Viola!
6:22
The burden of implementing
onRecipeSelected
6:23
has been passed on to the children.
6:26
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