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
Now that you have setup your networking model, you are ready to write your UI code using a RecyclerView
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 set up our networking model and
now we're ready to write our UI code.
0:01
The app is going to display listings
from Etsy in a scrolling list.
0:05
To do this,
we're going to use a recycler view.
0:09
If you need to brush up on
how to use recycler view,
0:12
see the link in the teacher's notes.
0:14
Let's start out by writing a layout file.
0:16
This will be used to display for
each item in the list.
0:19
It's gonna go to my resource folder,
in layout, and create a new file.
0:22
I want to call mine, layout_listing.
0:28
In here, we need three views.
0:37
An image view, it's going to
display the image from the listing.
0:40
And I need a text view to display
the title, so let's give this an ID.
0:46
We'll give the image view an ID as well,
so we can reference these later on in our
0:53
adapter, so
keep that in additional text views.
0:57
This one is going to be the shop name.
1:01
And, finally,
I'm going to have one for the price.
1:09
I'm going to use a combination of linear
layout and relative layout to get
1:16
the listing image to display nicely for
each item in our scrolling list.
1:19
I'm just gonna go ahead and
use a relative layout around all the text.
1:25
So it's width is going to be match parent,
so
1:32
it's going to go all the way across
the full width for each item.
1:34
The height is going to be wrap content, so
1:37
it'll only be as tall as
the text we put in there.
1:39
Let's go ahead and move the text
news into our relative layout.
1:43
Now we need to add in some rules about how
these text views are going to be laid out
1:47
within our relative layout.
1:51
I want the title to be the largest,
on the top, and
1:53
below that, I want the shop name on
the left, and the price on the right.
1:55
So, first, let's go ahead and
make sure that the title's width
2:01
is all the way across, so we're gonna make
it match parent, and now the shop name is
2:04
going to be aligned to
the parent's left side.
2:08
And we also want it to be below the title.
2:13
So we give it the rule layout underscore
below and we give it the ID of the title.
2:17
We can go ahead and
check In the design panel,
2:24
if we put some text in here,
this is working.
2:28
Just gonna put some sample content in.
2:34
You can use the tools
namespace to put in some text,
2:36
I'm just gonna put in some text right
now and I'll delete it later on.
2:40
Just want to make sure that my
rules are set up correctly.
2:44
And yes, the shop name is below the title.
2:47
And let's go ahead and
add in a rule for the price as well.
2:53
It should also be below the listing title,
2:58
only it should be aligned To
the right hand side of the parent.
3:02
To support left and right and right and
left languages, you can also add in
3:07
the start and end attributes that
mirror left and right as well.
3:11
Gonna put in some sample pricing here.
3:30
Let's check this out.
3:33
Yes, our price is to the right,
shop name to the left,
3:36
and listing titles above that.
3:39
So that looks pretty good.
3:41
Okay, this will work to start out.
3:44
Since we're using recycler
view to display listings,
3:46
we need to go ahead and
add this as a build dependency.
3:49
Let's go to our build.gradle file,
and add in a new compile statement for
3:52
recycler view, which is part of
the support library, com.android.support,
3:58
recyclerview-v7 and
the latest version 21.0.3.
4:04
Again we need a sync.
4:10
Okay, now that it's finished syncing
we should be able to use recycler view.
4:12
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