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
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