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 Google Play Services!
You have completed Google Play Services!
Preview
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