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
Continue to build your UI Code using RecyclerView
Treehouse Course on Android Lists and Adapters
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
We're gonna be creating our adapter.
0:00
It's gonna bind our data to a view.
0:03
So let's go ahead and
create a new adapter.
0:06
I'm gonna call mine listing adapter.
0:08
And it's going to extend
the RecyclerView.Adapter class.
0:11
The RecyclerView.Adapter
class takes in a type and
0:18
the type has to extend the holder class
that also comes with recycler view.
0:22
So we need to go out and
create a class called listing holder and
0:27
we can just put that right
inside our listing adaptor.
0:32
And it needs to extend view holder.
0:42
It's telling us using the red lines that
we need to implement some methods and
0:44
we have some code we need to write here,
so lets go ahead and
0:50
ask it what we need to do.
0:54
You can use Alt return to do this,
we need to make a new constructor and
0:56
we need to implement a few methods here.
1:00
OnCreateViewHolder, onBindViewHolder and
getItemCount.
1:03
Okay.
These are all the default methods and
1:07
we need to start filling
these out one by one.
1:09
OnCreateViewHolder, it's going to
create a new instance of view holder.
1:12
OnBindViewHolder, it's going to
bind our data from the listing
1:16
into the views themselves.
1:20
And getItemCount is just gonna return back
the number of items we're displaying in
1:22
this list.
1:26
Okay.
Let's write a constructor for
1:27
our listing adapter class.
1:29
Constructor's public, ListingAdapter and
we need to make sure we pass in a context.
1:30
Context is required,
because we need layout inflater object.
1:37
Our inflater object is going to inflate
our XML that we just created and
1:41
create the views for us.
1:47
So our inflater, we can use inflater dot,
1:49
Layout_Inflater.from context and
pass in the context.
1:52
And now, we have an inflater object.
1:56
In onCreateViewHolder, all we need to
do is create a new view holder and
1:58
it takes in the item view, which is
the layout that we need to inflate.
2:04
So we'll call it inflater.inflate.
2:10
We're gonna pass in our layout.
2:13
Our layout is in RES and you can see
up here, it's called layout_listing.
2:15
Let me pass in a viewGroup and
false, since the recycler
2:22
view is going to do the actual
adding of the view to the parent.
2:27
Now, in the listing holder,
we need to put in references for
2:34
the ImageView and the different
text views that we had as well.
2:38
So we had a TitleView, a TextView for
2:42
shopNameView and
another final one for the price.
2:47
Let's make sure we import all of these and
2:55
we're just gonna get references to them
by looking them up within our itemViews.
2:58
So, imageView is going to
be itemView.findViewById.
3:03
The IDs we set were starting with listing.
3:09
So we've got image here.
3:12
And it's gonna tell us we need to make
sure we cast it to the right type,
3:14
which we'll go ahead and do.
3:18
I'm just gonna do that for
every single one of these.
3:20
Now you might be using
something like Butter Knife or
3:31
another library that makes this easier for
you.
3:33
That's okay too.
3:37
I'm just doing this by hand.
3:38
Since my project is fairly self-contained
and small, it's not a big deal.
3:40
If your project is larger and has more and
more classes, you probably want to go
3:44
with a library like Butter Knife
to make this a little easier.
3:47
Great.
3:54
Now we need to add in somewhere to
actually store the listings in here, so
3:55
that we can return
the number in getItemCount.
3:59
So let's go ahead and
scroll up to the top of the class and,
4:02
and add our listings in here.
4:08
The object is active listings and we can
just call it something like listings or
4:11
activeListings.
4:15
I'm gonna call mine, activeListings
just to describe the exact object there.
4:16
And we need to be sure that we
check that this is not null
4:20
when we return the item count.
4:24
So, if it is null, just return_0,
cuz we don't have anything.
4:27
We also need to check,
even if we have the activeListings object,
4:35
we need to check that the actual listings
array is not null within it as well.
4:38
So.
4:43
That's called results.
4:47
So, if that is null,
also need to return_zero.
4:48
Finally, if there is something there we
can just return the length of that and
4:53
that's how many listings we have.
4:58
Now, an onBindViewHolder,
this is where we're gonna actually,
5:00
get a listing, get the data from it and
bind it to our views that we've inflated.
5:04
So to start, let's get a listing object.
5:09
Make sure we import the listing class.
5:20
And now for the holder, the holder
is our listing holder object and
5:23
it has the different
views that we sat on it.
5:27
So let's do the simple one, titleView.
5:30
Let's go ahead and setText and
5:34
that's gonna be listing.title.
5:38
Set the price and a shop name.
5:42
Now the shop name is
stored in the shop object,
5:53
which we can do .Shop and
then in here, shop_name.
5:57
The final part of this is
to display the image and
6:00
we can use Picasso that we added earlier
in our build.gradle file to do this.
6:04
To do that, let's go ahead and
go to next line and we're just gonna say,
6:11
Picasso.with and we just need our context,
so every view has a context.
6:17
So we'll get our imageView and
say, getContext and
6:23
we wanna go ahead and load and
where are we gonna get this?
6:27
Well, we're gonna get it from our listing.
6:33
And in our listing, we have the images and
6:35
we're just gonna get the first
one available to us.
6:38
It's an array of images it returns back,
we're just gonna get that very first one
6:41
and get a URL for an image to load and
there's several to choose from.
6:45
Let's go ahead and just load this very
large one and we want to load it into our
6:50
folder imageView.
6:56
Since our adapter is what cares about
the dataset, we're gonna make the adapter
7:02
be the callback when we access
the API using Retrofit.
7:07
When successful, we can replace
the current dataset with the new data and
7:11
then call notify dataset change
to ensure the list gets redrawn.
7:15
Let's go ahead and do that now.
7:18
In our adapter class,
let's scroll all the way up to the top and
7:20
after the extends clause, we're just gonna
add on a new line, an implements clause.
7:24
And we just need to implement
the callback from Retrofit and
7:29
the callback is typed
to ActiveListings and
7:34
it's gonna ask us what kind of
callback we're talking about.
7:37
And the callback is the Retrofit one and
it's imported here.
7:42
And it's gonna say that we need
to implement a few methods and
7:48
we're gonna go ahead and do that.
7:50
There's two methods, success and failure.
7:52
So, on success, we're going to replace our
activeListings with the activeListings and
7:55
we need to add this.activeListings
to differentiate between
8:01
our classes variable and the one
being passed into the success method.
8:06
And the we simply call
notify dataset changed here.
8:11
In the failure state, we're gonna need
to handle this at some point later on.
8:14
But for now,
we're just gonna leave it blank.
8:19
Let's take a break and when we return,
we're gonna setup our activity to make
8:21
an API call and actually display a list
of listings from Etsy on the screen.
8:25
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