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