1
00:00:01,300 --> 00:00:05,220
We set up our networking model and
now we're ready to write our UI code.

2
00:00:05,220 --> 00:00:09,330
The app is going to display listings
from Etsy in a scrolling list.

3
00:00:09,330 --> 00:00:12,210
To do this,
we're going to use a recycler view.

4
00:00:12,210 --> 00:00:14,920
If you need to brush up on
how to use recycler view,

5
00:00:14,920 --> 00:00:16,980
see the link in the teacher's notes.

6
00:00:16,980 --> 00:00:19,380
Let's start out by writing a layout file.

7
00:00:19,380 --> 00:00:22,592
This will be used to display for
each item in the list.

8
00:00:22,592 --> 00:00:27,210
It's gonna go to my resource folder,
in layout, and create a new file.

9
00:00:28,430 --> 00:00:33,182
I want to call mine, layout_listing.

10
00:00:37,066 --> 00:00:40,300
In here, we need three views.

11
00:00:40,300 --> 00:00:42,970
An image view, it's going to
display the image from the listing.

12
00:00:46,350 --> 00:00:53,300
And I need a text view to display
the title, so let's give this an ID.

13
00:00:53,300 --> 00:00:57,310
We'll give the image view an ID as well,
so we can reference these later on in our

14
00:00:57,310 --> 00:01:00,660
adapter, so
keep that in additional text views.

15
00:01:01,860 --> 00:01:06,270
This one is going to be the shop name.

16
00:01:09,297 --> 00:01:13,750
And, finally,
I'm going to have one for the price.

17
00:01:16,270 --> 00:01:19,720
I'm going to use a combination of linear
layout and relative layout to get

18
00:01:19,720 --> 00:01:25,078
the listing image to display nicely for
each item in our scrolling list.

19
00:01:25,078 --> 00:01:28,030
I'm just gonna go ahead and
use a relative layout around all the text.

20
00:01:32,160 --> 00:01:34,240
So it's width is going to be match parent,
so

21
00:01:34,240 --> 00:01:37,720
it's going to go all the way across
the full width for each item.

22
00:01:37,720 --> 00:01:39,410
The height is going to be wrap content, so

23
00:01:39,410 --> 00:01:42,030
it'll only be as tall as
the text we put in there.

24
00:01:43,400 --> 00:01:46,200
Let's go ahead and move the text
news into our relative layout.

25
00:01:47,520 --> 00:01:51,250
Now we need to add in some rules about how
these text views are going to be laid out

26
00:01:51,250 --> 00:01:53,090
within our relative layout.

27
00:01:53,090 --> 00:01:55,830
I want the title to be the largest,
on the top, and

28
00:01:55,830 --> 00:02:01,000
below that, I want the shop name on
the left, and the price on the right.

29
00:02:01,000 --> 00:02:04,430
So, first, let's go ahead and
make sure that the title's width

30
00:02:04,430 --> 00:02:08,610
is all the way across, so we're gonna make
it match parent, and now the shop name is

31
00:02:08,610 --> 00:02:13,510
going to be aligned to
the parent's left side.

32
00:02:13,510 --> 00:02:17,080
And we also want it to be below the title.

33
00:02:17,080 --> 00:02:24,630
So we give it the rule layout underscore
below and we give it the ID of the title.

34
00:02:24,630 --> 00:02:28,910
We can go ahead and
check In the design panel,

35
00:02:28,910 --> 00:02:31,900
if we put some text in here,
this is working.

36
00:02:34,120 --> 00:02:36,130
Just gonna put some sample content in.

37
00:02:36,130 --> 00:02:40,580
You can use the tools
namespace to put in some text,

38
00:02:40,580 --> 00:02:43,310
I'm just gonna put in some text right
now and I'll delete it later on.

39
00:02:44,530 --> 00:02:47,230
Just want to make sure that my
rules are set up correctly.

40
00:02:47,230 --> 00:02:50,000
And yes, the shop name is below the title.

41
00:02:53,460 --> 00:02:58,140
And let's go ahead and
add in a rule for the price as well.

42
00:02:58,140 --> 00:03:02,010
It should also be below the listing title,

43
00:03:02,010 --> 00:03:05,730
only it should be aligned To
the right hand side of the parent.

44
00:03:07,080 --> 00:03:11,210
To support left and right and right and
left languages, you can also add in

45
00:03:11,210 --> 00:03:15,340
the start and end attributes that
mirror left and right as well.

46
00:03:30,134 --> 00:03:32,330
Gonna put in some sample pricing here.

47
00:03:33,720 --> 00:03:34,640
Let's check this out.

48
00:03:36,170 --> 00:03:39,320
Yes, our price is to the right,
shop name to the left,

49
00:03:39,320 --> 00:03:41,390
and listing titles above that.

50
00:03:41,390 --> 00:03:42,300
So that looks pretty good.

51
00:03:44,150 --> 00:03:46,080
Okay, this will work to start out.

52
00:03:46,080 --> 00:03:49,079
Since we're using recycler
view to display listings,

53
00:03:49,079 --> 00:03:52,500
we need to go ahead and
add this as a build dependency.

54
00:03:52,500 --> 00:03:58,304
Let's go to our build.gradle file,
and add in a new compile statement for

55
00:03:58,304 --> 00:04:04,664
recycler view, which is part of
the support library, com.android.support,

56
00:04:04,664 --> 00:04:10,155
recyclerview-v7 and
the latest version 21.0.3.

57
00:04:10,155 --> 00:04:11,115
Again we need a sync.

58
00:04:12,575 --> 00:04:15,295
Okay, now that it's finished syncing
we should be able to use recycler view.