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 create the layout for our list of recipes!
RecyclerView Dependency
Don't forget to update the version!
compile 'com.android.support:recyclerview-v7:23.2.1'
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
Let's take a look at what we're
going to need in order to add a list
0:00
to our list fragment.
0:04
First, instead of the Text View,
our fragment's layout should
0:06
probably have a ListView, or
even better, a RecyclerView.
0:09
Then will need an adapter to help
manage the views in our list, and
0:14
we'll also need a layout for
what we want our list items to look like.
0:17
Let's start with the layout for
our list item.
0:22
In the layout folder, let's create a new
layout resource file named list_item.
0:25
Remember from the mockups,
0:33
that each list item is a picture of
the recipe followed by its name.
0:34
So let's drag out an image view,
and then a text view.
0:39
Then I'm going to switch to the text tab.
0:47
And if you want to open
a preview like this
0:49
just hit the preview button
over here on the right.
0:53
Next let's change the orientation
of the linear layout to horizontal.
0:56
Change its layout height to wrap content.
1:02
And give our two new views better IDs.
1:08
Let's name the image view,
item image and the text view, item text.
1:11
To make the text view take
up most of the width,
1:20
let's change both layout
width properties to 0dp.
1:22
0dp for the TextView, and
0dp for the ImageView.
1:25
And let's give our ImageView
a layout_weight of 1.
1:32
And the TextView a layout_weight of 3.
1:35
Looking good,
1:45
now let's finish off the image view
by setting layout height to 50dp.
1:46
Then let's add the scale type attribute
and set it equal to fitCenter
1:53
and let's set layout_margin
to 8dp to add some padding.
1:59
Setting the layout height to 50dp and
2:05
the scaleType to fitCenter means
that our images will be 50dp tall.
2:08
And they will be scaled to fit
nicely inside our image view.
2:12
Lastly, let's finish off our text view
by setting layout margin to 12dp.
2:16
And text size to 24 sp.
2:27
Now that we're done with our layout for
our list item,
2:36
let's create the adapter which will serve
up these list items to our recycler view.
2:39
Let's make a new class and
name it ListAdapter
2:44
and make it extend RecyclerView.Adapter,
which doesn't seem to exist.
2:51
Over in our apps, build.Gradle file
3:01
let's add the RecyclerView
support library as a dependency.
3:06
You can just copy and paste the code
from the teacher's notes if you'd like.
3:11
Then hit Sync Now.
3:17
And then,
we can close the build.gradle file.
3:18
Back in our list adapter class lets use
alt enter to import the recycler view.
3:24
Then lets use alt enter again to
implement the required methods.
3:31
But before we get to these methods we
should probably create our view holder
3:36
class.
3:40
At the bottom of this class,
let's create a new private class,
3:42
named ListViewHolder.
3:50
And let's make it extend
the RecyclerView.Viewholder class.
3:54
And let's also implement
the View.OnClickListener interface.
4:03
When we tap on the list item,
we want it to show us that recipe, so
4:14
we'll need an OnClickListener.
4:18
Then let's use Alt + Enter to
create the onClick method.
4:21
And let's use it again to
create the constructor.
4:27
Next, let's create a field for
each of the views in our listItem.
4:32
Private TextView, we'll call it mTextView.
4:41
Alt enter to import TextView and
4:46
private ImageView mImageView.
4:50
And let's set these fields
in the constructor.
4:56
mTextView =
itemView.findViewById(R.id.itemText).
4:58
Alt enter to add the cast.
5:07
And then mImageView =
5:19
itemView.findViewById(R.id.itemImage)
equals item view.
5:21
And alt enter to add the cast.
5:29
Then let's finish off the constructor,
5:32
by setting our view holder as
the itemViews on ClickListener.
5:34
ItemView.setOnClickListener and
pass and this.
5:37
All right,
let's get back to our list adapter methods
5:47
starting with onCreateViewHolder.
5:50
Since we need to return a ViewHolder let's
start by returning a new list view holder.
5:53
Which requires a view as a parameter.
6:02
So let's pass in the word view, and
6:05
then use alt enter to create
it as a local variable.
6:08
To get our view we'll need to inflate
it just like we did with our fragment.
6:14
Let's set it equal to
layoutinflator.from and
6:19
pass in parent.getcontext.
6:25
Then, now that we've got our inflater.
6:30
Let's call .inflate and pass in our list
6:32
item layout R.layout.listitem.
6:38
The parent view group.
6:42
Parent.
6:46
And false.
6:49
Since this time we really don't want to
attach our view to the parent view group.
6:50
Moving onto onBindViewHolder this is
where we should update the view and
6:55
our view holder to reflect which
position it's in on the screen.
7:00
And since we can't do this with
the list view holder class we have now,
7:05
let's add a bindView method
to our list ViewHolder.
7:09
public void bindView.
7:12
And it takes on a position.
7:20
Inside this method,
we'll need to update our TextView and
7:25
ImageView to display the right recipe.
7:28
Luckily, our Recipe class has an array for
the recipe names, and an array for
7:32
the resource IDs of the images,
so this isn't too difficult.
7:37
mTextView.setText and
7:40
passing in Recipes.names.
7:46
At index position will take
care of the text view.
7:50
And mImageView.setImageResource, and
7:57
passing in Recipe.resourceIds at index
8:02
position will take care of the image view.
8:06
Now that that's done let's call
this method from OnbindView holder.
8:13
First we'll need to cast the holder
parameter to a list view holder.
8:18
So two left parentheses list view
holder Which is going to be the cast,
8:23
and we're casting our holder,
which is now a ListViewHolder, and
8:30
then we can call .bindView,
and pass along the position.
8:35
Last but not least,
let's update getItemCount to return
8:40
Recipes.names.length.
8:44
For this app,
the recipes are totally static and
8:49
will never change, so it's okay to use the
names array when setting the item count.
8:52
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